Android视图动画 -补间动画和帧动画

补间动画

补间动画只需指定动画开始样式，以及动画结束样式， 而动画变化的”中间帧”则由系统计算并补齐。

根据不同的动画效果，补间动画可以分为4中动画：

• translate 平移动画
• scale 缩放动画
• rotate 旋转动画
• alpha 透明度动画

常用 属性方法

android:duration：动画持续时间（ms），必须设置，动画才有效果
android:startOffset：动画延迟开始时间（ms）
android:fillBefore：动画播放完后，视图是否会停留在动画开始的状态，默认为true
android:fillAfter：动画播放完后，视图是否会停留在动画结束的状态，优先于fillBefore值，默认为false
android:fillEnabled：是否应用fillBefore值，对fillAfter值无影响，默认为true
android:repeatMode：选择重复播放动画模式，restart代表正序重放，reverse代表倒序回放，默认为restart|
android:repeatCount：重放次数（所以动画的播放次数=重放次数+1），为infinite时无限重复
android:interpolator：插值器，即影响动画的播放速度

setStartOffset(long startOffset)：设置开始的延迟的时间(单位ms)
setFillBefore(boolean fillBefore)：设置最终是否固定在起始状态
setFillAfter(boolean fillAfter)：设置最终是否固定在最后的状态
setAnimationListener(AnimationListener listener)：设置动画监听
view.startAnimation(animation)：开始
view.clearAnimation(aniamtion)：清除

translate 平移动画

方式一：XML代码设置

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="2000"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="100%"
        android:toYDelta="100%" />
</set>

Animation translate = AnimationUtils.loadAnimation(this, R.anim.translate_anim);
imageView.startAnimation(translate);

方式二：Java代码设置

TranslateAnimation translateAnimation = new TranslateAnimation(
        Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1f,
        Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1f);
translateAnimation.setDuration(2000);
imageView.startAnimation(translateAnimation);

scale 缩放动画

方式一：XML代码设置

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="2000"
        android:fromXScale="0"
        android:fromYScale="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1"
        android:toYScale="1" />
</set>

Animation scale = AnimationUtils.loadAnimation(this, R.anim.scale_anim);
imageView.startAnimation(scale);

方式二：Java代码设置

ScaleAnimation scaleAnimation = new ScaleAnimation(0f, 1f, 0f, 1f,
        Animation.RELATIVE_TO_SELF, 0.5f,
        Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(2000);
imageView.startAnimation(scaleAnimation);

rotate 旋转动画

方式一：XML代码设置

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />
</set>

Animation rotate = AnimationUtils.loadAnimation(this, R.anim.rotate_anim);
imageView.startAnimation(rotate);

方式二：Java代码设置

RotateAnimation rotateAnimation = new RotateAnimation(0f, 360f,
        Animation.RELATIVE_TO_SELF, 0.5f,
        Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(2000);
imageView.startAnimation(rotateAnimation);

alpha 透明度动画

方式一：XML代码设置

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="2000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

nimation alpha = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);
imageView.startAnimation(alpha);

方式二：Java代码设置

AlphaAnimation alphaAnimation = new AlphaAnimation(0f, 1f);
alphaAnimation.setDuration(2000);
imageView.startAnimation(alphaAnimation);

组合动画

方式一：XML代码设置

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:interpolator="@android:anim/decelerate_interpolator">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />
    <scale
        android:fromXScale="0"
        android:fromYScale="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1"
        android:toYScale="1" />
    <translate
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="100%"
        android:toYDelta="100%" />
</set>

Animation set = AnimationUtils.loadAnimation(this, R.anim.set_anim);
imageView.setAnimation(set);

方式二：Java代码设置

AnimationSet animationSet = new AnimationSet(false);

ScaleAnimation anim1 = new ScaleAnimation(0f, 1f, 0f, 1f,
        Animation.RELATIVE_TO_SELF, 0.5f,
        Animation.RELATIVE_TO_SELF, 0.5f);
RotateAnimation anim2 = new RotateAnimation(0f, 360f,
        Animation.RELATIVE_TO_SELF, 0.5f,
        Animation.RELATIVE_TO_SELF, 0.5f);
AlphaAnimation anim3 = new AlphaAnimation(0f, 1f);

animationSet.addAnimation(anim1);
animationSet.addAnimation(anim2);
animationSet.addAnimation(anim3);
animationSet.setDuration(2000);
imageView.startAnimation(animationSet);

帧动画

帧动画就是就是一帧挨着一帧的播放图片，就像放电影一样。

常用 方法属性：

oneshot属性：表示是否只播放一次，true表示只会播放一次，false表示一直循环播放
druation：表示此帧持续的时间，整数，单位为毫秒
drawable：表示此帧动画所对应的图片资源

举个例子：

现在res/drawable文件夹下，定义一个anim_loading.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/image_loading_01"
        android:duration="80" />
    <item
        android:drawable="@drawable/image_loading_02"
        android:duration="80" />
    <item
        android:drawable="@drawable/image_loading_03"
        android:duration="80" />
    <item
        android:drawable="@drawable/image_loading_04"
        android:duration="80" />
    <item
        android:drawable="@drawable/image_loading_05"
        android:duration="80" />
    <item
        android:drawable="@drawable/image_loading_06"
        android:duration="80" />
</animation-list>

然后设置一个ImageView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/btn_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="开始" />

        <Button
            android:id="@+id/btn_stop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="停止" />
    </LinearLayout>

    <ImageView
        android:id="@+id/iv_anim"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_centerInParent="true"
        android:src="@drawable/anim_loading" />
</RelativeLayout>

接下来就可以使用了

// 获取帧动画
drawable = (AnimationDrawable) iv_anim.getDrawable();
// 开始
drawable.start();
// 停止
drawable.stop();

说明：逐帧动画只能实现比较小的动画效果，如果复杂而且帧数比较多的动画不太建议使用逐帧动画，一方面是因为会造成OOM，另一方面会显得很卡，如果真是超级复杂的动画的话建议选择双缓冲绘制View来实现。

代码下载