Android属性动画初步学习笔记

Posted 2020-09-16

 近期学习android属性动画和VetcorDrawable实现属性动画，以此记录一下学习笔记。

  首先是属性动画，小白没截过动态图，方三张静态图吧

     

效果是点击红色图片，7个选项以属性动画的方式弹出并旋转，最后成一个1/4圆弧排列，再次点击则收回到红色原点下。

布局文件很简单，就是一个RelativeLayout下八个ImageView：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent">
 6 
 7     <RelativeLayout
 8         android:gravity="center"
 9         android:layout_width="match_parent"
10         android:layout_height="match_parent">
11 
12         <ImageView
13             android:layout_marginTop="5dp"
14             android:layout_marginLeft="5dp"
15             android:layout_width="24dp"
16             android:layout_height="24dp"
17             android:id="@+id/iv_b"
18             android:src="@drawable/b"
19             />
20         <ImageView
21             android:layout_marginTop="5dp"
22             android:layout_marginLeft="5dp"
23             android:layout_width="24dp"
24             android:layout_height="24dp"
25             android:id="@+id/iv_c"
26             android:src="@drawable/c"
27             />
28         <ImageView
29             android:layout_marginTop="5dp"
30             android:layout_marginLeft="5dp"
31             android:layout_width="24dp"
32             android:layout_height="24dp"
33             android:id="@+id/iv_d"
34             android:src="@drawable/d"
35             />
36         <ImageView
37             android:layout_marginTop="5dp"
38             android:layout_marginLeft="5dp"
39             android:layout_width="24dp"
40             android:layout_height="24dp"
41             android:id="@+id/iv_e"
42             android:src="@drawable/e"
43             />
44         <ImageView
45             android:layout_marginTop="5dp"
46             android:layout_marginLeft="5dp"
47             android:layout_width="24dp"
48             android:layout_height="24dp"
49             android:id="@+id/iv_f"
50             android:src="@drawable/f"
51             />
52         <ImageView
53             android:layout_marginTop="5dp"
54             android:layout_marginLeft="5dp"
55             android:layout_width="24dp"
56             android:layout_height="24dp"
57             android:id="@+id/iv_g"
58             android:src="@drawable/g"
59             />
60         <ImageView
61             android:layout_marginTop="5dp"
62             android:layout_marginLeft="5dp"
63             android:layout_width="24dp"
64             android:layout_height="24dp"
65             android:id="@+id/iv_h"
66             android:src="@drawable/h"
67             />
68         <ImageView
69             android:layout_width="40dp"
70             android:layout_height="40dp"
71             android:id="@+id/iv_a"
72             android:src="@drawable/a"
73             />
74 
75     </RelativeLayout>
76 
77 </LinearLayout>

接下来在MainActivity中，定义一个装有动画效果的ImageView的集合；所有ImageView的id的int数组；还有一个角度用来计算呈半圆排列时，每个图片的坐标；还有个boolean型flag用来判断点击是弹出还是回收：

1     private List<ImageView> imageViewList = new ArrayList<ImageView>();
2     private int[] res = new int[]{R.id.iv_a, R.id.iv_b, R.id.iv_c, R.id.iv_d, R.id.iv_e, R.id.iv_f, R.id.iv_g, R.id.iv_h};
3     private boolean flag = true;
4     private static double ANGLE = Math.PI/12;

接着是onCreate以及初始化控件和点击事件方法

 1     @Override
 2     protected void onCreate(Bundle savedInstanceState) {
 3         super.onCreate(savedInstanceState);
 4         setContentView(R.layout.activity_main);
 5 
 6         initView();
 7     }
 8 
 9     private void initView() {
10         for(int i = 0; i < res.length; i++) {
11             ImageView imageView = (ImageView) findViewById(res[i]);
12             imageView.setOnClickListener(this);
13             imageViewList.add(imageView);
14         }
15     }
16 
17     @Override
18     public void onClick(View view) {
19         switch (view.getId()) {
20             case R.id.iv_a:
21                 if(flag) {
22                     startAnim();
23                 } else {
24                     stopAnim();
25                 }
26 
27                 break;
28         }
29     }

最后则是重点，动画代码，也就是上面onClick方法里调用的startAnim()和stopAnim()所封装的弹出和收回两个方法：

 1     //收回动画
 2     private void stopAnim() {
 3         for(int i = res.length - 1; i > 0; i--) {
 4             ObjectAnimator animatorX = ObjectAnimator.ofFloat(imageViewList.get(i), "translationX", Math.round(300*(Math.cos((i-1)*ANGLE))), 0F);
 5             animatorX.setDuration(500);
 6             ObjectAnimator animatorY = ObjectAnimator.ofFloat(imageViewList.get(i), "translationY", Math.round(300*(Math.sin((i-1)*ANGLE))), 0F);
 7             animatorY.setDuration(500);
 8             ObjectAnimator animatorRotation = ObjectAnimator.ofFloat(imageViewList.get(i), "rotation", 5*360F, 0F);
 9             animator.setDuration(500);
10             AnimatorSet set = new AnimatorSet();
11             set.play(animatorX).with(animatorY).with(animatorRotation);
12             set.setStartDelay(i*300);
13             set.start();
14             flag = true;
15         }
16     }
17 
18     //弹出动画
19     private void startAnim() {
20         for(int i = 1; i < res.length; i++) {
21             ObjectAnimator animatorX = ObjectAnimator.ofFloat(imageViewList.get(i), "translationX", 0F, Math.round(300*(Math.cos((i-1)*ANGLE))));
22             animatorX.setDuration(500);
23             ObjectAnimator animatorY = ObjectAnimator.ofFloat(imageViewList.get(i), "translationY", 0F, Math.round(300*(Math.sin((i-1)*ANGLE))));
24             animatorY.setDuration(500);
25             ObjectAnimator animatorRotation = ObjectAnimator.ofFloat(imageViewList.get(i), "rotation", 0F, 5*360F);
26             animator.setDuration(500);
27             AnimatorSet set = new AnimatorSet();
28             set.play(animatorX).with(animatorY).with(animatorRotation);
29             set.setStartDelay(i*300);
30             set.start();
31             flag = false;
32         }
33     }

三个属性动画分别是X轴，Y轴移动，和旋转；

ObjectAnimator的ofFloat的四个参数分别是需要执行动画的对象，动画的种类的属性名，开始时候的位置，结束时候的位置；

其中AnimatorSet的with是用于将三个动画同时展现，还有after用于控制顺序的；setStartDelay则是延迟展现，保证7张图片不要一下子全部弹出来，这些也可以根据具体需要进行修改组合。

 

最后感谢慕课网的eclipse_xu老师，这篇笔记正是看了徐老师的课程才写下的，收益颇丰，再次感谢！