自定义View(二)-动画- 代码生成View动画

前言

上篇我们介绍了视图动画，说的确切点应该是视图动画中的补间动画(Tween Animation)，关于逐帧动画(Frame Animation)用法更简单，这里先不做介绍后期再自定义View的使用会用到，到时候讲解。这篇我们来一起学习将上篇用XML实现的动画用试着用代码来生成，毕竟有些时候我们是用代码来控制动画的。

---

代码生成动画

Animation公共类

这里给大家发一个网站里面XML，类属性都能查到，这个是Animation官方文档
里面的方法比较多，但是重要的就如下几个：
- android:duration 对应代码： setDuration(long) 动画持续时间，以毫秒为单位
- android:fillAfter 对应代码： setFillAfter(boolean) 如果设置为true，控件动画结束时，将保持动画最后时的状态
- android:fillBefore 对应代码： setFillBefore(boolean) 如果设置为true,控件动画结束时，还原到开始动画前的状态
- android:fillEnabled 对应代码： setFillEnabled(boolean) 与android:fillBefore 效果相同，都是在动画结束时，将控件还原到初始化状态
- android:repeatCount 对应代码： setRepeatCount(int) 重复次数
- android:repeatMode 对应代码： setRepeatMode(int) 重复类型，有reverse和restart两个值，取值为RESTART或 REVERSE，必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型，即回放时的动作。
- android:interpolator 对应代码： setInterpolator(Interpolator) 设定插值器，其实就是指定的动作效果，比如弹跳效果等
可以看到，在XML设置的属性基本都可以用代码来控制。从官方文档中我们可以看到。它有5个子类。正好对应之前我们在XML中学到的5中动画的属性，如下：

XML	实体类
scale	ScaleAnimation
alpha	AlphaAnimation
rotate	RotateAnimation
translate	TranslateAnimation
set	AnimationSet

AlphaAnimation
构造函数：
- AlphaAnimation(Context context, AttributeSet attrs) 同样，从本地XML加载动画，基本不用：
- AlphaAnimation(float fromAlpha, float toAlpha)

这里第二个构造函数的参数为：
- android:fromAlpha 动画开始的透明度，从0.0 –1.0 ，0.0表示全透明，1.0表示完全不透明
- android:toAlpha 动画结束时的透明度，也是从0.0 –1.0 ，0.0表示全透明，1.0表示完全不透明
那么我们就可以将前一篇中的XML用代码来实现下：

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
       android:repeatCount="2"
       android:repeatMode="reverse"
       android:duration="3000"
       android:fillAfter="true"
       android:fromAlpha="1.0"
       android:toAlpha="0.5">
alpha>

代码:

AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.5f);
alphaAnimation.setDuration(3000);
alphaAnimation.setRepeatCount(2);
alphaAnimation.setRepeatMode(Animation.REVERSE);
alphaAnimation.setFillAfter(true);
mTextView.setAnimation(alphaAnimation);

效果与之前是一样的。由于继承父类Animation所有有父类的共有属性。下面其他几种大同小异。

ScaleAnimation
构造函数：
- ScaleAnimation(Context context, AttributeSet attrs) 从XML文件加载动画，基本用不到
- ScaleAnimation(float fromX, float toX, float fromY, float toY)
- ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)
- ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

参数对应XML含义如下：
- android:fromXScale 起始的X方向上相对自身的缩放比例，浮点值，比如1.0代表自身无变化，0.5代表起始时缩小一倍，2.0代表放大一倍；
- android:toXScale 结尾的X方向上相对自身的缩放比例，浮点值；
- android:fromYScale 起始的Y方向上相对自身的缩放比例，浮点值，
- android:toYScale 结尾的Y方向上相对自身的缩放比例，浮点值；
- android:pivotX 缩放起点X轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p
- android:pivotY 缩放起点Y轴坐标，取值及意义跟android:pivotX一样。
这里与XML是一一对应的只是名字有一点点不同而已。需要注意的是这里的pivotYType的取值有三个，Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF和Animation.RELATIVE_TO_PARENT分别对应数，百分数，百分数p；下面我们来使用下：

XML:

<scale xmlns:android="http://schemas.android.com/apk/res/android"
       android:duration="3000"
       android:fillBefore="true"
       android:fromXScale="0.0"
       android:fromYScale="0.0"
       android:pivotX="50%p"
       android:pivotY="50%p"
       android:repeatCount="1"
       android:repeatMode="restart"
       android:toXScale="1.5"
       android:toYScale="1.5">
scale>

代码：

ScaleAnimation scaleAnimation = new ScaleAnimation(0f, 1.5f, 0, 1.5f,Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
scaleAnimation.setDuration(3000);
scaleAnimation.setFillBefore(true);
scaleAnimation.setRepeatCount(1);
scaleAnimation.setRepeatMode(Animation.RESTART);
mTextView.setAnimation(scaleAnimation);

RotateAnimation
构造函数：
- RotateAnimation(Context context, AttributeSet attrs) 从XML文件加载动画，基本用不到　　
- RotateAnimation(float fromDegrees, float toDegrees)　
- RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)　
- RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)　

