初识android动画（2）之补间动画

来源：互联网发布：淘宝的运费险是什么意思编辑：程序博客网时间：2024/05/16 14:44

什么是补间动画呢？在上篇博客我们知道，帧动画是一帧一帧的播放的，也就是一次性播放好多张图片。而补间动画就是在两张图片之间切换时的动画。

补间动画的一些属性：

（1）种类

Alpha：透明度渐变效果，创建时许指定开始以及结束透明度，还有动画的持续时间，透明度的变化范围(0,1)，0是完全透明，1是完全不透明；对应<alpha/>标签！

Scale：缩放渐变效果，创建时需指定开始以及结束的缩放比，以及缩放参考点，还有动画的持续时间；对应<scale/>标签！

Translate：位移渐变效果，创建时指定起始以及结束位置，并指定动画的持续时间即可；对应<translate/>标签！

Rotate：旋转渐变效果，创建时指定动画起始以及结束的旋转角度，以及动画持续时间和旋转的轴心；对应<rotate/>标签

set：组合渐变，就是前面多种渐变的组合，对应<set/>标签

     （2）这几类动画的共同属性

Duration            动画持续时间（ms）fillAfter              设置为true，动画转化在动画结束后被应用回到原来状态fillBefore           设置为true，动画转化在动画开始前被应用interpolator      动画插入器（加速/减速）repeatCount     重复次数repateMode     顺序重复/倒序重复startOffset         动画之间的时间间隔

   这里面提到了一个插值器，那么什么是插值器呢？官方API   点击打开链接

LinearInterpolator：动画以均匀的速度改变
AccelerateInterpolator：在动画开始的地方改变速度较慢，然后开始加速
AccelerateDecelerateInterpolator：在动画开始、结束的地方改变速度较慢，中间时加速
CycleInterpolator：动画循环播放特定次数，变化速度按正弦曲线改变： Math.sin(2 * mCycles * Math.PI * input)
DecelerateInterpolator：在动画开始的地方改变速度较快，然后开始减速
AnticipateInterpolator：反向，先向相反方向改变一段再加速播放
AnticipateOvershootInterpolator：开始的时候向后然后向前甩一定值后返回最后的值
BounceInterpolator： 跳跃，快到目的值时值会跳跃，如目的值100，后面的值可能依次为85，77，70，80，90，100
OvershottInterpolator：回弹，最后超出目的值然后缓慢改变到目的值

         创建补间动画（1）使用xml

1）AlphaAnimation(透明度渐变)

anim_alpha.xml：

<alpha xmlns:android="http://schemas.android.com/apk/res/android"      android:interpolator="@android:anim/accelerate_decelerate_interpolator"      android:fromAlpha="1.0"      android:toAlpha="0.1"      android:duration="2000"/>

属性解释：

fromAlpha :起始透明度
toAlpha:结束透明度
透明度的范围为：0-1，完全透明-完全不透明

2）ScaleAnimation(缩放渐变)

anim_scale.xml：

<scale xmlns:android="http://schemas.android.com/apk/res/android"      android:interpolator="@android:anim/accelerate_interpolator"      android:fromXScale="0.2"      android:toXScale="1.5"      android:fromYScale="0.2"      android:toYScale="1.5"      android:pivotX="50%"      android:pivotY="50%"      android:duration="2000"/>

属性解释：

fromXScale/fromYScale：沿着X轴/Y轴缩放的起始比例
toXScale/toYScale：沿着X轴/Y轴缩放的结束比例
pivotX/pivotY：缩放的中轴点X/Y坐标，即距离自身左边缘的位置，比如50%就是以图像的中心为中轴点

3）TranslateAnimation(位移渐变)

anim_translate.xml：

<translate xmlns:android="http://schemas.android.com/apk/res/android"      android:interpolator="@android:anim/accelerate_decelerate_interpolator"      android:fromXDelta="0"      android:toXDelta="320"      android:fromYDelta="0"      android:toYDelta="0"      android:duration="2000"/>

属性解释：

fromXDelta/fromYDelta：动画起始位置的X/Y坐标
toXDelta/toYDelta：动画结束位置的X/Y坐标

4）RotateAnimation(旋转渐变)

anim_rotate.xml：

<rotate xmlns:android="http://schemas.android.com/apk/res/android"      android:interpolator="@android:anim/accelerate_decelerate_interpolator"      android:fromDegrees="0"      android:toDegrees="360"      android:duration="1000"      android:repeatCount="1"      android:repeatMode="reverse"/>

属性解释：

fromDegrees/toDegrees：旋转的起始/结束角度
repeatCount：旋转的次数，默认值为0，代表一次，假如是其他值，比如3，则旋转4次另外，值为-1或者infinite时，表示动画永不停止
repeatMode：设置重复模式，默认restart，但只有当repeatCount大于0或者infinite或-1时才有效。还可以设置成reverse，表示偶数次显示动画时会做方向相反的运动！

5）AnimationSet(组合渐变)

非常简单，就是前面几个动画组合到一起而已~

anim_set.xml：

