Android 逐帧动画

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 4.8k 阅读时长 ≈ 4 分钟

逐帧动画

帧动画也属于 View 动画，只是它的表现形式和其它四种不太一样。
帧动画是顺序播放一组预先定义好的图片，通过 AnimationDrawable 类来使用。
它比较容易引起 OOM，所以使用时应尽量避免使用过多尺寸较大的图片。

用来逐帧显示预先定义好的一组图片，类似于电影播放。对应于AnimationDrawable类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
FILE LOCATION:
    res/drawable/filename.xml
    The filename will be used as the resource ID.
COMPILED RESOURCE DATATYPE:
    Resource pointer to an AnimationDrawable.
RESOURCE REFERENCE:
    In Java: R.drawable.filename
    In XML: @[package:]drawable.filename
  
文件位置:
  res /drawable/ filename.xml
  文件名将用作资源ID。
编制资源数据类型:
  指向AnimationDrawable的资源指针。
资源引用:
  在Java: R.drawable.filename
  在XML: @包:drawable.filename

语法；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot=["true" | "false"] >
  
  <--<animation-list>标签用来包含逐帧动画的每一帧-->
  <--android:oneshot 若为true，只播放一次。否则会循环播放。-->
  
    <item
        android:drawable="@[package:]drawable/drawable_resource_name"  // 当前帧对应的drawable资源
        android:duration="integer"                                     // 显示该帧的时间，单位为毫秒。
    />
    
</animation-list>

示例；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">

    <item
        android:drawable="@drawable/img1"
        android:duration="1000" />
    <item
        android:drawable="@drawable/img2"
        android:duration="1000" />
    <item
        android:drawable="@drawable/img1"
        android:duration="1000" />
    <item
        android:drawable="@drawable/img2"
        android:duration="1000" />

</animation-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 动态创建
AnimationDrawable animationDrawable = new AnimationDrawable();
animationDrawable.addFrame(getResources().getDrawable(R.drawable.img1), 1000);
animationDrawable.addFrame(getResources().getDrawable(R.drawable.img2), 1000);
animationDrawable.addFrame(getResources().getDrawable(R.drawable.img1), 1000);
animationDrawable.addFrame(getResources().getDrawable(R.drawable.img2), 1000);
animationDrawable.setOneShot(true);
iv.setImageDrawable(animationDrawable);
animationDrawable.start();
  
// 静态创建
// iv.setImageResource(R.drawable.anim_frame);
// AnimationDrawable animationDrawable = (AnimationDrawable) iv.getDrawable();
// animationDrawable.start();

示例2：

guide_star_anim
1
2
3
4
5
6
7
8
9
10
11
12
13
<?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/img_guide_star_1" android:duration="2000"/>
    <item android:drawable="@drawable/img_guide_star_2" android:duration="2000"/>
    <item android:drawable="@drawable/img_guide_star_3" android:duration="2000"/>
    <item android:drawable="@drawable/img_guide_star_3" android:duration="2000"/>
    <item android:drawable="@drawable/img_guide_star_5" android:duration="2000"/>
    <item android:drawable="@drawable/img_guide_star_4" android:duration="2000"/>
    <item android:drawable="@drawable/img_guide_star_5" android:duration="2000"/>

</animation-list>
layout_pager_guide_1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_guide_star"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/guide_star_anim" />

    <TextView
        android:id="@+id/tv_guide_star"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="@string/text_guide_pager_1"
        android:textSize="20sp" />

</LinearLayout>

...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
private View view1,view2,view3;
// 三个页面
view1 = View.inflate(this, R.layout.layout_pager_guide_1, null);
view2 = View.inflate(this, R.layout.layout_pager_guide_2, null);
view3 = View.inflate(this, R.layout.layout_pager_guide_3, null);

//帧动画
iv_guide_star = view1.findViewById(R.id.iv_guide_star);
iv_guide_night = view2.findViewById(R.id.iv_guide_night);
iv_guide_smile = view3.findViewById(R.id.iv_guide_smile);
//播放帧动画，三个页面，每个页面有多个图片顺序播放。
AnimationDrawable animStar = (AnimationDrawable) iv_guide_star.getBackground();
animStar.start();
AnimationDrawable animNight = (AnimationDrawable) iv_guide_night.getBackground();
animNight.start();
AnimationDrawable animSmile= (AnimationDrawable) iv_guide_smile.getBackground();
animSmile.start();

备注

欢迎关注微信公众号：非也缘也