Android 安卓动画补间动画 - 组合(四个动画) 动画

爱被打了一巴掌 2022-05-14 03:04 273阅读 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]

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

## 共有属性 篇 ##

<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>是否应用与<span style="color:#3399ea;">fillBefore</span>的值，默认:<span style="color:#3399ea;">true</span></td> 
  </tr> 
  <tr> 
   <td>android:repeatCount="0"</td> 
   <td>重复次数，值<span style="color:#3399ea;">infinite</span>为无限一直重复（<span style="color:#3399ea;">int</span>）</td> 
  </tr> 
  <tr> 
   <td>android:repeatMode="restart"</td> 
   <td>播放的动画模式<span style="color:#3399ea;">restart</span>表示正序播放，<span style="color:#3399ea;">reverse</span>代表倒序播放，默认是<span style="color:#3399ea;">restart</span></td> 
  </tr> 
  <tr> 
   <td>android:startOffset="1000"</td> 
   <td>动画延迟开始时间(多长时间后开始执行动画)，在组合动画中不用这个，会在各个动画中分开用，用于延迟动画执行时间</td> 
  </tr> 
 </tbody> 
</table>

## 效果演示 篇 ##

![70][]

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

## 操作步骤 ##

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

![70 1][]

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

![70 2][]

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

![70 3][]

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

四种动画有着共同的属性，所以，将有着共同属性写在set属性之中，set标签下放置动画，每个动画有独有的属性，分别写在动画标签中！

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="5000"
        android:fillAfter="false"
        android:fillBefore="true"
        android:fillEnabled="true"
        android:repeatCount="0"
        android:repeatMode="restart">
        
    
        
        <translate
            android:fromXDelta="0"
            android:fromYDelta="0"
            android:startOffset="0"
            android:toXDelta="520"
            android:toYDelta="520"></translate>
        
    
        
        <rotate
            android:fromDegrees="0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:startOffset="1000"
            android:toDegrees="30"></rotate>
    
        <scale
            android:fromXScale="1"
            android:fromYScale="1"
            android:pivotX="50%"
            android:pivotY="50%"
            android:startOffset="1000"
            android:toXScale="2"
            android:toYScale="1"></scale>
    
        <alpha
            android:startOffset="1300"
            android:fromAlpha="1.0"
            android:toAlpha="0.0"></alpha>
    
    </set>

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

## 布局文件 篇 ##

<?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:background="#656be1"
            android:text="组合动画"
            android:textColor="#fff"
            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/447595e210324f00a8dd26beb22bed6f.png
[70 1]: /images/20220514/ab4f3d963da04428b11d4fee4d0499a3.png
[70 2]: /images/20220514/f6d69e11fc874a46988fa2dd49c35b5f.png
[70 3]: /images/20220514/ccdef8e9d04c445682058a2a70a38732.png