Android动画系列之帧动画和补间动画

头像
躬行之
    阅读 12 分钟
    原文首发于微信公众号：jzman-blog，欢迎关注交流！

    Android 提供三种动画：帧动画、补间动画和属性动画，本篇文章介绍帧动画以及补间动画的使用，属性动画的使用将在后面的文章中分享，那就来复习一下这两种动画的使用吧。

    FrameAnimation

    FrameAnimation 即逐帧动画，通俗来说就是按照图片动作顺序依次播放来形成动画，创建 FrameAnimation 可用 xml 定义也可直接使用代码创建。

    xml创建帧动画

    在 res/drawable 文件夹下创建一个 drawable 文件，使用 animation-list 标签，具体内容如下：

    <?xml version="1.0" encoding="utf-8"?>
<!--FrameAnimator-->
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/zzlx1"
        android:duration="100" />
    <item
        android:drawable="@drawable/zzlx2"
        android:duration="100" />
    <item
        android:drawable="@drawable/zzlx3"
        android:duration="100" />
    <!--...-->
</animation-list>

    属性 oneshot 为 true 表示动画只能播放一次，false 表示动画循环播放，drawable 是当前动作对应的图片，duration 是其持续时间，duration 长度影响动画播放的快慢，然后在 Activity 中使用获取该 drawable 文件对应的 AnimationDrawable，然后使用 AnimationDrawable 对象来控制动画的状态，参考如下：

    //获取Frame动画文件对应的AnimationDrawable
mAnimationDrawable = (AnimationDrawable) getResources().getDrawable(R.drawable.frame_animator);
//设置AnimationDrawable为图片的背景
imageView.setBackground(mAnimationDrawable);

//开启动画
mAnimationDrawable.start();
//停止动画
mAnimationDrawable.stop();
    代码创建帧动画

    使用代码创建帧动画就是创建 AnimationDrawable 对象，然后在 AnimationDrawable 中添加对应的 Frame 即可，代码参考如下：

    //代码创建Frame动画
mAnimationDrawable = new AnimationDrawable();
//设置动画循环播放，true为动画只播放一次
mAnimationDrawable.setOneShot(false);
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.zzlx1),100);
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.zzlx2),100);
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.zzlx3),100);
//...
imageView.setBackground(mAnimationDrawable);

//开启动画
mAnimationDrawable.start();
//停止动画
mAnimationDrawable.stop();

    FrameAnimation 效果如下：

    帧动画

    TweenAnimation

    TweenAnimation 即常说的补间动画，主要有以下几种：

    1. 位移动画(Translation)
    2. 缩放动画(Scale)
    3. 旋转动画(Rotate)
    4. 透明度动画(Alpha)
    5. 组合动画

    上述动画都有自己特有的一下属性，下面来看一看这些动画通用的一些属性，具体如下：

    <!--设置动画持续时间-->
android:duration="1200"
<!--动画开始的延时-->
android:startOffset ="1000"
<!--动画播放完是否回到动画开始的位置，默认true，如果fillBefore设置为false,动画不会停留在结束位置，不知道是不是bug-->
android:fillBefore = "true"
<!--动画播放完之后是否回到动画结束的位置，默认false,如果fillAfter设置为true,动画则会停留在结束位置-->
android:fillAfter = "false"
<!--设置fill...属性是否启用，对fillAfter无效-->
android:fillEnabled= "true"
<!--设置动画重复模式,restart为重新播放，reverse为倒序回放，和repeatCount搭配使用-->
android:repeatMode = "restart"
<!--设置动画重复次数-->
android:repeatCount = "0"
<!--设置动画插值器，这里的插值器是动画开始速度较慢，后面加速-->
android:interpolator = "@android:anim/accelerate_interpolator"

    如果在代码中进行对应动画实现，这些属性也有对应的属性设置，直接设置即可。

    位移动画(Translate)

    位移动画对 View 进行水平方向或垂直方向位置的平移，可指定起始位置和结束位置，可使用 xml 定义位移动画也可以使用代码创建位移动画，位移动画对应的 Animation 的子类是 TranslateAnimation。

    xml定义位移动画：在 res/anim 下创建一个xml文件 translation_anim.xml，在该文件中定义位移动画如下：

    <?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1200"
    android:startOffset ="0"
    android:fillBefore = "true"
    android:fillAfter = "false"
    android:fillEnabled= "false"
    android:repeatMode = "reverse"
    android:repeatCount = "5"
    android:interpolator = "@android:anim/accelerate_interpolator"

    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="100"
    android:toYDelta="100">

    上述 xml 文件定义了一个位移动画文件，其中位移动画自有的属性含义如下：

    <!--水平方向动画开始的位置-->
