Android动画系列（一）

3.0以前，android支持两种动画模式，补间动画（tween animation）,帧动画（frame animation），在android3.0中又引入了一个新的动画系统：属性动画（property animation）。 这三种动画模式在SDK中被称为view animation，drawable animation，property animation。

Tween animation（补间动画）

一、 分类

• 透明度补间动画(alpha)
• 缩放补间动画(scale)
• 旋转补间动画(rotate)
• 移动补间动画(translate)

二、詳述

在xml形式下的代码结构

xml代码结构.png

（一） scale标签

自有属性

• android:fromXScale
  x轴方向上起始的值相对于自身的缩放比例，取值为浮点型，1.0表示没有变化，大约1.0表示放大，小于1.0表示缩小
• android:toXScale
  x轴方向上结束的值相对于自身大小的缩放比例，取值浮点型
• android:fromYScale
  起始的Y方向上相对自身的缩放比例，浮点值，1.0表示没有变化，大约1.0表示放大，小于1.0表示缩小
• android:toYScale
  结尾的Y方向上相对自身的缩放比例，浮点值；
• android:pivotX
  缩放起点X轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p，当为数值时，表示在当前View的左上角，即原点处加上50px，做为起始缩放点；如果是50%，表示在当前控件的左上角加上自己宽度的50%做为起始点；如果是50%p，那么就是表示在当前的左上角加上父控件宽度的50%做为起始点x轴坐标。即：按照View的父容器百分比计算
• android:pivotY

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.0"
    android:toXScale="1.4"
    android:fromYScale="0.0"
    android:toYScale="1.4"
    android:pivotX="50%p"
    android:pivotY="50%p"
    android:duration="700"

    >

</scale>

MainActivity中的代码

• 这里是xml形式下的代码：

     //第一：补间动画的类Animation ,加载xml布局的工具类AnimationUtils
                Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale);
                animation.setFillAfter(false);
                //调用View里设置animation的方法
                tv.startAnimation(animation);

• 动态代码的写法：

scaleAnim = new ScaleAnimation(0.0f,1.4f,0.0f,1.4f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);  
scaleAnim.setDuration(700);  
tv.startAnimation(scaleAnim); 

动态代码的构造函数.png

这里主要录制pivotX=50%p的情况下的gif图，主要看的是起点位置是在当前view的左上角，沿x轴跟y轴的方向上加上父布局宽度跟高度的50%

GIF.gif

改图是光放文档的截图：具体详情参考如下链接Tween Animation

scale标签.png

alpha——调节透明度

自有属性

alpha.png

• android:fromAlpha 动画开始的透明度，从0.0 --1.0 ，0.0表示全透明，1.0表示完全不透明
• android:toAlpha 动画结束时的透明度，也是从0.0 --1.0 ，0.0表示全透明，1.0表示完全不透明

alpha.gif

alpha

<?xml version="1.0" encoding="utf-8"?>  
<alpha xmlns:android="http://schemas.android.com/apk/res/android"  
    android:fromAlpha="1.0"  
    android:toAlpha="0.1"  
    android:duration="3000"  
    android:fillBefore="true">  
</alpha>

MainActivity中

• xml形式的代码

        Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);
                animation.setFillAfter(false);
//                //调用View里设置animation的方法
                tv.startAnimation(animation);

• 动态代码形式

                AlphaAnimation alphaAnim = new AlphaAnimation(1.0f,0.1f);
                alphaAnim.setDuration(2000);
                tv.startAnimation(alphaAnim);

rotate——旋转

自有属性

rotate.png

• android:fromDegrees
  开始旋转的角度位置，正值代表顺时针方向度
  数，负值代码逆时针方向度数
• android:toDegrees
  结束时旋转到的角度位置，正值代表顺时针方向度数，负值代码逆时针方向度数
• android:pivotX
  缩放起点X轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p，具体意义已在scale标签中讲述，这里就不再重讲
• android:pivotY
  缩放起点Y轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p

rotate

<?xml version="1.0" encoding="utf-8"?>  
<rotate xmlns:android="http://schemas.android.com/apk/res/android"  
    android:fromDegrees="0"  
    android:toDegrees="720"  
    android:pivotX="50%"  
    android:pivotY="50%"  
    android:duration="2000"  
>  
      
</rotate> 

• xml 形式下的代码

   Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
                animation.setFillAfter(true);
//                //调用View里设置animation的方法
                tv.startAnimation(animation);

• 动态代码