参数对应XML含义如下：
- android:fromDegrees 开始旋转的角度位置，正值代表顺时针方向度数，负值代码逆时针方向度数
- android:toDegrees 结束时旋转到的角度位置，正值代表顺时针方向度数，负值代码逆时针方向度数
- android:pivotX 缩放起点X轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p
- android:pivotY 缩放起点Y轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p

XML使用：

  
<rotate xmlns:android="http://schemas.android.com/apk/res/android"  
    android:fromDegrees="0"  
    android:toDegrees="-650"  
    android:pivotX="50%"  
    android:pivotY="50%"  
    android:duration="3000"  
    android:fillAfter="true">  

rotate> 

代码：

RotateAnimation rotateAnim = new RotateAnimation(0, -650, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnim.setDuration(3000);
rotateAnim.setFillAfter(true);
mTextView.setAnimation(rotateAnim);

TranslateAnimation
构造函数：
- RotateAnimation(Context context, AttributeSet attrs) 从XML文件加载动画，基本用不到
- TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
- TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)

参数对应XML含义如下：
- android:fromXDelta 起始点X轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p
- android:fromYDelta 起始点Y轴从标，可以是数值、百分数、百分数p 三种样式；
- android:toXDelta 结束点X轴坐标
- android:toYDelta 结束点Y轴坐标

这里没有什么难点就不再细述了。
XML使用：

      
    <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"  
        android:fillBefore="true">  
    translate>    

代码：

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

AnimationSet
AnimationSet类对应set标签，定义动作类的集合。
构造函数：

• AnimationSet(boolean shareInterpolator) shareInterpolator取值true或false，取true时，指在AnimationSet中定义一个插值器（interpolater），它下面的所有动画共同。如果设为false，则表示它下面的动画自己定义各自的插值器。

增加动画的函数为：(更多函数，请参看SDK文档)
- public void addAnimation (Animation a)

这里我们就将前面动画的属性加在一起：

 setAnim = new AnimationSet(true);
setAnim.addAnimation(alphaAnimation);
setAnim.addAnimation(scaleAnimation);
setAnim.addAnimation(rotateAnim);

setAnim.setDuration(3000);
setAnim.setFillAfter(true);
mTextView.setAnimation(setAnim);

使用插值器：

ScaleAnimation interpolateScaleAnim=new ScaleAnimation(0.0f,1.4f,0.0f,1.4f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);  
interpolateScaleAnim.setInterpolator(new BounceInterpolator());  
interpolateScaleAnim.setDuration(3000);  

这里的插值器的种类与上篇一致，使用方法都是一样的都是通过创建对象就可以了

其他插值器大家自己试验下。 效果图就不发了。

---

实战

View动画讲到这基本上也就差不多了，那么我们用个小例子在实际中运用一下。
下面这个例子就是百篮应用中Activi ty进入与退出动画。我们就可以用我们学到的View动画来去实现。首先看下效果：

我们先来分析下这个动画：
进入时->当前Activity向左退出 由完全可见变成完全不可见 即将进入的Activity反之 那么此时就是两个动画->从右进入，从左退出
退出时->当前Activity向右退出 由完全可见变成完全不可见 即将进入的Activity反之 那么此时就是两个动画->从右退出，从左进入
那么就清楚了这里应该有四个动画，每个动画为组合动画：平移与渐变
那么我们来看下XML代码：
从左进入：

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-100%p" android:toXDelta="0%"
               android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
           android:duration="@android:integer/config_mediumAnimTime" />
set>

从右进入：

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%p" android:toXDelta="0%"
               android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
           android:duration="@android:integer/config_mediumAnimTime" />
set>

从左退出：

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0%" android:toXDelta="-100%"
               android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="0"
           android:duration="@android:integer/config_mediumAnimTime" />
set>

从右退出：

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0%p" android:toXDelta="100%"
               android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="0"
           android:duration="@android:integer/config_mediumAnimTime" />
set>

这里大家再看下就很清楚了。大家可能对于平移的参数有些模糊，这里我用一张图：

从上图可以看出，以手机屏幕下面边未X轴，屏幕左边为Y轴，当Activity在X轴值为-100%p时，刚好在屏幕的左边（位置1），当X轴值为0%p时，刚好再屏幕内(位置2），当X=100%p时刚好在屏幕右边（位置3）。
在清楚了这点后我们看下代码：

 /**
     * 设置进入 动画
     */
    @Override
    public void startActivity(Intent intent) {
        super.startActivity(intent);
        overridePendingTransition(R.anim.anim_slide_in_right,R.anim.anim_slide_out_left);

    }  

     /**
     * 设置退出 动画
     */
    @Override
    public void finish() {
        super.finish();
        overridePendingTransition(R.anim.anim_slide_in_left,R.anim.anim_slide_out_right);
    }

我们使用了这个方法：
public void overridePendingTransition(int enterAnim, int exitAnim)

enterAnim 定义Activity进入屏幕时的动画
exitAnim 定义Activity退出屏幕时的动画
overridePendingTransition 方法必须在startActivity()或者 finish()方法的后面
最后效果：

是不是很简单很酷炫。嘿嘿！！！如果想全局使用就要封装在基类Activity中。

---

结语

下一篇我们一起来学习一下属性动画。 我们下篇见

感谢

站在巨人的肩膀上可以让我们看的更远。
Android自定义控件三部曲文章