ViewAnimation帧动画示例

1，概念：

补间动画，给出两个关键帧，通过一些算法将给定属性值在给定的时间内在两个关键帧间渐变。主要有为旋转、平移、放缩和渐变等动画

ViewAnimation又叫Tween动画在Android中分为4类，它们分别是：AlphaAnimation(透明度动画)、TranslateAnimation(平移动画)、ScaleAnimation(缩放动画)、RotateAnimation(旋转动画)。都继承自android.view.Animation类，它们都是表示从一个状态A向状态B变化的一个过程，所以英文名字叫Tween动画、中文名叫：“补间动画”、“中间动画”。

2，实现方式：

它们总的说来有两种实现方式：java code(java源代码)、xml(xml配置文件)

3，四个类的构造函数：

AlphaAnimation(透明度动画)

AlphaAnimation有两个构造函数，分别是：
—— AlphaAnimation(Context context, AttributeSet attrs)：第二个参数是个属性集
——AlphaAnimation(float fromAlpha, float toAlpha)：第一个参数是初始透明度，第二个参数是终止透明度

TranslateAnimation(平移动画)

TranslateAnimation有三个构造函数，分别是：

——TranslateAnimation(Context context, AttributeSet attrs)

——TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)：

分别对应x轴的起始、终点坐标，与y轴的起始、终点坐标

——TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)：

第一个参数是x轴方向的值的参照(Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT)；
第三个参数与第四个参数是x轴方向的
终点参照与对应值；后面四个参数就不用解释了。如果全部选择Animation.ABSOLUTE，其实就是第二个构造函数。
以x轴为例介绍参照与对应值的关系
如果选择参照为Animation.ABSOLUTE，那么对应的值应该是具体的坐标值，比如100到300，指绝对的屏幕像素单位
如果选择参照为Animation.RELATIVE_TO_SELF或者 Animation.RELATIVE_TO_PARENT指的是相对于自身或父控件，
对应值应该理解为相对于自身或者父控件的几倍或百分之多少。一定要多试试这几个参数类型！

ScaleAnimation(缩放动画)

ScaleAnimation(缩放动画)有四个构造函数，分别是：

——ScaleAnimation(Context context, AttributeSet attrs)

——ScaleAnimation(float fromX, float toX, float fromY, float toY)：同TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)

——ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)：

这里解释后面两个参数，pivot英文意思为“枢轴”，也就是支点。通过这两个参数可以控制缩放动画的放大方向，这个点不会随对象大小变化而变化

——ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)：

如果理解了前面所讲的，这个就不做多的说明，如果不清楚，请回头多用代码试试。

RotateAnimation(旋转动画)

RotateAnimation(旋转动画)同样有四个构造函数，分别是：

——RotateAnimation(Context context, AttributeSet attrs)

——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)

4，代码示例

MainActivity中的代码：

/**
 * 帧动画
 * 透明度alphaAnimation
 * 缩放动画scaleAnimation
 * 平移动画translateAnimation
 * 旋转动画rotateAnimation
 */
