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

移动开发作者： 2024-08-25 13:45:01

原文首发于微信公众号：jzman-blog，欢迎关注交流！ Android 提供三种动画：帧动画、补间动画和属性动画，本篇文章介绍帧动画以及补间动画的使用，属性动画的使用将在后面的文章中分享，那就来复

FrameAnimation

xml创建帧动画

<?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>

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

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

代码创建帧动画

//代码创建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();

TweenAnimation

位移动画(Translation)
缩放动画(Scale)
旋转动画(Rotate)
透明度动画(Alpha)
组合动画

<!--设置动画持续时间-->
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)

<?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">

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

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

//代码创建位移动画
private void translation(){
    //表示相对View自身原点(View左上角)像素偏移量
    TranslateAnimation translateAnimation = new TranslateAnimation(0,100,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);    
}

/**
 * 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,Animation.RELATIVE_TO_SELF,0.46f,0.46f);

缩放动画(Scale)

<?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>

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

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

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

//代码创建缩放动画
private void scale(){
    ScaleAnimation scaleAnimation = new ScaleAnimation(1,3,1,0.5f,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);
}

旋转动画(Rotate)

<?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>

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

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

//代码创建旋转动画
private void rotate(){
    RotateAnimation rotateAnimation = new RotateAnimation(0,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)

<?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>

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

private void alpha(){
    AlphaAnimation alphaAnimation = (AlphaAnimation) AnimationUtils.loadAnimation(this,R.anim.alpha_anim);
    ivImage.startAnimation(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);
}

组合动画

<?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>

private void combine(){
    AnimationSet animationSet = (AnimationSet) AnimationUtils.loadAnimation(this,R.anim.combine_anim);
    ivImage.startAnimation(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,0.5f);
    rotateAnimation.setRepeatMode(Animation.REVERSE);
    rotateAnimation.setRepeatCount(3);
    ScaleAnimation scaleAnimation = new ScaleAnimation(1,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);
}