Android动画(上)--补间动画、帧动画

Android动画分类

Android的动画可以分为三类：补间动画（Tween Animation）、帧动画（Frame Animation）、属性动画（Property Animation）。

三种动画的区别

补间动画又称View动画， 它通过对View对象不断做图形变化（缩放、平移、透明度、旋转）来产生动画效果，是一种渐进式动画。它产生的效果只是视觉上的变化，View的属性并没有发生改变。

帧动画是通过顺序播放一组图片而产生动画效果，但是图片过多过大的时候容易导致内存溢出，而且很占资源。

属性动画通过改变view对象的属性从而达到动画效果。

补间动画

补间动画有缩放、平移、旋转、透明度四种动画效果，分别对应Animation的ScaleAnimation、TranslateAnimation、RotateAnimation、AlphaAnimation这四个子类。

补间动画的使用方式有两种，一种是在res/anim/目录下通过 xml文件来定义动画 后在代码中调用，另一种通过 代码动态直接定义动画 调用。

1.缩放动画

顾名思义缩放动画就是对View进行逐步缩放来达到缩放的动画。

第一种使用方式：

在xml文件中使用的标签为 定义缩放动画，然后代码调用。

基点.png

定义好xml动画后，紧接着动态代码中使用AnimationUtils将xml文件加载成一个Animation，然后调用view的startAnimation方法即可。

       Button button =(Button) findViewById(R.id.button);

       Animation scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_animation);
       scaleAnimation .setDuration(2000);//动画持续时长  可在这设置  也可在xml文件中定义
       mScaleAnimation.setFillAfter(true); // 动画结束后保持最后的状态 
       BounceInterpolator bounceInterpolator = new BounceInterpolator();  // 在动画结束时有回弹的插值器
       mAnimation.setInterpolator(bounceInterpolator);// 设置插值器 也可在xml文件中定义

       button.startAnimation(scaleAnimation1);// 开始动画  对button进行缩放
       

第二种使用方式：

代码中直接初始化一个ScaleAnimation对象，查看源码知道构造方法一共有四个，需要解释的是pointXType，pointYType的值一共有三个。

  //源码
    public static final int ABSOLUTE = 0;  // pointType传入该值则对应xml文件中的第一种形式标
    public static final int RELATIVE_TO_SELF = 1; // 相对控件本身的坐标 对应xml文件中 以百分号 %结束
    public static final int RELATIVE_TO_PARENT = 2; //  相对父布局的坐标  对应xml文件中以 %p 结束

    public ScaleAnimation(Context context, AttributeSet attrs) {
    }
    public ScaleAnimation(float fromX, float toX, float fromY, float toY) {
        // 该构造方法 pivotX，pivotY都为零   
    }
    public ScaleAnimation(float fromX, float toX, float fromY, float toY,
            float pivotX, float pivotY) {
        // 该构造方法 会给pivotType 赋默认值 ABSOLUTE    绝对坐标 
        mPivotXType = ABSOLUTE;
        mPivotYType = ABSOLUTE;
        省略 .....
    }
    public ScaleAnimation(float fromX, float toX, float fromY, float toY,
            int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) {
      // 传入不同的pivotType值则对应不同的规则
        省略 .....
    }

使用:

        //pviontX，pivotY都为0
       ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f);//pviontX，pivotY为绝对

         //等同于xml定义中第一种方式 pivotX和pivotY都为100
       ScaleAnimation scaleAnimation1 = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f,
              Animation.ABSOLUTE, 100, Animation.ABSOLUTE, 100);

        // 等同于xml定义中的第二种方式，相对控件本身的坐标
       ScaleAnimation scaleAnimation2 = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f,
              Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

        //等同于xml定义中的第三种方式，相对父布局的坐标
       ScaleAnimation scaleAnimation3 = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f,
              Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);


       Button button =(Button) findViewById(R.id.button);
       scaleAnimation1.setDuration(2000);// 动画持续时间为2000ms
       scaleAnimation1.setFillAfter(true);// 保持动画最后的展示效果
       BounceInterpolator bounceInterpolator = new BounceInterpolator();  // 在动画结束时有回弹的插值器
       mAnimation.setInterpolator(bounceInterpolator);// 设置插值器 也可在xml文件中定义
       mScaleAnimation.setStartOffset(1000); // 动画延时一秒后执行


       button.startAnimation(scaleAnimation1);//开始动画 

2.平移动画

xml文件中使用标签定义

使用代码定义：

//        ======平移动画=====
       mTranslateAnimation = AnimationUtils.loadAnimation(this, R.anim.translate_animate);
       mTranslateAnimation.setDuration(2000);
       mTranslateAnimation.setFillAfter(true);

//动态代码创建
       mTranslateNewAnimation = new TranslateAnimation(Animation.ABSOLUTE, 0.0f, Animation.ABSOLUTE, 0.0f,
                Animation.RELATIVE_TO_SELF, -2.0f, Animation.ABSOLUTE, 0.0f);
       mTranslateNewAnimation.setDuration(4000);

透明度动画

xml文件中使用标签定义

//        =======渐变动画=====
       mAlphaAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha_animation);//加载动画
       mAlphaAnimation.setDuration(1000);
       mAlphaAnimation.setFillAfter(true);
  
        //动态代码创建
       mAlphaNewAnimation1 = new AlphaAnimation(1.0f, 0.0f);
       mAlphaNewAnimation1.setDuration(2000);
       mAlphaNewAnimation1.setFillAfter(false);

       button.startAnimaiton(mAlphaAnimation );

旋转动画

xml文件中使用标签定义

// ===============  旋转动画 ===============
       //加载xml动画
       mRotateAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate);
       mRotateAnimation.setDuration(2000);
       mRotateAnimation.setFillAfter(true);
       mRotateAnimation.setStartOffset(1000);//执行前的等待时间
       button.startAnimation(mRotateAnimation );// 开始动画，对button进行旋转


      //动态创建
       mRotateNewAnimation = new RotateAnimation(0.0f, 180f, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
       mRotateNewAnimation.setDuration(2000);
       button.startAnimation(mRotateNewAnimation );// 开始动画，对button进行旋转

Frame帧动画

Frame帧动画就是播放一组图片来达到动画的效果。在res/drawable目录下创建drawable resource xml资源文件，使用 标签。

因为帧动画是播放一张一张的图片，所以需要ImageView作为载体，在布局文件中引用。

代码中通过ImageView的getDrawable方法得到AniAnimationDrawable。

       mImageView.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
              // 得到 AnimationDrawable 
               AnimationDrawable animationDrawable = (AnimationDrawable) mImageView.getDrawable();
               animationDrawable.setOneShot(false); // 循环播放  为true则只播放一次

               if (animationDrawable.isRunning()){
                   animationDrawable.stop(); // 停止动画 
               }else {
                   animationDrawable.start(); // 开始动画
               }
           }
       });

---