<set xmlns:android="http://schemas.android.com/apk/res/android"      android:interpolator="@android:anim/decelerate_interpolator"      android:shareInterpolator="true" >        <scale          android:duration="2000"          android:fromXScale="0.2"          android:fromYScale="0.2"          android:pivotX="50%"          android:pivotY="50%"          android:toXScale="1.5"          android:toYScale="1.5" />        <rotate          android:duration="1000"          android:fromDegrees="0"          android:repeatCount="1"          android:repeatMode="reverse"          android:toDegrees="360" />        <translate          android:duration="2000"          android:fromXDelta="0"          android:fromYDelta="0"          android:toXDelta="320"          android:toYDelta="0" />        <alpha          android:duration="2000"          android:fromAlpha="1.0"          android:toAlpha="0.1" />  </set>

下面用代码加载一下这几类动画。

好哒，接着到我们的MainActivity.java，同样非常简单，只需调用AnimationUtils.loadAnimation() 加载动画，然后我们的View控件调用startAnimation开启动画即可~
下面是AnimationUtils类的一些常用方法
         currentAnimationTimeMillis()         返回当前动画时间,以毫秒为单位。
           loadAnimation(Context context,int id)       从一个资源加载动画对象
           loadInterpolator(Context context,int id)         从资源加载一个插入器对象
           loadLayoutAnimation(Context context,int id)           从一个资源加载LayoutAnimationController对象
           makeInAnimation(Context c,boolean fromLeft)          做一个动画的对象变得可见。
           makeInChildBottomAnimation(Context context)       做一个动画的对象变得可见。
           makeOutAnimation(Context context,  boolean fromRight)         
   开始编写我们的代码
public class MainActivity extends AppCompatActivity implements View.OnClickListener{    private Button btn_alpha;    private Button btn_scale;    private Button btn_tran;    private Button btn_rotate;    private Button btn_set;    private ImageView img_show;    private Animation animation = null;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        bindViews();    }    private void bindViews() {        btn_alpha = (Button) findViewById(R.id.btn_alpha);        btn_scale = (Button) findViewById(R.id.btn_scale);        btn_tran = (Button) findViewById(R.id.btn_tran);        btn_rotate = (Button) findViewById(R.id.btn_rotate);        btn_set = (Button) findViewById(R.id.btn_set);        img_show = (ImageView) findViewById(R.id.img_show);        btn_alpha.setOnClickListener(this);        btn_scale.setOnClickListener(this);        btn_tran.setOnClickListener(this);        btn_rotate.setOnClickListener(this);        btn_set.setOnClickListener(this);    }    @Override    public void onClick(View v) {        switch (v.getId()){            case R.id.btn_alpha:                animation = AnimationUtils.loadAnimation(this,                        R.anim.anim_alpha);                img_show.startAnimation(animation);                break;            case R.id.btn_scale:                animation = AnimationUtils.loadAnimation(this,                        R.anim.anim_scale);                img_show.startAnimation(animation);                break;            case R.id.btn_tran:                animation = AnimationUtils.loadAnimation(this,                        R.anim.anim_translate);                img_show.startAnimation(animation);                break;            case R.id.btn_rotate:                animation = AnimationUtils.loadAnimation(this,                        R.anim.anim_rotate);                img_show.startAnimation(animation);                break;            case R.id.btn_set:                animation = AnimationUtils.loadAnimation(this,                        R.anim.anim_set);                img_show.startAnimation(animation);                break;        }    }}




嘿嘿，有点意思是吧，还不动手试试，改点东西，或者自由组合动画，做出酷炫的效果吧~
4.动画状态的监听
我们可以对动画的执行状态进行监听，调用动画对象的：
setAnimationListener(new AnimationListener())方法，重写下面的三个方法：
onAnimationStart()：动画开始
onAnimtaionRepeat()：动画重复
onAnimationEnd()：动画结束
即可完成动画执行状态的监听~
使用java代码实现补间动画
TranslateAnimation translate = new TranslateAnimation(-50, 50,0, 0);translate.setDuration(1000);translate.setRepeatCount(Animation.INFINITE);
AlphaAnimation alphaAnimation = new AlphaAnimation(0.1f, 1.0f);alphaAnimation.setDuration(100);
ScaleAnimation scalAnimation=new ScaleAnimation(1,5, 1, 5);scalAnimation.setFillAfter(true);//在执行完动画后是否恢复到原来的状态scalAnimation.setDuration(3000);
RotateAnimation rotateAnimation = new RotateAnimation(0, 180);rotateAnimation.setDuration(3000);
AlphaAnimation alphaAnimation=new AlphaAnimation(0.2f, 1f);ScaleAnimation scalAnimation=new ScaleAnimation(1,5, 1, 5);RotateAnimation rotateAnimation = new RotateAnimation(0, 180);AnimationSet set=new AnimationSet(true);set.setDuration(9000);set.setDetachWallpaper(false);set.addAnimation(alphaAnimation);set.addAnimation(scalAnimation);set.addAnimation(rotateAnimation);

1 0