一起学Android之Animation

Posted 2021-12-02 hsiang

本文以一个简单的小例子，简述在android开发中，动画的简单应用，仅供学习分享使用。

概述

android提供了各种强大的apis，用于将动画应用到ui元素中，来丰富应用程序的功能和应用。

动画分类

在Android框架中，动画主要分为三类【这三种动画系统都是可行的选择，但一般来说，属性动画系统是首选的使用方法，因为它更灵活，提供了更多的功能】，具体如下：

• 帧动画：将图像资源按顺序一帧一帧的播放出来，形成动画（）。
• 补间动画：又叫视图动画，是比较旧的系统，只能用于视图组件，相对比较容易设置和提供能力满足程序的需要。
• 属性动画：在android 3.0（api等级11）中引入的属性动画系统，允许您对任何对象的属性进行动画处理，包括未呈现到屏幕上的属性。该系统是可扩展的，并允许自定义动画类型的属性。

帧动画

将动画资源文件作为图片控件（ImageView）的背景图（background）。

帧动画涉及知识点如下：

• AnimationDrawable: 用于创建逐帧动画的对象，由一系列可拖动对象，可用作视图对象的背景。
• isRunning() 是否正在运行
• stop() 停止动画
• start() 开始运行

帧动画核心代码

 在drawable目录下，新增一个动画资源配置文件【animation-list节点下包含item子节点，item有两个属性，android:drawable=图像资源id，android:duration=周期】，如下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <animation-list xmlns:android="http://schemas.android.com/apk/res/android">
 3     <item android:drawable="@drawable/n0" android:duration="300"></item>
 4     <item android:drawable="@drawable/n1" android:duration="300"></item>
 5     <item android:drawable="@drawable/n2" android:duration="300"></item>
 6     <item android:drawable="@drawable/n3" android:duration="300"></item>
 7     <item android:drawable="@drawable/n4" android:duration="300"></item>
 8     <item android:drawable="@drawable/n5" android:duration="300"></item>
 9     <item android:drawable="@drawable/n6" android:duration="300"></item>
10     <item android:drawable="@drawable/n7" android:duration="300"></item>
11     <item android:drawable="@drawable/n8" android:duration="300"></item>
12     <item android:drawable="@drawable/n9" android:duration="300"></item>
13 </animation-list>

java设置代码如下：

 1 private AnimationDrawable drawable;
 2 
 3     @Override
 4     protected void onCreate(Bundle savedInstanceState) {
 5         super.onCreate(savedInstanceState);
 6         setContentView(R.layout.activity_drawable);
 7         ImageView imageView= (ImageView) this.findViewById(R.id.ivLetter);
 8         drawable= (AnimationDrawable) imageView.getBackground();
 9         drawable.start();
10     }
11 
12     @Override
13     public boolean onTouchEvent(MotionEvent event) {
14         if(event.getAction()==MotionEvent.ACTION_DOWN){
15             if(drawable.isRunning()) {
16                 drawable.stop();
17             }else{
18                 drawable.start();
19             }
20         }
21         return super.onTouchEvent(event);
22     }

补间动画

补间动画，又称渐变动画是指定义起始状态，结束状态，中间状态等，然后其他部分由程序自动生成，从而形成动画。

补间动画涉及知识点如下：

• TranslateAnimation 平移动画 控制对象位置的动画。
• RotateAnimation 旋转动画 控制对象旋转的动画。这个旋转需要放置在xy平面上。您可以指定中心要使用的点，其中(0,0)是左上角。如果未指定，则(0,0)为默认旋转点。
• ScaleAnimation 缩放动画 控制对象的比例尺的动画。您可以指定点用于缩放中心。
• AlphaAnimation 透明度动画 控制对象的alpha级的动画，通过更改透明度属性，对于对象的淡入淡出，这是一个很有用的方法。
• AnimationSet 动画集合 上述动画可以组合使用。
• setFillAfter(true); 设置动画结束后的填充
• setDuration(2000); 动画周期
setRepeatCount(2); 重复次数
• setRepeatMode(Animation.REVERSE); 重复模式