android:fromXDelta="0"
<!--垂直方向动画开始的位置-->
android:fromYDelta="0"
<!--水平方向动画结束的位置-->
android:toXDelta="100"
<!--垂直方向动画结束的位置-->
android:toYDelta="100"

    然后在 Activity 中获取该 xml 文件对应的 TranslateAnimation，将其设置到想要设置位移动画的 View 上即可，具体如下：

    private void translation(){
    //获取在anim下定义的动画文件
    TranslateAnimation translateAnimation = (TranslateAnimation) AnimationUtils.loadAnimation(this, R.anim.translation_anim);、
    //设置并开启动画
    ivImage.startAnimation(translateAnimation);    
}

    代码中创建位移动画：代码创建位移动画使用 Animation 的子类 TranslateAnimation,使用时直接创建 TranslateAnimation 对象即可，具体如下：

    //代码创建位移动画
private void translation(){
    //表示相对View自身原点(View左上角)像素偏移量
    TranslateAnimation translateAnimation = new TranslateAnimation(0,100,0,100);
    //设置动画持续时间
    translateAnimation.setDuration(1200);
    //设置动画重复模式
    translateAnimation.setRepeatMode(Animation.REVERSE);
    //设置动画重复次数
    translateAnimation.setRepeatCount(3);
    translateAnimation.setFillAfter(true);
    //设置动画插值器
    translateAnimation.setInterpolator(this,android.R.anim.accelerate_interpolator);
//        translateAnimation.setInterpolator(new AccelerateInterpolator());
    //...
    ivImage.startAnimation(translateAnimation);    
}

    上面参数中使用的时像素的偏移量，API 还提供了针对 View 自身一个父 View 的百分比的设置方式，下面这种创建 TranslateAnimation 对象的方式和上面实现的效果是一样的。具体如下：

    /**
 * ABSOLUTE:表示相对View自身原点(View左上角)像素偏移量
 *          此时和TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)一样
 * RELATIVE_TO_SELF:表示相对View自身的百分比，如0.5f表示View自身大小的50%，1.0f表示View自身大小
 * RELATIVE_TO_PARENT:表示相对父View的百分比，如0.5f表示View自身大小的50%，1.0f表示View自身大小
 */
TranslateAnimation translateAnimation = new TranslateAnimation(
        Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0.46f,
        Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0.46f);

    使用时可根据需要选择合适的构造方式创建 TranslateAnimation，测试效果如下：

    位移动画

    缩放动画(Scale)

    缩放动画对 View 就是对视图进行一定程度的放大和缩小，可使用 xml 定义位移动画也可以使用代码创建位移动画，缩放动画对应的 Animation 的子类是 ScaleAnimation。

    xml定义缩放动画：在 res/anim 下创建一个 xml 文件 scale_anim.xml，在里面定义缩放动画，具体如下：

    <?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1200"
    android:startOffset ="0"
    android:fillBefore = "true"
    android:fillAfter = "false"
    android:fillEnabled= "false"
    android:repeatMode = "reverse"
    android:repeatCount = "3"
    android:interpolator = "@android:anim/accelerate_interpolator"

    android:fromXScale="1"
    android:fromYScale="1"
    android:toXScale="3"
    android:toYScale="3"
    android:pivotX="50%"
    android:pivotY="50%">
</scale>

    上述 xml 文件定义了一个缩放动画文件，其中缩放动画自有的属性含义如下：

    <!--设置水平方向上的起始缩放倍数-->
android:fromXScale="1"
<!--设置垂直方向上的起始缩放倍数-->
android:fromYScale="1"
<!--设置水平方向上的结束缩放倍数-->
android:toXScale="3"
<!--设置垂直方向上的结束缩放倍数-->
android:toYScale="3"
<!--设置缩放中心水平方向上的坐标-->
android:pivotX="50%"
<!--设置缩放中心垂直方向上的坐标-->
android:pivotY="50%">

    其中 pivotX 和 pivotY 有三种设置方式：

    • 数字：如50表示缩放中心相较 View 原点偏移 50px
    • 百分比：如 50% 表示缩放中心相较 View 原点偏移 View 自身大小的 50%
    • 百分比p：如 50%p 表示缩放中心相较 View 原点偏移父 View 自身大小的 50%

    然后在 Activity 中获取该 xml 文件对应的 ScaleAnimation，将其设置到想要设置位移动画的 View 上即可，具体如下：

    private void scale(){
    ScaleAnimation scaleAnimation = (ScaleAnimation) AnimationUtils.loadAnimation(this,R.anim.scale_anim);
    ivImage.startAnimation(scaleAnimation);
}

    代码创建缩放动画：代码创建缩放动画使用 Animation 的子类 ScaleAnimation,使用时直接创建 ScaleAnimation 对象即可，具体如下：

    //代码创建缩放动画
