补间动画 Interpolator 简介 示例

时间:2021-01-28 19:31:34

简介
补间动画的原理:
每次绘制视图时View所在的【ViewGroup】中的drawChild函数获取该View的Animation的值,然后调用canvas.concat (transformToApply.getMatrix()),通过【矩阵运算】完成动画帧,如果动画没有完成,继续调用【invalidate()】函数,启动下次绘制来驱动动画。动画过程中的帧之间间隙时间是绘制函数所消耗的时间,可能会导致动画消耗比较多的CPU资源,最重要的是,动画改变的只是显示,并不能响应事件。
主要特点:
  • 补间动画只能应用于View对象,而且只支持一部分属性,如支持缩放、旋转而不支持背景颜色的改变。
  • 补间动画只是改变了View对象绘制的位置,而没有改变View对象本身,比如对于一个按钮,在动画过程中,触发按钮点击的区域仍是动画前的区域。
  • 补间动画就是一系列View形状的变换,如大小的缩放,透明度的改变,位置的改变,动画的定义既可以用代码定义也可以用XML定义,建议用XML定义。
  • 默认情况下,所有动画是同时进行的,可以通过startOffset属性设置各个动画的开始偏移(开始时间)来达到动画顺序播放的效果。
  • 可以通过设置interpolator属性改变动画渐变的方式,默认为AccelerateDecelerateInterpolator。
四种动画类型:
  • alpha        AlphaAnimation
  • scale        ScaleAnimation
  • translate  TranslateAnimation
  • rotate       RotateAnimation
  • set            AnimationSet
三种参照物模式:
  • Animation.ABSOLUTE    绝对位置
  • Animation.RELATIVE_TO_SELF    相对于自身的位置
  • Animation.RELATIVE_TO_PARENT    相对于父控件的位置
可监听的动画状态:
  • onAnimationEnd(Animation animation) - 当动画结束时调用
  • onAnimationRepeat(Animation animation) - 当动画重复时调用
  • onAniamtionStart(Animation animation) - 当动画启动时调用
使用xml中定义的动画:
         Animation aa = AnimationUtils.loadAnimation(this, R.anim.alpha);
         iv.startAnimation(aa);

演示代码
public class MainActivity extends Activity {
    private ImageView iv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv = (ImageView) findViewById(R.id.iv);
    }
    //透明度动画
    public void alpha(View view) {
        AlphaAnimation aa = new AlphaAnimation(0.2f, 1.0f);//开始、结束时的透明度。1位全不透明,0为全透明
        aa.setDuration(2000);//播放时间
        aa.setRepeatCount(1);//重复次数,播放次数=重复次数+1;Animation.INFINITE 或 -1 表示不停止的播放
        aa.setRepeatMode(Animation.REVERSE);//重复模式:【REVERSE】倒序重复播放(往返形式),【RESTART】重新开始执行(默认)
        aa.setFillAfter(true);//默认为false,设为true则表示播放完毕后会保持播放完毕那一刻的图像;同样,seFillBefore表示是否……播放开始时的图像。
        aa.setInterpolator(new AccelerateInterpolator());//设定变化速度,AccelerateInterpolator表示先慢后快
        iv.startAnimation(aa);
    }
    //位移动画
    public void trans(View view) {
        TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -0.5f, Animation.RELATIVE_TO_PARENT, 0.5f,
                Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0);
        //【int fromXType, float fromXValue, int toXType, float toXValue,】 【后面是4个Y】
        //【开始时x相对谁的距离,结束时x相对谁的距离】其中:RELATIVE_TO_PARENT代表相对于父控件
        ta.setDuration(2000);
        ta.setRepeatCount(1);
        ta.setRepeatMode(Animation.RESTART);//RESTART重新开始执行(默认)
        ta.setInterpolator(new BounceInterpolator());//动画结束的时候弹起
        iv.startAnimation(ta);
    }
    //缩放动画
    public void scale(View view) {
        ScaleAnimation sa = new ScaleAnimation(0.1f, 2.0f, 0.1f, 2.0f, Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);
        //【float fromX, float toX, float fromY, float toY,】【 int pivotXType, float pivotXValue, int pivotYType, float pivotYValue】
        //【开始和结束时x,y的缩放比例】【x和y缩放时所使用的模式和中心点】其中:RELATIVE_TO_SELF 代表相对自身
        sa.setDuration(2000);
        sa.setInterpolator(new CycleInterpolator(1));//动画循环播放特定的次数,速率改变沿着正弦曲线
        iv.startAnimation(sa);
    }
    //旋转动画
    public void rotate(View view) {
        RotateAnimation ra = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f);
        //【float fromDegrees, float toDegrees, 】【int pivotXType, float pivotXValue, int pivotYType, float pivotYValue】
        //【开始和结束时旋转的角度】【x和y旋转时所使用的模式和中心点】
        ra.setDuration(2000);
        ra.setRepeatCount(1);
        ra.setRepeatMode(Animation.REVERSE);
        ra.setInterpolator(new AnticipateInterpolator());//开始的时候向后然后向前甩
        iv.startAnimation(ra);
    }

    //组合动画
    public void set(View view) {
        AnimationSet set = new AnimationSet(false);//是否使用共同的播放速度
        set.setInterpolator(new MyInterpolator(2));//使用自定义的Interpolator
        //位移
        TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -0.5f, Animation.RELATIVE_TO_PARENT, 0.5f,
                Animation.RELATIVE_TO_PARENT, -0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
        ta.setDuration(1200);
        ta.setRepeatCount(1);
        ta.setRepeatMode(Animation.REVERSE);
        //缩放
        ScaleAnimation sa = new ScaleAnimation(0.1f, 1.2f, 0.1f, 1.2f, Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);
        sa.setDuration(1000);
        sa.setRepeatCount(1);
        sa.setRepeatMode(Animation.REVERSE);
        //旋转
        RotateAnimation ra = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f);
        ra.setDuration(2000);
        ra.setRepeatCount(0);
        //将上面这些动画放到集合中
        set.addAnimation(ra);
        set.addAnimation(ta);
        set.addAnimation(sa);
        iv.startAnimation(set);
    }

    class MyInterpolator implements Interpolator {
        private float mFactor;
        private int i;
        public MyInterpolator(int i) {//初始化时设定速率变化规则
            this.i = i;
        }
        @Override
        public float getInterpolation(float input) {
            //参数input是一个0.0f~1.0f的浮点数,Interpolator可认为是一个基于input构造出的函数
            switch (i) {
            case 2://“变化率”呈二次方
                mFactor = input * input;
                break;
            case 3://“变化率”呈三次方
                mFactor = input * input * input;
                break;
            default://“变化率”是匀速的
                mFactor = input;
                break;
            }
            return mFactor;
        }
    }
}

演示布局
补间动画 Interpolator 简介 示例    补间动画 Interpolator 简介 示例
<RelativeLayout 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"
    tools:context=".MainActivity" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="alpha"
            android:text="透明度" />
        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="trans"
            android:text="移位" />
        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="scale"
            android:text="缩放" />
        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="rotate"
            android:text="旋转" />
        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="set"
            android:text="组合" />
    </LinearLayout>
    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="10dp"
        android:background="#6699ff00"
        android:src="@drawable/ic_launcher" />
</RelativeLayout>