基于OPhone 2.0的2D动画实践（三）
OPhone平台开发, 2010-10-19 14:12:28
标签 : 动画 2D OPhone2.0
本系列文章主要介绍了OPhone 2.0 SDK提供的两种实现2D动画的方式：帧动画和补间动画。文章的每个知识点都提供了精彩的实例以向读者展示2D动画的具体实现方法。通过对本系列文章的学习，读者可利用2D动画实现非常绚丽的界面效果。
旋转补间动画
通过<rotate>标签可以定义旋转补间动画。下面的代码定义了一个标准的旋转补间动画。
view plaincopy to clipboardprint?
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@anim/linear_interpolator" android:fromDegrees="0"
android:toDegrees="360" android:pivotX="50%" android:pivotY="50%"
android:duration="10000" android:repeatMode="restart" android:repeatCount="infinite"/>
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@anim/linear_interpolator" android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:duration="10000" android:repeatMode="restart" android:repeatCount="infinite"/>
其中<rotate>标签有两个特殊的属性。它们的含义如下：
android:fromDegrees：表示旋转的起始角度。
android:toDegrees：表示旋转的结束角度。
在<rotate>标签中还使用如下两个属性设置旋转的次数和模式。
android:repeatCount：设置旋转的次数。该属性需要设置一个整数值。如果该值为0，表示不重复显示动画。也就是说，对于上面的旋转补间动画，只从0度旋转到360度，动画就会停止。如果属性值大于0，动画会再次显示该属性指定的次数。例如，如果android:repeatCount属性值为1。动画除了正常显示一次外，还会再显示一次。也就是说，前面的旋转补间动画会顺时针自转两周。如果想让补间动画永不停止，可以将android:repeatCount属性值设为"infinite"或-1。该属性的默认值是0。
android:repeatMode：设置重复的模式。默认值是restart。该属性只有当android:repeatCount设置成大于0的数或infinite才起作用。android:repeatMode属性值除了可以是restart外，还可以设为reverse，表示偶数次显示动画时会做与动画文件定义的方向相反的动作。例如，上面定义的旋转补间动画会在第1、3、5、...、2n - 1圈顺时针旋转，而在2、4、6、...、2n圈逆时针旋转。如果想使用Java代码来设置该属性，可以使用Animation类的setRepeatMode方法。该方法只接收一个int类型参数。可取的值是Animation.RESTART和Animation.REVERSE。
如果想通过Java代码实现旋转补间动画，可以创建android.view.animation.RotateAnimation对象。RotateAnimation类构造方法的定义如下：
view plaincopy to clipboardprint?
public RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY);
public RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY);
通过RotateAnimation类的构造方法可以设置旋转开始角度（fromDegrees）、旋转结束角度（toDegrees）、旋转支点横坐标（pivotX）和旋转支点纵坐标（pivotY）。
旋转补间动画实例
本例实现了两颗行星绕着一颗恒星旋转的效果。其中恒星会顺时针和逆时针交替旋转（android:repeatMode属性值为reverse）。效果如图1所示。
图1 旋转的星系
两颗行星和一颗恒星分别对应于一个动画文件。行星对应的两个动画文件的内容如下：
view plaincopy to clipboardprint?
hesper.xml
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@anim/linear_interpolator" android:fromDegrees="0"
android:toDegrees="360" android:pivotX="200%" android:pivotY="300%"
android:duration="5000" android:repeatMode="restart" android:repeatCount="infinite"/>
hesper.xml <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@anim/linear_interpolator" android:fromDegrees="0" android:toDegrees="360" android:pivotX="200%" android:pivotY="300%" android:duration="5000" android:repeatMode="restart" android:repeatCount="infinite"/>
view plaincopy to clipboardprint?
earth.xml
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@anim/linear_interpolator" android:fromDegrees="0"
android:toDegrees="360" android:pivotX="200%" android:pivotY="300%"
android:duration="10000" android:repeatMode="restart" android:repeatCount="infinite"/>
earth.xml <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@anim/linear_interpolator" android:fromDegrees="0" android:toDegrees="360" android:pivotX="200%" android:pivotY="300%" android:duration="10000" android:repeatMode="restart" android:repeatCount="infinite"/>
恒星对应的动画文件的内容如下：
view plaincopy to clipboardprint?
sun.xml
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@anim/linear_interpolator" android:fromDegrees="0"
android:toDegrees="360" android:pivotX="50%" android:pivotY="50%"
android:duration="20000" android:repeatMode="reverse" android:repeatCount="infinite"/>
sun.xml <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@anim/linear_interpolator" android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:duration="20000" android:repeatMode="reverse" android:repeatCount="infinite"/>
本例的主程序相对简单，只需要装载这3个动画文件，并开始动画即可，代码如下：
view plaincopy to clipboardprint?
package net.blogjava.mobile;
import android.app.Activity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
public class Main extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView ivEarth = (ImageView) findViewById(R.id.ivEarth);
ImageView ivHesper = (ImageView) findViewById(R.id.ivHesper);
ImageView ivSun = (ImageView) findViewById(R.id.ivSun);
Animation earthAnimation = AnimationUtils.loadAnimation(this,R.anim.earth);
Animation hesperAnimation = AnimationUtils.loadAnimation(this,R.anim.hesper);
Animation sunAnimation = AnimationUtils.loadAnimation(this, R.anim.sun);
ivEarth.startAnimation(earthAnimation);
ivHesper.startAnimation(hesperAnimation);
ivSun.startAnimation(sunAnimation);
}
}
package net.blogjava.mobile; import android.app.Activity; import android.os.Bundle; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.ImageView; public class Main extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ImageView ivEarth = (ImageView) findViewById(R.id.ivEarth); ImageView ivHesper = (ImageView) findViewById(R.id.ivHesper); ImageView ivSun = (ImageView) findViewById(R.id.ivSun); Animation earthAnimation = AnimationUtils.loadAnimation(this,R.anim.earth); Animation hesperAnimation = AnimationUtils.loadAnimation(this,R.anim.hesper); Animation sunAnimation = AnimationUtils.loadAnimation(this, R.anim.sun); ivEarth.startAnimation(earthAnimation); ivHesper.startAnimation(hesperAnimation); ivSun.startAnimation(sunAnimation); } }
透明度补间动画
通过<alpha>标签可以定义透明度补间动画。下面的代码定义了一个标准的透明度补间动画。
view plaincopy to clipboardprint?
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromAlpha="1.0" android:toAlpha="0.1" android:duration="2000" />
<alpha xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:fromAlpha="1.0" android:toAlpha="0.1" android:duration="2000" />
其中android:fromAlpha和android:toAlpha属性分别表示起始透明度和结束透明度。这两个属性的值都在0.0和1.0之间。属性值为0.0表示完全透明，属性值为1.0表示完全不透明。
如果想通过Java代码实现透明度补间动画，可以创建android.view.animation.AlphaAnimation对象。AlphaAnimation类构造方法的定义如下：
view plaincopy to clipboardprint?
public AlphaAnimation(float fromAlpha, float toAlpha);
public AlphaAnimation(float fromAlpha, float toAlpha);
通过AlphaAnimation类的构造方法可以设置起始透明度（fromAlpha）和结束透明度（toAlpha）
透明度补间动画实例
本例将前面介绍的多种动画效果进行结合实现了投掷炸1弹，并爆炸的特效。在本例中采用的动画类型有帧动画、移动补间动画、缩放补间动画和透明度补间动画。
其中使用了帧动画播放了一个爆炸的GIF动画；使用移动补间动画实现了炸1弹被投下仍然会向前移动的偏移效果；缩放补间动画实现了当炸1弹被投下时逐渐缩小的效果。透明度补间动画实现了炸1弹被投下时逐渐模糊的效果。当运行本例后，会在屏幕下方正中间显示一个炸1弹，如图2所示。然后触摸这个炸1弹，炸1弹开始投掷，逐渐变小和模糊，如图3所示。当炸1弹变得很小、很模糊时，会播放GIF动画来显示爆炸效果，并播放爆炸的声音。如图4所示。
图2 初始状态的炸1弹
图3 炸1弹逐渐变小和模糊
图4 炸1弹爆炸的效果
本例的实现代码如下：
view plaincopy to clipboardprint?
package net.blogjava.mobile;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Animation.AnimationListener;
import android.widget.ImageView;
public class Main extends Activity implements OnTouchListener,AnimationListener
{
private ImageView ivMissile;
private MyImageView ivBlast;
private AnimationDrawable animationDrawable;
private Animation missileAnimation;
@Override
public boolean onTouch(View view, MotionEvent event)
{
// 触摸炸1弹后，开始播放动画
ivMissile.startAnimation(missileAnimation);
return false;
}
@Override
public void onAnimationEnd(Animation animation)
{
// 在播放投掷炸1弹动画结束后，显示MyImageView组件，并将显示炸1弹的ImageView组件隐藏
ivBlast.setVisibility(View.VISIBLE);
ivMissile.setVisibility(View.INVISIBLE);
try
{
// 开始播放爆炸的声音
MediaPlayer mediaPlayer = MediaPlayer.create(this, R.raw.bomb);
mediaPlayer.stop();
mediaPlayer.prepare();
mediaPlayer.start();
}
catch (Exception e)
{
}
animationDrawable.stop();
// 播放爆炸效果动画
animationDrawable.start();
}
@Override
public void onAnimationRepeat(Animation animation)
{
}
@Override
public void onAnimationStart(Animation animation)
{
}
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ivMissile = (ImageView) findViewById(R.id.ivMissile);
ivMissile.setOnTouchListener(this);
ivBlast = (MyImageView) findViewById(R.id.ivBlast);
ivBlast.setBackgroundResource(R.anim.blast);
Object backgroundObject = ivBlast.getBackground();
animationDrawable = (AnimationDrawable) backgroundObject;
ivBlast.animationDrawable = animationDrawable;
missileAnimation = AnimationUtils.loadAnimation(this, R.anim.missile);
missileAnimation.setAnimationListener(this);
// 在程序启动后，将显示爆炸效果的MyImageView组件隐藏
ivBlast.setVisibility(View.INVISIBLE);
ivBlast.ivMissile = ivMissile;
}
}
package net.blogjava.mobile; import android.app.Activity; import android.graphics.drawable.AnimationDrawable; import android.media.MediaPlayer; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.view.animation.Animation.AnimationListener; import android.widget.ImageView; public class Main extends Activity implements OnTouchListener,AnimationListener { private ImageView ivMissile; private MyImageView ivBlast; private AnimationDrawable animationDrawable; private Animation missileAnimation; @Override public boolean onTouch(View view, MotionEvent event) { // 触摸炸1弹后，开始播放动画 ivMissile.startAnimation(missileAnimation); return false; } @Override public void onAnimationEnd(Animation animation) { // 在播放投掷炸1弹动画结束后，显示MyImageView组件，并将显示炸1弹的ImageView组件隐藏 ivBlast.setVisibility(View.VISIBLE); ivMissile.setVisibility(View.INVISIBLE); try { // 开始播放爆炸的声音 MediaPlayer mediaPlayer = MediaPlayer.create(this, R.raw.bomb); mediaPlayer.stop(); mediaPlayer.prepare(); mediaPlayer.start(); } catch (Exception e) { } animationDrawable.stop(); // 播放爆炸效果动画 animationDrawable.start(); } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationStart(Animation animation) { } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ivMissile = (ImageView) findViewById(R.id.ivMissile); ivMissile.setOnTouchListener(this); ivBlast = (MyImageView) findViewById(R.id.ivBlast); ivBlast.setBackgroundResource(R.anim.blast); Object backgroundObject = ivBlast.getBackground(); animationDrawable = (AnimationDrawable) backgroundObject; ivBlast.animationDrawable = animationDrawable; missileAnimation = AnimationUtils.loadAnimation(this, R.anim.missile); missileAnimation.setAnimationListener(this); // 在程序启动后，将显示爆炸效果的MyImageView组件隐藏 ivBlast.setVisibility(View.INVISIBLE); ivBlast.ivMissile = ivMissile; } }
总结
本文主要介绍了旋转补间动画和透明度补间动画。通过将四种补间动画结合使用，可以实现非常有趣的动画效果。
作者介绍
李宁，东北大学计算机专业硕士，拥有超过10年的软件开发经验。曾任国内某知名企业项目经理；目前担任eoeandroid和ophonesdn版主；中国移动开发者社区OPhone专家；51CTO客作专家；CSDN博客专家。曾领导并参与开发了多个大中型项目。目前主要从事Android及其相关产品的研发。从2005年进入写作领域以来，为《程序员》、《电脑编程技巧与维护》、《电脑报》、IT168、天极网等平面媒体和网络媒体撰写了一百多篇原创技术和评论文章。并在个人blog（http://nokiaguy.blogjava.net）上发表了大量的原创技术文章。2007年获《电脑编程技巧与维护》优秀作者。2009年获得OPhone征文大赛二等奖。个人著作：《Android/OPhone开发完全讲义》、《人人都玩开心网：Ext JS+Android+SSH整合开发Web与移动SNS》、《Java Web开发速学宝典》。
扫一扫
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
