补间动画和逐帧动画结合之蝴蝶飞舞

最新推荐文章于 2021-06-11 20:03:38 发布

高锦湖

最新推荐文章于 2021-06-11 20:03:38 发布

阅读量3k

点赞数 1

本文链接：https://blog.csdn.net/blueshell001/article/details/51762697

版权

本文介绍了如何结合补间动画和逐帧动画，创作出逼真的蝴蝶飞舞效果。首先讲解了布局文件的设计，接着详细阐述了动画资源文件的制作与应用，通过这种方式，使得动画既具有平滑的过渡，又有丰富的细节表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

package com.test.tweenanimation;

import android.graphics.drawable.AnimationDrawable;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

import java.util.Timer;
import java.util.TimerTask;

/**
 * 蝴蝶飞舞  用该案例来演示逐帧动画和补间动画
 */
public class ButterflyActivity extends AppCompatActivity {
    //记录当前 ImageView的位置
    private float curX = 0;
    private float curY = 30;

    //记录ImageView的下一个位置
    float nextX = 0;
    float nextY = 0;


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

        final ImageView butterfly = (ImageView) findViewById(R.id.butterfly);

        final Handler handler = new Handler() {
            @Override
            public void handleMessage(Message msg) {
                if (msg.what == 0x123) {
                    //横向上一直向右飞
                    if (nextX > 300) {
                        curX = nextX = 0;
                    } else {
                        nextX += 10;
                    }

                    //纵向上 随机上下
                    nextY = curY+(float) (Math.random() * 20 - 5);
                    //设置显示蝴蝶的ImageView发生位移改变
                    TranslateAnimation animation = new TranslateAnimation(curX, nextX, curY, nextY);

                    curX = nextX;
                    curY = nextY;

                    animation.setDuration(200);
                    //开始位移动画
                    butterfly.startAnimation(animation);
                }
            }
        };

        final AnimationDrawable anim = (AnimationDrawable) butterfly.getBackground();

        butterfly.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //开始播放蝴蝶振翅效果的 逐帧动画
                anim.start();

                //通过定时器每隔0.3秒运行一次 位移动画
                new Timer().schedule(new TimerTask() {
                    @Override
                    public void run() {
                        handler.sendEmptyMessage(0x123);
                    }
                }, 0, 300);
            }
        });
    }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
android:background="#fff"
    tools:context="com.test.tweenanimation.ButterflyActivity">

    <ImageView
        android:id="@+id/butterfly"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@anim/butterfly"
        />
</RelativeLayout>

动画资源文件

<?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/butterfly_f01" android:duration="120" />
    <item android:drawable="@drawable/butterfly_f02" android:duration="120" />
    <item android:drawable="@drawable/butterfly_f03" android:duration="120" />
    <item android:drawable="@drawable/butterfly_f04" android:duration="120" />
    <item android:drawable="@drawable/butterfly_f05" android:duration="120" />
    <item android:drawable="@drawable/butterfly_f06" android:duration="120" />

</animation-list>