RotateAnimation rotateAnim = new RotateAnimation(0, -650, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                rotateAnim.setDuration(2000);
                rotateAnim.setFillAfter(true);
                tv.startAnimation(animation);

translate——位移

自有属性

translate.png

• android:fromXDelta
  起始点X轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p，具体意义已在scale标签中讲述，这里就不再重讲
• android:fromYDelta
  起始点Y轴从标，可以是数值、百分数、百分数p 三种样式；
• android:toXDelta
  结束点X轴坐标
• android:toYDelta
  结束点Y轴坐标

rotate

<?xml version="1.0" encoding="utf-8"?>  
<translate xmlns:android="http://schemas.android.com/apk/res/android"  
    android:fromXDelta="0"   
    android:toXDelta="80"  
    android:fromYDelta="0"  
    android:toYDelta="80"  
    android:duration="2000"  
>  
</translate>  

MainActivity 代码

• xml下的形式代碼

   Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
                animation.setFillAfter(true);
//                //调用View里设置animation的方法
                tv.startAnimation(animation);

• 动态代码

TranslateAnimation translateAnim = new TranslateAnimation(Animation.ABSOLUTE, 0, Animation.ABSOLUTE, 80,   
        Animation.ABSOLUTE, 0, Animation.ABSOLUTE, 80);  
translateAnim.setDuration(2000);  
translateAnim.setFillBefore(true);

set集合

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <!-- 按照需求分时间段 -->


    <!-- 第一段: 位移（右下） 1000ms -->
    <translate
        android:duration="1000"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="120%"
        android:toYDelta="100%" />

    <!-- 第二段:缩放(放大) +旋转(顺时针1周) 1500ms -->
    <!-- 通过startOffSet分割时间段:延时多少时间以后进行动画的播放 -->
    <scale
        android:duration="1500"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="170%"
        android:pivotY="150%"
        android:startOffset="1000"
        android:toXScale="1.5"
        android:toYScale="1.5" />
    <!-- 中心是原来的中心点,在原来的位置上加上位移的位置 -->
    <rotate
        android:duration="1500"
        android:fromDegrees="0"
        android:pivotX="170%"
        android:pivotY="150%"
        android:startOffset="1000"
        android:toDegrees="360" />

    <!-- 第三段:位移(向下) 1000ms -->
    <translate
        android:duration="1000"
        android:fromYDelta="0%"
        android:startOffset="2500"
        android:toYDelta="400%" />
    <!-- 第四段:缩放(缩小)+透明度(降低) 2000ms -->
    <alpha
        android:duration="2000"
        android:fromAlpha="1.0"
        android:startOffset="3500"
        android:toAlpha="0.0" />
    
    <!-- 注意中心点的位置 -->
    <scale
        android:duration="2000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="170%"
        android:pivotY="550%"
        android:startOffset="3500"
        android:toXScale="0.2"
        android:toYScale="0.2" />

</set>

MainActivity中的代码

• xml 形式

   Animation animations2 = AnimationUtils.loadAnimation(this, R.anim.myset);
                animations2.setFillAfter(true);
//                //调用View里设置animation的方法
                tv.startAnimation(animations2);

• 动态代码

             AlphaAnimation alphaAnim1 = new AlphaAnimation(1.0f,0.1f);
                alphaAnim1.setStartOffset(1000);
                ScaleAnimation scaleAnim1 = new ScaleAnimation(0.0f,1.4f,0.0f,1.4f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
                RotateAnimation rotateAnim4 = new RotateAnimation(0, 720, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

                AnimationSet setAnim=new AnimationSet(true);
                setAnim.addAnimation(alphaAnim1);
                setAnim.addAnimation(scaleAnim1);
                setAnim.addAnimation(rotateAnim4);

                setAnim.setDuration(3000);
                setAnim.setFillAfter(true);
                tv.startAnimation(setAnim);;  

从Animation类继承的属性

• android:duration
  动画持续时间，以毫秒为单位
• android:fillAfter
  如果设置为true，控件动画结束时，将保持动画最后时的状态
• android:fillBefore
  如果设置为true,控件动画结束时，还原到开始动画前的状态
  *　android:fillEnabled
  与android:fillBefore 效果相同，都是在动画结束时，将控件还原到初始化状态
• android:repeatCount
  重复次数
• android:repeatMode
  重复类型，有reverse和restart两个值，reverse表示倒序回放，restart表示重新放一遍，必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型，即回放时的动作。
  android:interpolator 设定插值器，其实就是指定的动作效果，比如弹跳效果等，不在这小节中讲解，后面会单独列出一单讲解。

Paste_Image.png Paste_Image.png