逐帧动画是一种常见的动画形式,原理就是在“连续的关键帧”中分解动画制作,使其连续播放而成动画。
废话说太多不好,还是直接上代码吧。
第一步:在res/drawable下添加图片资源
第二步:在res/drawable下新建xml文件,位置不要弄错了。
这里新建了两个动画布局文件,分别为animation,animation2具体代码如下
animation为按正序播放动画
<?xml version="1.0" encoding="utf-8"?> <!-- 根标签为animation-list 其中oneshot设置为true代表动画只播放一遍,设置为false会循环播放动画 通过item标签对来声明动画中的图片资源 android:duration 表示展示所用的该图片的时间长度 --> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false" > <item android:drawable="@drawable/pika1" android:duration="100" /> <item android:drawable="@drawable/pika2" android:duration="100" /> <item android:drawable="@drawable/pika3" android:duration="100" /> <item android:drawable="@drawable/pika4" android:duration="100" /> <item android:drawable="@drawable/pika5" android:duration="100" /> <item android:drawable="@drawable/pika6" android:duration="100" /> </animation-list>
animation2为倒序播放动画(其实就是item中的图片资源倒序排列而已)
<?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/pika6" android:duration="100" /> <item android:drawable="@drawable/pika5" android:duration="100" /> <item android:drawable="@drawable/pika4" android:duration="100" /> <item android:drawable="@drawable/pika3" android:duration="100" /> <item android:drawable="@drawable/pika2" android:duration="100" /> <item android:drawable="@drawable/pika1" android:duration="100" /> </animation-list>
第三步:将动画布局文件赋给主页面布局文件中的图片控件(一切从简)
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:orientation="vertical" tools:context="com.example.thinkpad.animation.MainActivity"> <ImageView android:id="@+id/animationIV" android:layout_width="100dp" android:layout_height="100dp" android:padding="5px" android:layout_gravity="center_horizontal" android:src="@drawable/animation"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_marginTop="50dp"> <Button android:id="@+id/buttonA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5px" android:text="顺序显示" android:layout_marginLeft="10dp"/> <Button android:id="@+id/buttonB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5px" android:text="停止" android:layout_marginLeft="50dp"/> <Button android:id="@+id/buttonC" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5px" android:text="倒序显示" android:layout_marginLeft="50dp"/> </LinearLayout> </LinearLayout>
第四步:主Activity中调用动画
public class MainActivity extends Activity { private ImageView animationIV; private Button buttonA,buttonB,buttonC; private AnimationDrawable animationDrawable; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); } private void init() { animationIV = (ImageView) findViewById(R.id.animationIV); buttonA = (Button) findViewById(R.id.buttonA); buttonB = (Button) findViewById(R.id.buttonB); buttonC = (Button) findViewById(R.id.buttonC); buttonA.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { animationIV.setImageResource(R.drawable.animation); animationDrawable = (AnimationDrawable)animationIV.getDrawable(); animationDrawable.start(); } }); buttonB.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub animationDrawable = (AnimationDrawable) animationIV.getDrawable(); animationDrawable.stop(); } }); buttonC.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub animationIV.setImageResource(R.drawable.animation2); animationDrawable = (AnimationDrawable) animationIV.getDrawable(); animationDrawable.start(); } }); }