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

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>
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你好!要实现这个效果,可以通过CSS3动画来完成。 首先,我们需要创建一个钱袋和金币的图像,并将它们放在HTML中。然后,使用CSS设置它们的位置和样式。 接着,使用CSS3的@keyframes规则来定义一个动画。在这个动画中,我们将金币向上移动并旋转,然后让它们落入钱袋中。同时,我们可以添加一些随机的transform属性和延迟时间,以产生更加自然的效果。 最后,将动画应用到金币的class上,就可以看到金币飞舞到钱袋的效果了。 下面是示例代码: ``` .coin-container { position: relative; height: 200px; } .coin { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; background-image: url('coin.png'); background-size: cover; } @keyframes coin { 0% { transform: translateX(-50%) rotate(0deg); } 50% { transform: translateX(-50%) translateY(-200px) rotate(360deg); } 100% { transform: translateX(calc(50% - 25px)) translateY(-300px) rotate(720deg); } } /* 随机transform属性和延迟时间 */ .coin:nth-child(1) { animation: coin 2s ease-in-out 0s infinite; } .coin:nth-child(2) { animation: coin 2s ease-in-out 0.1s infinite; } .coin:nth-child(3) { animation: coin 2s ease-in-out 0.2s infinite; } .coin:nth-child(4) { animation: coin 2s ease-in-out 0.3s infinite; } ``` 以上代码将创建一个高度为200px的容器,其中包含4个金币。每个金币都将使用coin类来设置样式,并应用coin动画。在coin动画中,金币将在2秒钟内向上移动并旋转,最终落入钱袋中。每个金币的动画延迟时间和transform属性都是随机的,以使效果更加自然。 当然,你需要将代码中的图片路径更改为你自己的图片路径。希望这能帮到你!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值