public class MainActivity extends AppCompatActivity {
    private ImageView img;
    private ScaleAnimation scaleAnimation;
    private RotateAnimation rotateAnimation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img = (ImageView) findViewById(R.id.img_book);

    }

    public void onClick(View view) {
        switch (view.getId()) {
            //透明度
            case R.id.bt_tmd:
                //alphaAnimation();
                /**
                 * 此处是实现按动画的另一种方式，通过布局文件，步骤如下：
                 * 1，在res目录下新建一个目录，命名为anim（必须是anim，规定），
                 * 2，然后在该目录下新建一个Animation文件，其根目录为set
                 * 3，然后再设置透明度标签【参考本博客插图】
                 * （注意透明度数值结尾不要带float的单位f）
                 * <alpha android:duration="2000"
                 *        android:fromAlpha="0.0"
                 *        android:toAlpha="0.6"/>
                 * （此处是透明度，若实现其他动画，直接修改标签，设置对应属性值，
                 * 模仿这个样式写，原理一毛一样）
                 * 4，获取Animation对象，通过动画工具类的下载方法获取，
                 * 获取对象方法的第一个参数是上下文，第二个参数布局文件id
                 * 5，启动动画。
                 */
                Animation animation = AnimationUtils.loadAnimation(this, R.anim.alphaanim);
                img.startAnimation(animation);
                break;
            case R.id.bt_xz:
                rotateAnim();
                break;
            case R.id.bt_jh:
                animationSet();
                break;
            case R.id.bt_py:
                translateAnim();
                break;
            case R.id.bt_sf:
                scaleAnim();
                break;
            default:
                break;
        }
    }

    /**
     * 透明度：
     * 1，首先创建对象 透明度AlphaAnimation
     * 2，设置对象属性(插值器
     * 3，开启动画
     */
    private void alphaAnimation() {
        //透明度 改变动画效果
        AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
        //设置动画播放时间
        alphaAnimation.setDuration(1000);
        //设置重播方式,重新开始，或者反转
        alphaAnimation.setRepeatMode(Animation.RESTART);
        //设置动画结束后是否保持当前的位置，true表示不返回动画开始的位置
        alphaAnimation.setFillAfter(true);
        //设置重播次数
        alphaAnimation.setRepeatCount(3);
        //开启动画
        img.startAnimation(alphaAnimation);
    }

    //旋转，步骤同透明度
    private void rotateAnim() {
        //默认控件以左上方为中心旋转
        //RotateAnimation rotateAnimation = new RotateAnimation(0f, 360f);
        //下面是构造函数的重载
        rotateAnimation = new RotateAnimation(0f,//旋转角度
                360, //目标旋转角度
                Animation.RELATIVE_TO_PARENT,//旋转中心X点参照类型，
                // 此处是相对于父控件,（也可以以自己或者像素为参照物），
                // 推荐以父控件或者自身为参照物，不建议以像素为参照物
                0.5f, //（0-1）X中心参照的百分比
                Animation.RELATIVE_TO_PARENT,//旋转中心点Y参照类型
                0.5f//（0-1）Y中心参照的百分比
        );
        rotateAnimation.setDuration(2000);
        rotateAnimation.setRepeatCount(3);
        rotateAnimation.setFillAfter(true);
        img.startAnimation(rotateAnimation);
    }

    /**
     * 1.首先创建一个ScaleAnimation对象（设置透明度改变的值）
     * 2.设置动画对像的属性值（播放时间，播放状态，，，）
     * 3.开启动画（需要设置动画的控件调用startAnimation(你设置的动画)）
     * 第一个参数fromX为动画起始时 X坐标上的伸缩尺寸  0.0表示收缩到没有
     * 　　 第二个参数toX为动画结束时 X坐标上的伸缩尺寸   1.0表示正常无伸缩
     * 　　 第三个参数fromY为动画起始时Y坐标上的伸缩尺寸  值小于1.0表示收缩
     * 　　 第四个参数toY为动画结束时Y坐标上的伸缩尺寸   值大于1.0表示放大
     */
    private void scaleAnim() {
        //ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f);
        scaleAnimation = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
        scaleAnimation.setFillAfter(true);
        scaleAnimation.setRepeatCount(2);
        scaleAnimation.setDuration(2000);
        img.startAnimation(scaleAnimation);
    }

    //平移动画
    private void translateAnim() {
        TranslateAnimation translateAnimation =
                new TranslateAnimation(0.0f, 2.0f, 0.5f, 1.5f);
        translateAnimation.setDuration(2000);
        translateAnimation.setRepeatCount(2);
        translateAnimation.setFillAfter(true);
        img.startAnimation(translateAnimation);
    }

    //动画集合
    private void animationSet() {
        //设置一个动画集合
        AnimationSet animationSet = new AnimationSet(true);
        animationSet.addAnimation(scaleAnimation);
        animationSet.addAnimation(rotateAnimation);
        //两种动画效果间的时间间隔，
        // 此处意思就是，先实现scaleAnimation动画，然后间隔1s，再实现rotateAnimation动画
        animationSet.setStartOffset(1000);
        img.startAnimation(animationSet);
        /**另外调用该方法时候，
        提前点击一下scaleAnimation和rotateAnimation，
        进行初始化，否则会抛出空指针异常，
        当然此处代码可以优化，本案例重点是讲解原理。*/
    }
}

布局文件中的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.myapplication.alpha.MainActivity"
    >

    <Button
        android:id="@+id/bt_tmd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="透明度"
        />

    <Button
        android:id="@+id/bt_xz"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="旋转"
        />

    <Button
        android:id="@+id/bt_sf"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="缩放动画"
        />

    <Button
        android:id="@+id/bt_py"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="平移动画"
        />

    <Button
        android:id="@+id/bt_jh"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="动画集合"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        android:orientation="vertical"
        >

        <ImageView
            android:id="@+id/img_book"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/emoji_3"
            />
    </LinearLayout>
</LinearLayout>

通过设置xml文件实现动画的图示