请给我上一份动画总结之帧动画

请给我上一份动画总结之帧动画

提起动画，会有三种动画类型在Android开发中经常被用到：

1. 帧动画
2. 补间动画
3. 属性动画

这篇文章主要介绍帧动画的原理以及使用

原理

所谓帧动画就是我们常说的Fragment动画，Fragment动画是一系列图片资源按照一定的顺序展示的过程，它的原理是在一定的时间段内切换多张有细微差别的图片从而达到动画的效果。

作用对象及使用场景

主要作用于视图控件（如Button，TextView，ImageView等）

主要应用于较为复杂的个性化动画效果。

帧动画的使用

帧动画的使用比较简单，只有两步：

步骤1：将动画资源（即每张图片资源）放到 drawable文件夹里

步骤2：设置并启动 动画

这里启动帧动画有两种方式，一种是以xml方式，一种是以Java形式，这里我推荐的方式是xml，因为它可以将动画的代码从复杂的Java代码逻辑中隔离，使得动画更易于维护。下面来看看两种方式都是如何实现的。

方式一：xml实现

首先在drawable文件夹中创建动画效果.xml文件，路径为res/drawable/fragment_animation.xml

fragment_animation.xml:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <!--oneshot 设置是否只播放一次，默认为false，duration设置一帧持续时间（ms）-->
    <item
        android:drawable="@drawable/ic_heart_1"
        android:duration="500" />
    <item
        android:drawable="@drawable/ic_heart_2"
        android:duration="500" />
    <item
        android:drawable="@drawable/ic_heart_3"
        android:duration="500" />
    <item
        android:drawable="@drawable/ic_heart_4"
        android:duration="500" />
    <item
        android:drawable="@drawable/ic_heart_5"
        android:duration="500" />

</animation-list>

其次在Java代码中加入启动动画代码，这里我使用了butterknife对view进行注入，

public class FragmentAnimationActivity extends AppCompatActivity {
    @BindView(R.id.bt_start)
    Button mBtStart;

    @BindView(R.id.bt_stop)
    Button mBtStop;

    @BindView(R.id.iv_image)
    ImageView mIvImage;

    private AnimationDrawable mAnimationDrawable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_zhen_animation);

        ButterKnife.bind(this);

    }

    @OnClick({R.id.bt_start, R.id.bt_stop})
    public void clickButton(View view) {
        switch (view.getId()) {
            case R.id.bt_start:
//                设置动画                mIvImage.setImageResource(R.drawable.fragment_animation);
//                获取动画对象
                mAnimationDrawable = (AnimationDrawable) mIvImage.getDrawable();
//                开始动画
                mAnimationDrawable.start();

                break;
            case R.id.bt_stop:
//                设置动画               mIvImage.setImageResource(R.drawable.fragment_animation);
//                获取动画对象
                mAnimationDrawable = (AnimationDrawable) mIvImage.getDrawable();
//                停止动画
                mAnimationDrawable.stop();


                break;
        }
    }
}

结果展示：

方式二：Java实现

public class FragmentAnimationActivity extends AppCompatActivity {
    @BindView(R.id.bt_start)
    Button mBtStart;

    @BindView(R.id.bt_stop)
    Button mBtStop;

    @BindView(R.id.iv_image)
    ImageView mIvImage;

    private AnimationDrawable mAnimationDrawable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_zhen_animation);

        ButterKnife.bind(this);

        mAnimationDrawable = new AnimationDrawable();
        for (int i = 1; i <= 5; i++) {
            int sourceId = getResources().getIdentifier("ic_heart_" + i, "drawable", getPackageName());
            Drawable drawable = getResources().getDrawable(sourceId);
            mAnimationDrawable.addFrame(drawable, 500);
        }
    }

    @OnClick({R.id.bt_start, R.id.bt_stop})
    public void clickButton(View view) {
        switch (view.getId()) {
            case R.id.bt_start:
                mAnimationDrawable.setOneShot(true);
                mIvImage.setImageDrawable(mAnimationDrawable);
                mAnimationDrawable.stop();
                mAnimationDrawable.start();

                break;
            case R.id.bt_stop:
                mAnimationDrawable.setOneShot(true);

                mIvImage.setImageDrawable(mAnimationDrawable);
                mAnimationDrawable.stop();

                break;
        }
    }
}

效果图同上

这里帧动画还是有个缺点的：图片太大或者太多，会引起OOM

项目源码