一 前言
对于帧动画来讲,每张图片就是一个帧,把众多的帧组合在一起就是一个动画,其实其本质就是在极短的时间,依次展示N张图片,由于时间非常短,在视角效果上这些图片就像连在一起,组合成了动画,像电影一样,帧动画使用起来非常简单,有手机的都知道,在信号不稳定的时候,WIFI标志时刻在变化着,形成不间断的动画,下面使用一个示例简单的模仿下这个过程。
二 帧动画实现
1 建立xml文件
在res/drawable分别建立如下文件:
animation_frame_sequence.xml:
<?xml version="1.0" encoding="utf-8"?> <!-- 根标签为animation-list,其中oneshot代表着是否只展示一遍,设置为false会不停的循环播放动画 根标签下,通过item标签对动画中的每一个图片进行声明 android:duration 表示展示所用的该图片的时间长度 --> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true" > <item android:drawable="@mipmap/icon_1" android:duration="500"/> <item android:drawable="@mipmap/icon_2" android:duration="500"/> <item android:drawable="@mipmap/icon_3" android:duration="500"/> <item android:drawable="@mipmap/icon_4" android:duration="500"/> <item android:drawable="@mipmap/icon_5" android:duration="500"/> <item android:drawable="@mipmap/icon_6" android:duration="500"/> </animation-list>
animation_frame_inverted.xml:
<?xml version="1.0" encoding="utf-8"?> <!-- 根标签为animation-list,其中oneshot代表着是否只展示一遍,设置为false会不停的循环播放动画 <?xml version="1.0" encoding="utf-8"?> <!-- 根标签为animation-list,其中oneshot代表着是否只展示一遍,设置为false会不停的循环播放动画 根标签下,通过item标签对动画中的每一个图片进行声明 android:duration 表示展示所用的该图片的时间长度 --> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true" > <item android:drawable="@mipmap/icon_6" android:duration="500"/> <item android:drawable="@mipmap/icon_5" android:duration="500"/> <item android:drawable="@mipmap/icon_4" android:duration="500"/> <item android:drawable="@mipmap/icon_3" android:duration="500"/> <item android:drawable="@mipmap/icon_2" android:duration="500"/> <item android:drawable="@mipmap/icon_1" android:duration="500"/> </animation-list>
2 布局XML文件:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center_horizontal" android:orientation="vertical"> <ImageView android:id="@+id/animationIV" android:layout_width="200dp" android:layout_height="200dp" android:padding="5px" android:src="@drawable/animation_frame_sequence"/> <Button android:id="@+id/button_sequence" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5px" android:text="顺序显示" /> <Button android:id="@+id/button_inverted" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5px" android:text="倒序显示" /> <Button android:id="@+id/button_stop" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5px" android:text="停止" /> </LinearLayout>
3 Activity中使用xml
public class FrameTestActivity extends Activity implements View.OnClickListener { private ImageView animationIV; private AnimationDrawable animationDrawable; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_frame_test); animationIV = (ImageView) findViewById(R.id.animationIV); findViewById(R.id.button_sequence).setOnClickListener(this); findViewById(R.id.button_stop).setOnClickListener(this); findViewById(R.id.button_inverted).setOnClickListener(this); } @Override public void onClick(View view) { switch (view.getId()) { case R.id.button_sequence: animationIV.setImageResource(R.drawable.animation_frame_sequence); animationDrawable = (AnimationDrawable) animationIV.getDrawable(); animationDrawable.start(); break; case R.id.button_stop: animationDrawable = (AnimationDrawable) animationIV.getDrawable(); animationDrawable.stop(); break; case R.id.button_inverted: animationIV.setImageResource(R.drawable.animation_frame_inverted); animationDrawable = (AnimationDrawable) animationIV.getDrawable(); animationDrawable.start(); break; } } }
效果图: