Android 动画开发：使用逐帧动画和补间动画实现蝴蝶飞舞效果

本教程将带您一步步实现一个简单的 Android 动画效果：让一只蝴蝶在屏幕上飞舞。我们将结合两种动画类型：逐帧动画和补间动画，分别用于展现蝴蝶振翅和飞行轨迹。

实现步骤

创建布局文件： 在布局文件中添加一个 ImageView，用来显示蝴蝶图片。
创建动画文件夹： 在 res/drawable 文件夹下创建一个名为 animation 的文件夹，用于存放逐帧动画的图片。
创建逐帧动画文件： 在 animation 文件夹下创建一个名为 butterfly_animation.xml 的文件，定义蝴蝶振翅的动画效果。
加载布局文件和动画资源： 在 Activity 中加载布局文件和动画资源，并将逐帧动画设置给 ImageView。
创建补间动画： 创建一个 TranslateAnimation 动画，实现蝴蝶在屏幕上的飞行效果。
应用补间动画： 将补间动画应用到 ImageView 上，开始蝴蝶的飞行动画。

示例代码

布局文件 (activity_main.xml)

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

    <ImageView
        android:id='+id/butterfly'
        android:layout_width='wrap_content'
        android:layout_height='wrap_content'
        android:layout_centerInParent='true'/>

</RelativeLayout>

逐帧动画文件 (butterfly_animation.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/butterfly1' android:duration='50' />
    <item android:drawable='@drawable/butterfly2' android:duration='50' />
    <item android:drawable='@drawable/butterfly3' android:duration='50' />
    <item android:drawable='@drawable/butterfly4' android:duration='50' />
</animation-list>

Activity 代码 (MainActivity.java)

public class MainActivity extends AppCompatActivity {

    private ImageView butterfly;

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

        butterfly = findViewById(R.id.butterfly);

        // 加载逐帧动画资源
        AnimationDrawable animation = (AnimationDrawable) getResources().getDrawable(R.drawable.butterfly_animation);
        butterfly.setImageDrawable(animation);

        // 创建补间动画，实现蝴蝶飞行效果
        TranslateAnimation animation1 = new TranslateAnimation(0, 500, 0, 0);
        animation1.setDuration(5000);
        animation1.setRepeatCount(-1);
        animation1.setRepeatMode(Animation.REVERSE);

        // 将补间动画应用到ImageView上
        butterfly.startAnimation(animation1);

        // 开始逐帧动画
        animation.start();
    }
}

代码说明：

TranslateAnimation 表示平移动画，参数分别代表起始位置的 X、Y 坐标和终止位置的 X、Y 坐标。
setDuration 设置动画持续时间。
setRepeatCount 设置动画重复次数，-1 表示无限重复。
setRepeatMode 设置重复模式，Animation.REVERSE 表示反向重复。
butterfly.startAnimation(animation1) 将补间动画应用到 ImageView 上。
animation.start() 开始逐帧动画。

总结

本教程演示了如何通过结合逐帧动画和补间动画来实现一个简单的蝴蝶飞舞效果。您可以根据自己的需求修改动画参数，例如改变蝴蝶飞行路径、速度和振翅频率，以创造更丰富、更生动的动画效果。