Android 系列 5.13添加简单光栅动画

5.13添加简单光栅动画

问题

您需要向屏幕添加动画图像。

解

Android对用户界面动画有很好的支持;使用AnimationDrawable类很容易对图像进行排序。

讨论

要创建动画，首先使用图形程序生成要排序的图像。每个图像表示动画的一帧;图像通常将是相同的大小，每个帧之间的变化根据需要。

这个动画的技巧将顺序一些交通灯图像。图像可以使用开源矢量图形程序Inkscape（参见http://inkscape.org）生成。所使用图像的副本可从打开剪贴图库（http://www.openclipart.org/）获得;搜索“交通灯关闭”，选择图像，单击查看SVG按钮，并从浏览器保存该文件。然后在Inkscape中打开该文件。

动画将包括四个图像，显示在英国使用的交通灯的顺序：红色，红色和黄色，绿色，黄色和回到红色。 SVG图像具有所有可用的光 - 它们只是隐藏在半透明的圆圈后面。要生成第一个图像，请选择覆盖红灯的圆圈并将其删除。

然后从编辑菜单中使用全选以突出显示整个图像。使用文件菜单，选择导出位图。在“导出位图”对话框中的“位图大小”下，在“高度”框中输入150，然后为要生成的文件选择目录和文件名，例如red.png。单击导出按钮导出位图。删除覆盖黄灯的圆圈，再次单击全选，然后像以前一样导出到文件;例如，red_yellow.png。使用编辑菜单并选择撤消（两次）以覆盖红色光和黄色光，然后删除覆盖绿色光的圆。导出到green.png。再次使用undo覆盖绿灯并删除覆盖黄灯的圆。将位图导出到yellow.png（见图5-22）。

图5-22。导出位图对话框

四个文件现在准备好动画。

启动Android项目。将四个生成的文件复制到res / drawable目录中。动画列表需要在同一目录中定义。在res / drawable中创建一个名为uktrafficlights.xml的新文件。在这个新文件中添加以下内容：

<?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/red" android:duration="2000" />
<item android:drawable="@drawable/red_yellow" android:duration="2000" />
<item android:drawable="@drawable/green" android:duration="2000" />
<item android:drawable="@drawable/yellow" android:duration="2000" />
</animation-list>

这将按动画的顺序列出要动画化的图像，并显示每个需要显示的时间（以毫秒为单位）。如果动画在运行图像后需要停止，则属性android：oneshot设置为true。

在程序的布局文件中，添加了一个ImageView，其源代码为@ drawable / uktrafficlights（即指向创建的文件）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView android:id="@+id/imageView1"
android:src="@drawable/uktrafficlights"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</LinearLayout>

在Activity类中，声明了一个AnimationDrawable（执行动画的Android类）。在onCreate它被分配给ImageView使用的Drawable。最后，通过调用AnimationDrawable start（）方法启动动画（如果需要，有一个stop（）方法可用于结束动画）。在onWindowFocusChanged中调用start方法，以确保在动画开始之前所有内容都已加载（可以很容易地使用按钮或其他类型的输入启动）。例5-21显示了主活动的代码。

实施例5-21。主要活动

public class main extends Activity {
AnimationDrawable lightsAnimation;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView lights = (ImageView) findViewById(R.id.imageView1);
lightsAnimation=(AnimationDrawable) lights.getDrawable();
}
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
lightsAnimation.start();
}
}

图像动画可以是有用的，以增加屏幕的兴趣，可以用于游戏或卡通。