欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Hello 帧动画

程序员文章站 2024-03-23 23:07:34
...

       帧动画即把每张静态图片都收集起来,然后由android来控制依次显示这些静态图片,然后利用人眼视觉暂留的原理,给用户造成“动画”的错觉。简而言之让图片动起来

好了,直接上代码

实现方式一:通过xml文件

          1、在/res/drawable目录下,定义一个逐帧动画的资源文件

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true" >

    <!-- animation-list 帧动画 -->
    <!-- android:oneshot的值为 false代表播放多次,true代表只播放一次 -->
    <!-- duration代表每张图片的播放时间 ,定义一个持续时间为50毫秒的动画帧 -->
    <item
        android:drawable="@drawable/push_down_1"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_down_2"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_down_3"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_down_4"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_down_5"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_down_6"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_down_7"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_down_8"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_down_9"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_down_10"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_up_1"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_up_2"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_up_3"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_up_4"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_up_5"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_up_6"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_up_7"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_up_8"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_up_9"
        android:duration="50"/>
    <item
        android:drawable="@drawable/push_up_10"
        android:duration="50"/>

</animation-list>

   2、在布局文件中添加一个ImageView来显示每一帧图像。为了方便可以再添加两个按钮控制其播放和停止

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.newdegree.mytest.FatPoActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/play"
            android:text="开始"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/pause"
            android:text="暂停"
            android:layout_weight="1"
            android:layout_marginLeft="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </LinearLayout>

    <ImageView
        android:id="@+id/anim"
        android:src="@drawable/fat_po"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

  3、在代码中引用

public class FatPoActivity extends AppCompatActivity {

    private Button btn_play,btn_pause;
    private ImageView iv;

    private AnimationDrawable anim;

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

        btn_play = (Button) findViewById(R.id.play);
        btn_pause = (Button) findViewById(R.id.pause);
        iv = (ImageView) findViewById(R.id.anim);

        iv.setImageResource(R.drawable.fat_po);
        anim = (AnimationDrawable) iv.getDrawable();

        btn_play.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                anim.start();
            }
        });

        btn_pause.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                anim.stop();
            }
        });
    }
}

实现方式二:通过Java代码控制每一帧图片(播放/暂停的调用和上面一样)

		animationDrawable = new AnimationDrawable();
		// 为AnimationDrawable添加动画帧
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img00), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img01), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img02), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img03), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img04), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img05), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img06), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img07), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img08), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img09), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img10), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img11), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img12), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img13), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img14), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img15), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img16), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img17), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img18), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img19), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img20), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img21), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img22), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img23), 50);
		animationDrawable.addFrame(
				getResources().getDrawable(R.drawable.img24), 50);
		// 设置为循环播放
		animationDrawable.setOneShot(false);
		imageView.setBackground(animationDrawable);

 

(夜深了,有点不走心了,若有bug,欢迎大神砸砖)