Android属性动画简单剖析

Posted 2020-09-15 火龙裸先生

运行效果图：

先看布局文件吧，activity_main.xml：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     tools:context="com.example.administrator.animatordemo.MainActivity">
 7 
 8     <ImageView
 9         android:id="@+id/iv_icon"
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:layout_marginLeft="10dp"
13         android:layout_marginTop="10dp"
14         android:scaleType="centerCrop"
15         android:src="@mipmap/ic_launcher_round" />
16 
17     <LinearLayout
18         android:layout_width="wrap_content"
19         android:layout_height="wrap_content"
20         android:layout_alignParentBottom="true"
21         android:layout_centerHorizontal="true"
22         android:orientation="vertical">
23 
24         <Button
25             android:id="@+id/btn_click1"
26             android:layout_width="wrap_content"
27             android:layout_height="wrap_content"
28             android:layout_centerInParent="true"
29             android:layout_gravity="center"
30             android:text="startAnimator1" />
31 
32         <Button
33             android:id="@+id/btn_click2"
34             android:layout_width="wrap_content"
35             android:layout_height="wrap_content"
36             android:layout_centerInParent="true"
37             android:layout_gravity="center"
38             android:text="startAnimator2" />
39 
40         <Button
41             android:id="@+id/btn_click3"
42             android:layout_width="wrap_content"
43             android:layout_height="wrap_content"
44             android:layout_centerInParent="true"
45             android:layout_gravity="center"
46             android:text="startAnimator3" />
47 
48     </LinearLayout>
49 
50 </RelativeLayout>

然后看JAVA代码，MainActivity.java：

 1 package com.example.administrator.animatordemo;
 2 
 3 import android.animation.AnimatorSet;
 4 import android.animation.ObjectAnimator;
 5 import android.animation.PropertyValuesHolder;
 6 import android.os.Bundle;
 7 import android.support.v7.app.AppCompatActivity;
 8 import android.view.View;
 9 import android.widget.Button;
10 import android.widget.ImageView;
11 
12 public class MainActivity extends AppCompatActivity implements View.OnClickListener {
13 
14     private Button btn_click1;
15     private Button btn_click2;
16     private Button btn_click3;
17     private ImageView iv_icon;
18 
19     @Override
20     protected void onCreate(Bundle savedInstanceState) {
21         super.onCreate(savedInstanceState);
22         setContentView(R.layout.activity_main);
23         initView();
24     }
25 
26     private void initView() {
27         iv_icon = (ImageView) findViewById(R.id.iv_icon);
28         btn_click1 = (Button) findViewById(R.id.btn_click1);
29         btn_click1.setOnClickListener(this);
30         btn_click2 = (Button) findViewById(R.id.btn_click2);
31         btn_click2.setOnClickListener(this);
32         btn_click3 = (Button) findViewById(R.id.btn_click3);
33         btn_click3.setOnClickListener(this);
34     }
35 
36     @Override
37     public void onClick(View v) {
38         switch (v.getId()) {
39             case R.id.btn_click1:
40                 startAnimator1();//这样写，三个动画会同时执行
41                 break;
42             case R.id.btn_click2:
43                 startAnimator2();//效果同startAnimator1()一致，要是和第一种相比较，更推荐此方法
44                 break;
45             case R.id.btn_click3:
46                 startAnimator3();
47                 break;
48         }
49     }
50 
51     /**
52      * 旋转动画：rotation
53      * 水平动画：translationX
54      * 垂直动画：translationY
55      */
56     private void startAnimator1() {
57         ObjectAnimator.ofFloat(iv_icon, "rotation", 0F, 200F).setDuration(1000).start();
58         ObjectAnimator.ofFloat(iv_icon, "translationX", 0F, 200F).setDuration(1000).start();
59         ObjectAnimator.ofFloat(iv_icon, "translationY", 0F, 200F).setDuration(1000).start();
60     }
61 
62     private void startAnimator2() {
63         PropertyValuesHolder p1 = PropertyValuesHolder.ofFloat("rotation", 0F, 200F);
64         PropertyValuesHolder p2 = PropertyValuesHolder.ofFloat("translationX", 0F, 200F);
65         PropertyValuesHolder p3 = PropertyValuesHolder.ofFloat("translationY", 0F, 200F);
66         ObjectAnimator.ofPropertyValuesHolder(iv_icon, p1, p2, p3).setDuration(1000).start();//第一个参数是控件对象，后面参数是可变长数组
67     }
68 
69     private void startAnimator3() {
70         ObjectAnimator animator1 = ObjectAnimator.ofFloat(iv_icon, "rotation", 0F, 200F);
71         ObjectAnimator animator2 = ObjectAnimator.ofFloat(iv_icon, "translationX", 0F, 200F);
72         ObjectAnimator animator3 = ObjectAnimator.ofFloat(iv_icon, "translationY", 0F, 200F);
73         AnimatorSet set = new AnimatorSet();
74 //        set.playTogether(animator1, animator2, animator3);//三个动画同时执行
75         set.playSequentially(animator1, animator2, animator3);//三个动画按顺序执行
76         set.setDuration(1000);
77         set.start();
78     }
79 }

说明一下，在startAnimator3()这个方法当中，AnimatorSet集合除了playTogether和playSequentially两个方法外，还有play方法。比如它可以这样使用：

set.paly(animator2).with(animator3);
set.play(animator1).after(animator2);

这种效果的话，则是会先进行“水平动画和垂直动画”同时执行，然后再执行旋转动画。通过with()，after()，甚至还有before()方法这样一些方法，我们就可以做到这样一个属性集合详细的顺序处理。

是不是强大的功能呢？这种方式，也是属性动画里面使用最多的一种方式。