private void scale(){
    ScaleAnimation scaleAnimation = new ScaleAnimation(1,3,1,3,
            Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
    scaleAnimation.setRepeatMode(Animation.REVERSE);
    scaleAnimation.setDuration(500);
    scaleAnimation.setRepeatCount(5);
    scaleAnimation.setInterpolator(this,android.R.anim.accelerate_decelerate_interpolator);
//        translateAnimation.setInterpolator(new AccelerateInterpolator());
    //...
    ivImage.startAnimation(scaleAnimation);
}

    至于参数中的 pivotXType 和 pivotYType 和在上文中已经提到过，这里就不在赘述，测试效果如下：

    缩放动画

    旋转动画(Rotate)

    旋转动画对 View 就是对视图角度进行旋转，可使用 xml 定义旋转动画也可以使用代码创建旋转动画，旋转动画对应的 Animation 的子类是 RotateAnimation。

    xml定义旋转动画：在 res/anim 下创建一个 xml 文件 rotate_anim.xml，在里面定义缩放动画，具体如下：

    <?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1200"
    android:startOffset ="0"
    android:fillBefore = "true"
    android:fillAfter = "false"
    android:fillEnabled= "false"
    android:repeatMode = "reverse"
    android:repeatCount = "5"
    android:interpolator = "@android:anim/accelerate_interpolator"

    android:fromDegrees="0"
    android:toDegrees="100"
    android:pivotY="50%"
    android:pivotX="50%">
</rotate>

    上述 xml 文件定义了一个旋转动画文件，其中缩放动画自有的属性含义如下：

    <!--设置动画开始时的角度，正数表示顺时针,负数表示逆时针-->
android:fromDegrees="0"
<!--设置动画结束时的角度，正数表示顺时针,负数表示逆时针-->
android:toDegrees="100"
<!--设置水平方向旋转中心点的坐标-->
android:pivotY="50%"
<!--设置垂直方向旋转中心点的坐标-->
android:pivotX="50%"

    其中 pivotX 和 pivotY 有三种设置方式在上文中已经说明。然后在 Activity 中获取该 xml 文件对应的 RotateAnimation，将其设置到想要设置旋转动画的 View 上即可，具体如下：

    private void rotate(){
    RotateAnimation rotateAnimation = (RotateAnimation) AnimationUtils.loadAnimation(this,R.anim.rotate_anim);
    ivImage.startAnimation(rotateAnimation);   
}

    代码创建旋转动画：代码创建旋转动画使用 Animation 的子类 RotateAnimation,使用时直接创建 RotateAnimation 对象即可，具体如下：

    //代码创建旋转动画
private void rotate(){
    RotateAnimation rotateAnimation = new RotateAnimation(0,100,
            Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
    rotateAnimation.setRepeatMode(Animation.REVERSE);
    rotateAnimation.setDuration(1200);
    rotateAnimation.setRepeatCount(3);
    rotateAnimation.setInterpolator(this,android.R.anim.accelerate_decelerate_interpolator);
//        translateAnimation.setInterpolator(new AccelerateInterpolator());
    //...
    ivImage.startAnimation(rotateAnimation);
}

    测试效果如下：

    旋转动画

    透明度动画(Alpha)

    透明度动画就是修改 View 的透明度，可使用 xml 定义透明度动画也可以使用代码创建透明度动画，透明度动画对应的 Animation 的子类是 AlphaAnimation。

    xml定义透明度动画：在 res/anim 下创建一个 xml 文件 alpha_anim.xml，在里面定义缩放动画，具体如下：

    <?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:startOffset ="0"
    android:fillBefore = "true"
    android:fillAfter = "true"
    android:fillEnabled= "false"
    android:repeatMode = "restart"
    android:repeatCount = "0"
    android:interpolator = "@android:anim/accelerate_interpolator"

    android:fromAlpha="1"
    android:toAlpha="0">
</alpha>

    上述 xml 文件定义了一个透明度动画文件，其中透明度动画自有的属性含义如下：

    <!--设置动画的开始透明度，0表示透明，1表示不透明-->
android:fromAlpha="1"
<!--设置动画的结束透明度，0表示透明，1表示不透明-->
android:toAlpha="0"

    然后在 Activity 中获取该 xml 文件对应的 AlphaAnimation，将其设置到想要设置旋转动画的 View 上即可，具体如下：

    private void alpha(){
    AlphaAnimation alphaAnimation = (AlphaAnimation) AnimationUtils.loadAnimation(this,R.anim.alpha_anim);
    ivImage.startAnimation(alphaAnimation); 
}

    代码创建透明度动画：代码创建透明度动画使用 Animation 的子类 AlphaAnimation,使用时直接创建 AlphaAnimation 对象即可，具体如下：

    //代码创建透明度动画
private void alpha(){
    AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.0f);
    alphaAnimation.setRepeatMode(Animation.RESTART);
    alphaAnimation.setDuration(1500);
    alphaAnimation.setRepeatCount(3);
//        alphaAnimation.setInterpolator(this,android.R.anim.accelerate_decelerate_interpolator);
//        translateAnimation.setInterpolator(new AccelerateInterpolator());
    //...
    ivImage.startAnimation(alphaAnimation);
}

    透明度动画测试效果如下：

    透明度动画

    到此为止，位移、缩放、旋转、透明度动画的内容介绍完了，除了单独使用这些动画，还可以组合这些动画实现更复杂的动画，

    组合动画

    组合动画使用 AnimationSet 来实现，可使用 xml 定义组合动画也可以使用代码创建组合动画，透明度动画对应的 Animation 的子类是 AnimationSet。

    xml定义组合动画：在 res/anim 下创建一个 xml 文件 combine_anim.xml，在里面定义组合动画，具体如下：

    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1200">

    <!--透明度动画-->
    <alpha
        android:repeatMode="reverse"
        android:repeatCount="10"
        android:fromAlpha="1"
        android:toAlpha="0.5" />

    <!--旋转动画-->
    <rotate
        android:repeatMode="reverse"
        android:repeatCount="10"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />

    <!--缩放动画-->
    <scale
        android:repeatMode="reverse"
        android:repeatCount="10"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="3"
        android:toYScale="3" />
</set>

    然后在 Activity 中获取该 xml 文件对应的 AnimationSet，将其设置到想要设置旋转动画的 View 上即可，具体如下：

    private void combine(){
    AnimationSet animationSet = (AnimationSet) AnimationUtils.loadAnimation(this,R.anim.combine_anim);
    ivImage.startAnimation(animationSet);
}

    代码创建组合动画：代码创建组合动画使用 Animation 的子类 AnimationSet,使用时直接创建 AnimationSet 对象，将要组合的动画按序添加到 AnimationSet 中，具体如下：

    //代码创建组合动画
private void combine(){
    AnimationSet animationSet = new AnimationSet(true);
    AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.3f);
    alphaAnimation.setRepeatMode(Animation.REVERSE);
    alphaAnimation.setRepeatCount(3);
    RotateAnimation rotateAnimation = new RotateAnimation(0,360,
            Animation.RELATIVE_TO_SELF,0.5f,
            Animation.RELATIVE_TO_SELF,0.5f);
    rotateAnimation.setRepeatMode(Animation.REVERSE);
    rotateAnimation.setRepeatCount(3);
    ScaleAnimation scaleAnimation = new ScaleAnimation(1,3,1,3,
            Animation.RELATIVE_TO_SELF,0.5f,
            Animation.RELATIVE_TO_SELF,0.5f);
    scaleAnimation.setRepeatMode(Animation.REVERSE);
    scaleAnimation.setRepeatCount(3);

    animationSet.addAnimation(alphaAnimation);
    animationSet.addAnimation(rotateAnimation);
    animationSet.addAnimation(scaleAnimation);

    animationSet.setDuration(1200);
    //AnimationSet不支持动画重复播放，如果想要组合动画重复播放可设置每个动画重复播放即可
//        animationSet.setRepeatMode(Animation.REVERSE);
//        animationSet.setRepeatCount(10);

    ivImage.startAnimation(animationSet);
}

    组合动画测试效果如下：

    组合动画

    总结

    这篇文章总结了 Android 开发中帧动画(FrameAnimation)和补间动画(TweenAnimation)的使用，下一篇将会介绍属性动画(ObjectAnimator )。

    可以关注公众号：躬行之（jzman-blog），一起交流学习。

    image

    androidanimation动画
    躬行之
    18 声望5 粉丝
    « 上一篇
    Android如何使用注解进行代码检查
    下一篇 »
    Android动画系列之属性动画

    引用和评论

    推荐阅读
    头像
    设计模式之代理设计模式

    躬行之阅读 1.7k

    头像
    给线条类型的svg图标加上绘制的动画效果

    热饭班长赞 2阅读 403

    头像
    如何使用JavaScript开发AR(增强现实)移动应用 (一)

    注销赞 2阅读 2k

    头像
    使用JavaScript调用手机平台上的原生API

    注销赞 2阅读 2.7k

    头像
    如何用JavaScript判断前端应用运行环境（移动平台还是桌面环境）

    注销阅读 4.1k

    头像
    通过Java代码实现图片的放大和缩小

    注销阅读 2.9k

    头像
    只要200行JavaScript代码，就能把特斯拉汽车带到您身边

    注销阅读 1.8k

    0 条评论
    得票最新