Android 安卓动画补间动画 - 透明/渐变动画

逃离我推掉我的手 2022-05-14 02:36 300阅读 0赞

## 补间动画之 透明/渐变 动画 ##

实现效果:点击按钮后按钮从完全透明到不透明

补间动画概念:就是从一个画面过渡到另一个画面时让人看到中间动画效果！

--------------------

## 动画 - 相关文章篇 ##

**帧动画**

帧动画:  [https://blog.csdn.net/qq\_40881680/article/details/82222684][https_blog.csdn.net_qq_40881680_article_details_82222684]

**补间动画**

补间动画-平移动画:  [https://blog.csdn.net/qq\_40881680/article/details/82255459][https_blog.csdn.net_qq_40881680_article_details_82255459]

补间动画-缩放动画:  [https://blog.csdn.net/qq\_40881680/article/details/82260914][https_blog.csdn.net_qq_40881680_article_details_82260914]

补间动画-旋转动画:  [https://blog.csdn.net/qq\_40881680/article/details/82261557][https_blog.csdn.net_qq_40881680_article_details_82261557]

补间动画-透明/渐变动画:  [https://blog.csdn.net/qq\_40881680/article/details/82261869][https_blog.csdn.net_qq_40881680_article_details_82261869]

补间动画-组合动画(四个动画一起播放):  [https://blog.csdn.net/qq\_40881680/article/details/82285987][https_blog.csdn.net_qq_40881680_article_details_82285987]

**属性动画**

属性动画-渐变透明动画:  [https://blog.csdn.net/qq\_40881680/article/details/82318363][https_blog.csdn.net_qq_40881680_article_details_82318363]

属性动画-旋转动画:  [https://blog.csdn.net/qq\_40881680/article/details/82354017][https_blog.csdn.net_qq_40881680_article_details_82354017]

属性动画-缩放动画:  [https://blog.csdn.net/qq\_40881680/article/details/82377850][https_blog.csdn.net_qq_40881680_article_details_82377850]

属性动画-移动动画:  [https://blog.csdn.net/qq\_40881680/article/details/82378391][https_blog.csdn.net_qq_40881680_article_details_82378391]

属性动画-组合动画:  [https://blog.csdn.net/qq\_40881680/article/details/82381258][https_blog.csdn.net_qq_40881680_article_details_82381258]

--------------------

## 效果图 篇 ##

![70][]

--------------------

## 操作步骤 ##

在res下创建anim文件夹,右击res文件夹，按下图操作创建

![70 1][]

找到anim点击OK，此时就创建好了

![70 2][]

在这个文件夹(anim)下新建xml文件，右击anim文件夹按下图操作创建

![70 3][]

在这个xml文件中写入属性，属性详细见下列表格解释:

<?xml version="1.0" encoding="utf-8"?>
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fillAfter="false"
        android:fillBefore="true"
        android:fillEnabled="true"
        android:fromAlpha="0.0"
        android:repeatCount="0"
        android:repeatMode="restart"
        android:startOffset="0"
        android:toAlpha="1.0">
    
    </alpha>

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>详细解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>android:duration="2000"</td> 
   <td>动画持续时间。即这个动画会持续多长时间，单位(ms)</td> 
  </tr> 
  <tr> 
   <td>android:fillAfter="false"</td> 
   <td>动画播放完毕后，是否会停止在动画结束的状态，优先存在于fillBefore</td> 
  </tr> 
  <tr> 
   <td>android:fillBefore="true"</td> 
   <td>动画播放完毕后，是否会恢复原始状态</td> 
  </tr> 
  <tr> 
   <td>android:fillEnabled="true"</td> 
   <td>是否应用与fillBefore的值，默认:true</td> 
  </tr> 
  <tr> 
   <td>android:repeatCount="0"</td> 
   <td>重复次数，值infinite为无限一直重复</td> 
  </tr> 
  <tr> 
   <td>android:repeatMode="restart"</td> 
   <td>播放的动画模式restart表示正序播放，reverse代表倒序播放，默认是restart</td> 
  </tr> 
  <tr> 
   <td>android:startOffset="0"</td> 
   <td>动画延迟开始时间(多长时间后开始执行动画)</td> 
  </tr> 
  <tr> 
   <td>android:fromAlpha="0.0"</td> 
   <td>开始时候的透明度，建议取值0~1</td> 
  </tr> 
  <tr> 
   <td>android:toAlpha="1.0"</td> 
   <td>结束时候的透明度，建议取值0~1</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 布局文件 篇 ##

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="150dp"
            android:text="这是 透明/渐变 效果动画"
            android:textSize="18sp" />
    
    </LinearLayout>

--------------------

## 代码逻辑 篇 ##

透明/渐变动画用到Animation，如下操作，就可以实现，点击按钮后透明/渐变效果

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    
        private Button button;
        Animation animation;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initView();
    
        }
    
        private void initView() {
            button = (Button) findViewById(R.id.button);
            animation = AnimationUtils.loadAnimation(this,R.anim.start);
            button.setOnClickListener(this);
        }
    
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.button:
                    button.startAnimation(animation);
                    break;
            }
        }
    }

最终效果图:

![70][]

[https_blog.csdn.net_qq_40881680_article_details_82222684]: https://blog.csdn.net/qq_40881680/article/details/82222684
[https_blog.csdn.net_qq_40881680_article_details_82255459]: https://blog.csdn.net/qq_40881680/article/details/82255459
[https_blog.csdn.net_qq_40881680_article_details_82260914]: https://blog.csdn.net/qq_40881680/article/details/82260914
[https_blog.csdn.net_qq_40881680_article_details_82261557]: https://blog.csdn.net/qq_40881680/article/details/82261557
[https_blog.csdn.net_qq_40881680_article_details_82261869]: https://blog.csdn.net/qq_40881680/article/details/82261869
[https_blog.csdn.net_qq_40881680_article_details_82285987]: https://blog.csdn.net/qq_40881680/article/details/82285987
[https_blog.csdn.net_qq_40881680_article_details_82318363]: https://blog.csdn.net/qq_40881680/article/details/82318363
[https_blog.csdn.net_qq_40881680_article_details_82354017]: https://blog.csdn.net/qq_40881680/article/details/82354017
[https_blog.csdn.net_qq_40881680_article_details_82377850]: https://blog.csdn.net/qq_40881680/article/details/82377850
[https_blog.csdn.net_qq_40881680_article_details_82378391]: https://blog.csdn.net/qq_40881680/article/details/82378391
[https_blog.csdn.net_qq_40881680_article_details_82381258]: https://blog.csdn.net/qq_40881680/article/details/82381258
[70]: /images/20220514/9f763a841e4d4e3aa8a807e78f161291.png
[70 1]: /images/20220514/81f37ee27d3b4d0e9dca9dc233f5fb5f.png
[70 2]: /images/20220514/c026879fc8c54a8196f01e06c6ce5a77.png
[70 3]: /images/20220514/53631bb87d714bd2acb12351b499817c.png