Android属性动画初步学习笔记

别裁伪体亲风雅,转益多师是汝师。这篇文章主要讲述Android属性动画初步学习笔记相关的知识,希望能为你提供帮助。
  近期学习android属性动画和VetcorDrawable实现属性动画,以此记录一下学习笔记。
  首先是属性动画,小白没截过动态图,方三张静态图吧

Android属性动画初步学习笔记

文章图片
   
Android属性动画初步学习笔记

文章图片
   
Android属性动画初步学习笔记

文章图片

效果是点击红色图片,7个选项以属性动画的方式弹出并旋转,最后成一个1/4圆弧排列,再次点击则收回到红色原点下。
布局文件很简单,就是一个RelativeLayout下八个ImageView:
1 < ?xml version="1.0" encoding="utf-8"?> 2 < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3android:orientation="vertical" 4android:layout_width="match_parent" 5android:layout_height="match_parent"> 6 7< RelativeLayout 8android:gravity="center" 9android:layout_width="match_parent" 10android:layout_height="match_parent"> 11 12< ImageView 13android:layout_marginTop="5dp" 14android:layout_marginLeft="5dp" 15android:layout_width="24dp" 16android:layout_height="24dp" 17android:id="@+id/iv_b" 18android:src="https://www.songbingjia.com/android/@drawable/b" 19/> 20< ImageView 21android:layout_marginTop="5dp" 22android:layout_marginLeft="5dp" 23android:layout_width="24dp" 24android:layout_height="24dp" 25android:id="@+id/iv_c" 26android:src="https://www.songbingjia.com/android/@drawable/c" 27/> 28< ImageView 29android:layout_marginTop="5dp" 30android:layout_marginLeft="5dp" 31android:layout_width="24dp" 32android:layout_height="24dp" 33android:id="@+id/iv_d" 34android:src="https://www.songbingjia.com/android/@drawable/d" 35/> 36< ImageView 37android:layout_marginTop="5dp" 38android:layout_marginLeft="5dp" 39android:layout_width="24dp" 40android:layout_height="24dp" 41android:id="@+id/iv_e" 42android:src="https://www.songbingjia.com/android/@drawable/e" 43/> 44< ImageView 45android:layout_marginTop="5dp" 46android:layout_marginLeft="5dp" 47android:layout_width="24dp" 48android:layout_height="24dp" 49android:id="@+id/iv_f" 50android:src="https://www.songbingjia.com/android/@drawable/f" 51/> 52< ImageView 53android:layout_marginTop="5dp" 54android:layout_marginLeft="5dp" 55android:layout_width="24dp" 56android:layout_height="24dp" 57android:id="@+id/iv_g" 58android:src="https://www.songbingjia.com/android/@drawable/g" 59/> 60< ImageView 61android:layout_marginTop="5dp" 62android:layout_marginLeft="5dp" 63android:layout_width="24dp" 64android:layout_height="24dp" 65android:id="@+id/iv_h" 66android:src="https://www.songbingjia.com/android/@drawable/h" 67/> 68< ImageView 69android:layout_width="40dp" 70android:layout_height="40dp" 71android:id="@+id/iv_a" 72android:src="https://www.songbingjia.com/android/@drawable/a" 73/> 74 75< /RelativeLayout> 76 77 < /LinearLayout>

接下来在MainActivity中,定义一个装有动画效果的ImageView的集合;所有ImageView的id的int数组;还有一个角度用来计算呈半圆排列时,每个图片的坐标;还有个boolean型flag用来判断点击是弹出还是回收:
1private List< ImageView> imageViewList = new ArrayList< ImageView> (); 2private 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}; 3private boolean flag = true; 4private static double ANGLE = Math.PI/12;

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

最后则是重点,动画代码,也就是上面onClick方法里调用的startAnim()和stopAnim()所封装的弹出和收回两个方法:
1//收回动画 2private void stopAnim() { 3for(int i = res.length - 1; i > 0; i--) { 4ObjectAnimator animatorX = ObjectAnimator.ofFloat(imageViewList.get(i), "translationX", Math.round(300*(Math.cos((i-1)*ANGLE))), 0F); 5animatorX.setDuration(500); 6ObjectAnimator animatorY = ObjectAnimator.ofFloat(imageViewList.get(i), "translationY", Math.round(300*(Math.sin((i-1)*ANGLE))), 0F); 7animatorY.setDuration(500); 8ObjectAnimator animatorRotation = ObjectAnimator.ofFloat(imageViewList.get(i), "rotation", 5*360F, 0F); 9animator.setDuration(500); 10AnimatorSet set = new AnimatorSet(); 11set.play(animatorX).with(animatorY).with(animatorRotation); 12set.setStartDelay(i*300); 13set.start(); 14flag = true; 15} 16} 17 18//弹出动画 19private void startAnim() { 20for(int i = 1; i < res.length; i++) { 21ObjectAnimator animatorX = ObjectAnimator.ofFloat(imageViewList.get(i), "translationX", 0F, Math.round(300*(Math.cos((i-1)*ANGLE)))); 22animatorX.setDuration(500); 23ObjectAnimator animatorY = ObjectAnimator.ofFloat(imageViewList.get(i), "translationY", 0F, Math.round(300*(Math.sin((i-1)*ANGLE)))); 24animatorY.setDuration(500); 25ObjectAnimator animatorRotation = ObjectAnimator.ofFloat(imageViewList.get(i), "rotation", 0F, 5*360F); 26animator.setDuration(500); 27AnimatorSet set = new AnimatorSet(); 28set.play(animatorX).with(animatorY).with(animatorRotation); 29set.setStartDelay(i*300); 30set.start(); 31flag = false; 32} 33}

三个属性动画分别是X轴,Y轴移动,和旋转;
ObjectAnimator的ofFloat的四个参数分别是需要执行动画的对象,动画的种类的属性名,开始时候的位置,结束时候的位置;
其中AnimatorSet的with是用于将三个动画同时展现,还有after用于控制顺序的;setStartDelay则是延迟展现,保证7张图片不要一下子全部弹出来,这些也可以根据具体需要进行修改组合。
【Android属性动画初步学习笔记】 
最后感谢慕课网的eclipse_xu老师,这篇笔记正是看了徐老师的课程才写下的,收益颇丰,再次感谢!

    推荐阅读