补间动画核心代码如下：

 1   /**
 2      * 平移
 3      * @param v
 4      */
 5     protected  void transfer_click(View v){
 6 
 7         //参数是平移的起始坐标和结束坐标(起始X轴位置，结束X轴位置，起始Y轴位置，结束Y轴位置)的改变量。
 8         //TranslateAnimation trans=new TranslateAnimation(0.0f,300f,0.0f,300f);
 9         //fromXType 动画平移改变量的类型
10         //Animation.RELATIVE_TO_SELF,0 表示控件现在的坐标+0*控件本身的宽度或高度
11         //Animation.RELATIVE_TO_SELF,0.5f 表示控件现在的坐标+0.5*控件本身的宽度或高度
12         //Animation.RELATIVE_TO_PARENT 相对于父控件，计算方式和Animation.RELATIVE_TO_SELF一样
13         //fromXValue 起始坐标值的改变量，如果类型是ABSOLUTE，则此值为绝对数字，否则则表示百分比（0-1）之间。
14         TranslateAnimation trans=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,1,Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,1);
15         trans.setDuration(2000);//设置周期
16         trans.setFillAfter(true);//当结束时保持结束位置
17         trans.setRepeatCount(2);//设置重复次数
18         trans.setRepeatMode(Animation.REVERSE);//重复模式
19         ivTaichi.startAnimation(trans);//启动
20     }
21 
22     /**
23      * 旋转
24      * @param v
25      */
26     protected void rotate_click(View v){
27         //参数是旋转的起始偏移量（度数），结束度数，旋转中心点（相对x轴 位置和y轴位置）。
28         //RotateAnimation rotate=new RotateAnimation(0.0f,90.f,100.0f,100.0f);
29         RotateAnimation rotate =new RotateAnimation(0.0f,360.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
30         rotate.setFillAfter(true);
31         rotate.setDuration(2000);
32         rotate.setRepeatCount(2);
33         rotate.setRepeatMode(Animation.REVERSE);
34         ivTaichi.startAnimation(rotate);//启动
35     }
36 
37     /**
38      * 缩放
39      * @param v
40      */
41     protected void scale_click(View v){
42         //fromX toX 动画起始和结束时的X轴水平缩放因子
43         //fromY toY 动画起始和结束时的Y轴水平缩放因子
44         ScaleAnimation scale=new ScaleAnimation(0.5f,1.5f,0.5f,1.5f);
45         scale.setFillAfter(true);
46         scale.setDuration(2000);
47         scale.setRepeatCount(2);
48         scale.setRepeatMode(Animation.REVERSE);
49         ivTaichi.startAnimation(scale);//启动
50     }
51 
52     /**
53      * 透明度动画
54      * @param v
55      */
56     protected void alpha_click(View v){
57         //fromAlpha toAlpha 动画起始和结束时的透明度。范围（0,1）
58         AlphaAnimation alpha=new AlphaAnimation(0,1);
59         alpha.setFillAfter(true);
60         alpha.setDuration(2000);
61         alpha.setRepeatCount(2);
62         alpha.setRepeatMode(Animation.REVERSE);
63         ivTaichi.startAnimation(alpha);//启动
64     }
65 
66     /**
67      * 集合动画
68      * @param v
69      */
70     protected  void set_click(View v){
71         AnimationSet set=new AnimationSet(true);
72         //TranslateAnimation animation1=new TranslateAnimation(0.0f,300.0f,0.0f,300.0f);
73         RotateAnimation animation2 =new RotateAnimation(0.0f,360.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
74         ScaleAnimation animation3=new ScaleAnimation(0.0f,1.0f,0.0f,1.0f);
75         AlphaAnimation animation4=new AlphaAnimation(0,1);
76         //set.addAnimation(animation1);
77         set.addAnimation(animation2);
78         set.addAnimation(animation3);
79         set.addAnimation(animation4);
80         set.setFillAfter(true);
81         set.setDuration(2000);
82         set.setRepeatCount(2);
83         set.setRepeatMode(Animation.REVERSE);
84         ivTaichi.startAnimation(set);//启动
85     }

属性动画

属性动画主要通过改变对象的属性，来实现动画，可以进行扩展，且功能丰富。

属性动画涉及知识点如下：

• ObjectAnimator 该ValueAnimator的子类提供了对目标对象上的动画属性的支持。该类的构造函数使用参数来定义将被动画化的目标对象以及将被动画化的属性的名称。
• setDuration(2000); 动画周期
• setRepeatCount(2); 重复次数
• setRepeatMode(Animation.REVERSE); 重复方式
• start(); 启动

属性动画核心代码如下：

 1 /**
 2      * 平移
 3      * @param v
 4      */
 5     protected  void transfer_click(View v){
 6         //target 属性动画的目标控件
 7         //propertyName 产生动画的属性，所有的属性必须拥有set,get方法
 8         //values 属性动画的范围集合
 9         ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(ivTaichi,"translationX",0,200,-200,0);
10         objectAnimator.setDuration(2000);
11         objectAnimator.setRepeatCount(2);
12         objectAnimator.setRepeatMode(Animation.REVERSE);
13         objectAnimator.start();
14     }
15 
16     /**
17      * 旋转
18      * @param v
19      */
20     protected void rotate_click(View v){
21         ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(ivTaichi,"rotationX",0,180);
22         objectAnimator.setDuration(2000);
23         objectAnimator.setRepeatCount(2);
24         objectAnimator.setRepeatMode(Animation.REVERSE);
25         objectAnimator.start();
26     }
27 
28     /**
29      * 缩放
30      * @param v
31      */
32     protected void scale_click(View v){
33         ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(ivTaichi,"scaleX",0,1,0);
34         objectAnimator.setDuration(2000);
35         objectAnimator.setRepeatCount(2);
36         objectAnimator.setRepeatMode(Animation.REVERSE);
37         objectAnimator.start();
38     }
39 
40     /**
41      * 透明度
42      * @param v
43      */
44     protected void alpha_click(View v){
45         ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(ivTaichi,"alpha",0,1);
46         objectAnimator.setDuration(2000);
47         objectAnimator.setRepeatCount(2);
48         objectAnimator.setRepeatMode(Animation.REVERSE);
49         objectAnimator.start();
50     }
51 
52     /**
53      * 集合动画
54      * @param v
55      */
56     protected  void set_click(View v){
57         AnimatorSet set=new AnimatorSet();
58         List<Animator> list=new ArrayList<Animator>() ;
59         ObjectAnimator objectAnimator1 =ObjectAnimator.ofFloat(ivTaichi,"translationX",0,200);
60         ObjectAnimator objectAnimator2 =ObjectAnimator.ofFloat(ivTaichi,"rotationX",0,180);
61         ObjectAnimator objectAnimator3 =ObjectAnimator.ofFloat(ivTaichi,"scaleX",0,1);
62         ObjectAnimator objectAnimator4 =ObjectAnimator.ofFloat(ivTaichi,"alpha",0,1);
63         list.add(objectAnimator1);
64         list.add(objectAnimator2);
65         list.add(objectAnimator3);
66         list.add(objectAnimator4);
67         //播放一序列的动画对象
68         set.playSequentially(list);
69         //
70         set.start();
71      }

 

 

备注

学而不思则罔，思而不学则殆！！！