- 浏览: 1026404 次
文章分类
最新评论
-
libufengiam:
很好很强大,报错不能用。
network: Android 网络判断(wifi、3G与其他) -
kome2000:
这代码 没效率啊!到是能用!o(︶︿︶)o 唉
使用Matrix对bitmap的旋转和镜像水平垂直翻转 -
javadeveloped:
《Ext JS权威指南》一书的源代码下载地址 -
javadeveloped:
《Ext JS权威指南》一书的源代码下载地址 -
javadeveloped:
[color=red]就开了[/color]
《Ext JS权威指南》一书的源代码下载地址
OPhone 2D UI 动画教程之一——Animation介绍
在本系列教程中将介绍OPhone中提供的2D UI 动画(Animation),利用OPhone提供的动画功能可以很容易的创建各种UI动画效果,恰当的使用不同的动画组合可以使我们的程序更加招人喜爱。
OPhone 2D UI动画概述
在前面的《OPhone平台SurfaceView教程》中介绍了如何使用SurfaceView来创建一个现实GIF动画的自定义View,虽然OPhone不支持GIF动画显示但是OPhone却提供了其他动画效果。目前OPhone中提供了三种动画效果:逐帧动画(frame-by-frame animation),这种动画和GIF一样,一帧一帧的显示来组成动画效果;布局动画(layout animation),这种动画用来设置layout内的所有UI控件;控件动画(view animation),这种是应用到具体某个view上的动画。
在这三种动画实现中逐帧动画是最简单的,而控件动画是有点复杂的,要涉及到线性代数中的矩阵运算,下面就由易到难逐个介绍,先来看看逐帧动画如何实现。
逐帧动画
逐帧动画是通过OPhone中的android.graphics.drawable.AnimationDrawable类来实现的,在该类中保存了帧序列以及显示的时间,为了简化动画的创建OPhone提供了一种通过XML来创建逐帧动画的方式,这样把动画的创建和代码分来以后如果需要修改动画内容,只需要修改资源文件就可以了不用修改代码,简化开发维护工作。在res/drawable/文件夹下创建一个XML文件,下面是一个示例文件(res/drawable/qq_animation.xml):
- <animation-list
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:oneshot="false">
- <itemandroid:drawable="@drawable/qq001"android:duration="80"/>
- <itemandroid:drawable="@drawable/qq002"android:duration="80"/>
- <itemandroid:drawable="@drawable/qq003"android:duration="80"/>
- <itemandroid:drawable="@drawable/qq004"android:duration="80"/>
- <itemandroid:drawable="@drawable/qq005"android:duration="80"/>
- <itemandroid:drawable="@drawable/qq006"android:duration="80"/>
- <itemandroid:drawable="@drawable/qq007"android:duration="80"/>
- <itemandroid:drawable="@drawable/qq008"android:duration="80"/>
- </animation-list>
在上面的定义中通过animation-list来指定这是个AnimationDrawable动画定义,里面的item来指定每帧图片和显示时间(单位为毫秒),帧显示的顺序就是item定义的顺序。如果android:oneshot设置为true表明该动画只播放一次,否则该动画会循环播放。这些设置也可以通过AnimationDrawable提供的函数来设置。动画中引用的文件为QQ表情文件,包含在示例项目代码中。
然后在layout中定义一个ImageView来显示上面定义的AnimationDrawable,layout代码如下(res/layout/main.xml):
- <?xmlversion="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/animation_view"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:src="@drawable/qq_animation"/>
- <Button
- android:id="@+id/animation_btn"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:text="@string/start_animation"/>
- <Button
- android:id="@+id/one_shot_btn"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:text="@string/play_once"/>
- </LinearLayout>
注意这里的ImageView 通过android:src="@drawable/qq_animation"引用了前面定义的AnimationDrawable,下面是两个按钮用来控制播放动画和设置AnimationDrawable的oneshot属性。
下面就是控制动画播放的类代码(src/org/goodev/animation/AnimActivity.java):
下面就是控制动画播放的类代码(src/org/goodev/animation/AnimActivity.java):
- publicclassAnimActivityextendsActivity{
- /**Calledwhentheactivityisfirstcreated.*/
- AnimationDrawablemAd;
- ButtonmPlayBtn;
- ButtonmOneShotBtn;
- booleanmIsOneShot;
- @Override
- publicvoidonCreate(BundlesavedInstanceState){
- super.onCreate(savedInstanceState);
- setContentView(R.layout.main);
- ImageViewiv=(ImageView)findViewById(R.id.animation_view);
- mAd=(AnimationDrawable)iv.getDrawable();
- mPlayBtn=(Button)findViewById(R.id.animation_btn);
- mPlayBtn.setOnClickListener(newOnClickListener(){
- @Override
- publicvoidonClick(Viewview){
- startAnimation();
- }
- });
- mOneShotBtn=(Button)findViewById(R.id.one_shot_btn);
- mOneShotBtn.setOnClickListener(newOnClickListener(){
- @Override
- publicvoidonClick(Viewview){
- if(mIsOneShot){
- mOneShotBtn.setText("PlayOnce");
- }else{
- mOneShotBtn.setText("PlayRepeatly");
- }
- mAd.setOneShot(!mIsOneShot);
- mIsOneShot=!mIsOneShot;
- }
- });
- }
- /**
- *通过AnimationDrawable的start函数播放动画,
- *stop函数停止动画播放,
- *isRunning来判断动画是否正在播放。
- */
- publicvoidstartAnimation(){
- if(mAd.isRunning()){
- mAd.stop();
- }else{
- mAd.stop();
- mAd.start();
- }
- }
- }
程序截图:
点击Start Animation按钮来播放动画,点击Play Once来交替设置是循环播放还是只播放一次。
关于AnimationDrawable的其他信息请参考AnimationDrawable文档,这里就不在赘述。
布局动画介绍
布局动画和逐帧动画是由本质的不同的,逐帧动画是一帧帧图片组成的,而布局动画是渐变动画,OPhone通过改变UI的属性(大小、位置、透明度等)来实现动画效果。
在OPhone显示系统中,每个view都对应一个矩阵来控制该view显示的位置,通过不同的方式来改变该控制矩阵就可以实现动画效果,例如旋转、移动、缩放等。
不同的矩阵变换有不同的类来实现,android.view.animation.Animation类代表所有动画变换的基类,目前在OPhone系统中有如下五个实现(都位于android.view.animation包中):
- lAlphaAnimation:实现alpha渐变,可以使界面逐渐消失或者逐渐显现
- lTranslateAnimation:实现位置移动渐变,需要指定移动的开始和结束坐标
- lScaleAnimation: 实现缩放渐变,可以指定缩放的参考点
- lRotateAnimation:实现旋转渐变,可以指定旋转的参考点,默认值为(0,0)左上角。
- lAnimationSet: 代表上面的渐变组合
有一个和渐变动画效果关系比较密切的类android.view.animation.Interpolator,该类定义了渐变动画改变的速率,可以设置为加速变化、减速变化或者重复变化。关于Interpolator详细信息请参考文档介绍。另外在OPhone SDK中的android.jar文件中也有各种interpolator的定义,感兴趣的可以参考android.jar中的/res/anim目录中的文件。
动画的实现及应用
上面这些渐变方式也可以在XML文件中定义,这些文件位于res/anim目录下。根元素为set代表AnimationSet,里面可以有多个渐变定义,如下是alpha渐变的定义(res/anim/alpha_anim.xml):
- <setxmlns:android="http://schemas.android.com/apk/res/android"
- android:interpolator="@android:anim/decelerate_interpolator">
- <alpha
- android:fromAlpha="0.0"
- android:toAlpha="1.0"
- android:duration="1000"/>
- </set>
如果只定义一种渐变效果,则可以去除set元素,如下:
- <alpha
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:interpolator="@android:anim/accelerate_interpolator"
- android:fromAlpha="0.0"
- android:toAlpha="1.0"
- android:duration="1000"/>
上面定义的alpha从0(透明)到1(不透明)渐变,渐变时间为1000毫秒。
- <scale
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:interpolator="@android:anim/accelerate_interpolator"
- android:fromXScale="1"
- android:toXScale="1"
- android:fromYScale="0.1"
- android:toYScale="1.0"
- android:duration="500"
- android:pivotX="50%"
- android:pivotY="50%"
- android:startOffset="100"/>
上面是一个缩放渐变的定义,from... 和 to... 分别定义缩放渐变的开始和结束的缩放倍数,上面定义X轴都为1不缩放,而Y轴从0.1到1逐渐放大(开始高度为正常大小的0.1然后逐渐放大到正常大小)。缩放持续的时间为500毫秒,缩放的中心点(通过pivotX,pivotY定义)在控件的中间位置。startOffset指定了在缩放开始前等待的时间。
- <rotate
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:interpolator="@android:anim/accelerate_interpolator"
- android:fromDegrees="0.0"
- android:toDegrees="360"
- android:pivotX="50%"
- android:pivotY="50%"
- android:duration="500"/>
上面定义了旋转变换,从0度变化到360度(旋转一周),时间为500毫秒,变换的中心点位控件的中心位置。
- <translate
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:interpolator="@android:anim/accelerate_interpolator"
- android:fromYDelta="-100%"
- android:toYDelta="0"
- android:duration="500"/>
上面定义了位置变换,实现一种下落的效果。
把上面不同的定义放到set中就可以实现不同的组合动画效果了,下面的示例实现了控件在下落的过程中逐渐显示的效果(res/anim/translate_alpha_anim.xml):
- <setxmlns:android="http://schemas.android.com/apk/res/android"
- android:interpolator="@android:anim/decelerate_interpolator">
- <translate
- android:fromYDelta="-100%"
- android:toYDelta="0"
- android:duration="500"/>
- <alpha
- android:fromAlpha="0.0"
- android:toAlpha="1.0"
- android:duration="500"/>
- </set>
要把上面定义的动画效果应用的layout中,就要使用另外一个类:android.view.animation.LayoutAnimationController。该类把指定的效果应用到layout中的每个控件上去,使用layoutAnimation元素在xml文件中定义
- LayoutAnimationController,该文件同样位于res/anim/目录下,下面是一个示例(res/anim/layout_anim_ctrl.xml):
- <layoutAnimation
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:delay="30%"
- android:animationOrder="reverse"
- android:animation="@anim/translate_alpha_anim"/>
上面通过animation指定了使用哪个动画(通过修改该值可以测试不同的动画效果),animationOrder指定了通过逆序的方式应用动画(在垂直的LinearLayout中就是从下往上逐个控件应用),delay指定了layout中的每个控动画的延时时间为动画持续总时间的30%。
定义好LayoutAnimationController后就可以在Layout中使用了,这里使用一个ListView做演示,布局代码如下:
- <?xmlversion="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">
- <ListView
- android:id="@+id/list"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:persistentDrawingCache="animation|scrolling"
- android:layoutAnimation="@anim/layout_anim_ctrl"/>
- </LinearLayout>
上面的代码中通过layoutAnimation指定了前面定义的LayoutAnimationController,为了使动画效果比较流畅这里还通过persistentDrawingCache设置了控件的绘制缓存策略,一共有4中策略:
PERSISTENT_NO_CACHE说明不在内存中保存绘图缓存;
PERSISTENT_ANIMATION_CACHE说明只保存动画绘图缓存;
PERSISTENT_SCROLLING_CACHE说明只保存滚动效果绘图缓存
PERSISTENT_ALL_CACHES说明所有的绘图缓存都应该保存在内存中。
在Activity中并没有什么变化,代码如下(src/org/goodev/animation/ListActivity.java):
- publicclassListActivityextendsActivity{
- String[]mListItems=
- {"Item1","Item2","Item3","Item4","Item5"};
- @Override
- publicvoidonCreate(BundlesavedInstanceState){
- super.onCreate(savedInstanceState);
- setContentView(R.layout.list);
- ArrayAdapter<String>listItemAdapter=
- newArrayAdapter<String>(this,
- android.R.layout.simple_list_item_1,mListItems);
- ListViewlv=(ListView)this.findViewById(R.id.list);
- lv.setAdapter(listItemAdapter);
- }
- }
控件动画介绍
其实控件动画也是布局动画的一种,可以看做是自定义的动画实现,布局动画在XML中定义OPhone已经实现的几个动画效果(AlphaAnimation、TranslateAnimation、ScaleAnimation、RotateAnimation)而控件动画就是在代码中继承android.view.animation.Animation类来实现自定义效果。
控件动画实现
通过重写Animation的applyTransformation(float interpolatedTime, Transformation t)函数来实现自定义动画效果,另外一般也会实现initialize(int width, int height, int parentWidth, int parentHeight)函数,这是一个回调函数告诉Animation目标View的大小参数,在这里可以初始化一些相关的参数,例如设置动画持续时间、设置Interpolator、设置动画的参考点等。
OPhone在绘制动画的过程中会反复的调用applyTransformation函数,每次调用参数interpolatedTime值都会变化,该参数从0渐变为1,当该参数为1时表明动画结束。通过参数Transformation 来获取变换的矩阵(matrix),通过改变矩阵就可以实现各种复杂的效果。关于矩阵的详细信息可以参考android.graphics.Matrix的API文档(http://androidappdocs-staging.appspot.com/reference/android/graphics/Matrix.html)。
下面来看一个简单的实现:
- classViewAnimationextendsAnimation{
- publicViewAnimation(){
- }
- @Override
- publicvoidinitialize(intwidth,intheight,intparentWidth,intparentHeight){
- super.initialize(width,height,parentWidth,parentHeight);
- setDuration(2500);
- setFillAfter(true);
- setInterpolator(newLinearInterpolator());
- }
- @Override
- protectedvoidapplyTransformation(floatinterpolatedTime,
- Transformationt){
- finalMatrixmatrix=t.getMatrix();
- matrix.setScale(interpolatedTime,interpolatedTime);
- }
- }
上面的代码很简单,在initialize函数中设置变换持续的时间2500毫秒,然后设置Interpolator为LinearInterpolator并设置FillAfter为true这样可以在动画结束的时候保持动画的完整性。在applyTransformation函数中通过MatrixsetScale函数来缩放,该函数的两个参数代表X、Y轴缩放因子,由于interpolatedTime是从0到1变化所在这里实现的效果就是控件从最小逐渐变化到最大。调用View的startAnimation函数(参数为Animation)就可以使用自定义的动画了。代码如下(src/org/goodev/animation/ViewAnimActivity.java):
- publicclassViewAnimActivityextendsActivity{
- ButtonmPlayBtn;
- ImageViewmAnimImage;
- @Override
- publicvoidonCreate(BundlesavedInstanceState){
- super.onCreate(savedInstanceState);
- setContentView(R.layout.view_anim_layout);
- mAnimImage=(ImageView)this.findViewById(R.id.anim_image);
- mPlayBtn=(Button)findViewById(R.id.play_btn);
- mPlayBtn.setOnClickListener(newOnClickListener(){
- @Override
- publicvoidonClick(Viewview){
- mAnimImage.startAnimation(newViewAnimation());
- }
- });
- }
- }
布局代码如下(res/layout/view_anim_layout.xml):
- <?xmlversion="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"
- >
- <Button
- android:id="@+id/play_btn"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:text="StartAnimation"
- />
- <ImageView
- android:id="@+id/anim_image"
- android:persistentDrawingCache="animation|scrolling"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:src="@drawable/ophone"
- />
- </LinearLayout>
点击Start Animation按钮可以看到ImageView变化的效果,如下图所示:
图一:ImageView动画效果开始
图二:动画效果中间过程
图三:ImageView最终状态
从上图可以看到ImageView是从左上角出来的,这是由于没有指定矩阵的变换参考位置,默认位置为(0,0),如果要想让ImageView从中间出来,可以通过矩阵变换来把参考点移动到中间来,如下实现:
- classViewAnimationextendsAnimation{
- intmCenterX;//记录View的中间坐标
- intmCenterY;
- publicViewAnimation(){
- }
- @Override
- publicvoidinitialize(intwidth,intheight,intparentWidth,intparentHeight){
- super.initialize(width,height,parentWidth,parentHeight);
- //初始化中间坐标值
- mCenterX=width/2;
- mCenterY=height/2;
- setDuration(2500);
- setFillAfter(true);
- setInterpolator(newLinearInterpolator());
- }
- @Override
- protectedvoidapplyTransformation(floatinterpolatedTime,
- Transformationt){
- finalMatrixmatrix=t.getMatrix();
- matrix.setScale(interpolatedTime,interpolatedTime);
- //通过坐标变换,把参考点(0,0)移动到View中间
- matrix.preTranslate(-mCenterX,-mCenterY);
- //动画完成后再移回来
- matrix.postTranslate(mCenterX,mCenterY);
- }
- }
preTranslate函数是在缩放前移动而postTranslate是在缩放完成后移动。现在ImageView就是从中间出来的了。这样通过操作Matrix 可以实现各种复杂的变换。由于操作Matrix是实现动画变换的重点,这里简单介绍下Matrix的常用操作:
- Reset():重置该矩阵
- setScale():设置矩阵缩放
- setTranslate():设置矩阵移动
- setRotate():设置矩阵旋转
- setSkew(): 使矩阵变形(扭曲)
矩阵也可以相乘,从线性代数中的矩阵运算中知道M1*M2 和M2*M1 是不一样的,所以在使用concat(m1,m2)函数的时候要注意顺序。
另外需要注意的是Matrix提供的API在OPhone1.0和OPhone1.5中是有变化的,请注意查看相关文档。
OPhone还提供了一个用来监听Animation事件的监听接口AnimationListener,如果你对Animatioin何时开始、何时结束、何时重复播放感兴趣则可以实现该接口。该接口提供了三个回调函数:onAnimationStart、onAnimationEnd、onAnimationRepeat。
使用Camera实现3D变换效果
最后来简单介绍下OPhone提供的android.graphics.Camera类,通过该类可以在2D条件下实现3D动画效果,该类可以看做一个视图显示的3D空间,然后可以在里面做各种操作。把上面的ViewAnimation修改为如下实现可以具体看看Camera的功能:
- classViewAnimationextendsAnimation{
- intmCenterX;//记录View的中间坐标
- intmCenterY;
- Cameracamera=newCamera();
- publicViewAnimation(){
- }
- @Override
- publicvoidinitialize(intwidth,intheight,intparentWidth,
- intparentHeight){
- super.initialize(width,height,parentWidth,parentHeight);
- //初始化中间坐标值
- mCenterX=width/2;
- mCenterY=height/2;
- setDuration(2500);
- setFillAfter(true);
- setInterpolator(newLinearInterpolator());
- }
- @Override
- protectedvoidapplyTransformation(floatinterpolatedTime,
- Transformationt){
- //finalMatrixmatrix=t.getMatrix();
- //matrix.setScale(interpolatedTime,interpolatedTime);
- ////通过坐标变换,把参考点(0,0)移动到View中间
- //matrix.preTranslate(-mCenterX,-mCenterY);
- ////动画完成后再移回来
- //matrix.postTranslate(mCenterX,mCenterY);
- finalMatrixmatrix=t.getMatrix();
- camera.save();
- camera.translate(0.0f,0.0f,(1300-1300.0f*interpolatedTime));
- camera.rotateY(360*interpolatedTime);
- camera.getMatrix(matrix);
- matrix.preTranslate(-mCenterX,-mCenterY);
- matrix.postTranslate(mCenterX,mCenterY);
- camera.restore();
- }
- }
camera.translate(0.0f, 0.0f, (1300 - 1300.0f * interpolatedTime))在第一次调用的时候interpolatedTime值为0,相当于把ImageView在Z轴后移1300像素,然后逐步的往前移动到0,同时camera.rotateY(360 * interpolatedTime)函数又把ImageView沿Y轴翻转360度,最终效果如下:
使用Camera后的动画效果
关于Camera的详细信息,请参考Camera文档这里不再赘述。
总结:
本教程介绍了OPhone中提供的2D animation的使用方式,在程序中合理的使用animation会给程序带来不少亮点,例如在程序首页使用一个优美的逐帧动画做背景这样会显得程序更加生动。
相关推荐
05_OPhone平台2D游戏引擎实现——时间动画.doc
OPhone平台2D游戏引擎实现——物理引擎(一) OPhone平台开发, 2010-10-19 17:27:20 标签 : Ophone平台 2D 游戏 引擎 上一篇文章我们介绍了常见的各种游戏特效的实现,你现在可以很轻松的实现各种游戏中所需要...
12_Ophone平台2D游戏引擎实现——物理引擎(一).pdf
NULL 博文链接:https://ogres.iteye.com/blog/841794
OPhone+UI开发者指南.docxOPhone+UI开发者指南.docxOPhone+UI开发者指南.docxOPhone+UI开发者指南.docxOPhone+UI开发者指南.docxOPhone+UI开发者指南.docxOPhone+UI开发者指南.docxOPhone+UI开发者指南.docx
OPhone+UI开发者指南.pdfOPhone+UI开发者指南.pdfOPhone+UI开发者指南.pdfOPhone+UI开发者指南.pdfOPhone+UI开发者指南.pdfOPhone+UI开发者指南.pdfOPhone+UI开发者指南.pdfOPhone+UI开发者指南.pdf
Android_OPhone的UI架構
OPhone应用开发专题——【第一季】 OPhone 开发基础 第一章、Activity (生命周期等) 第二章、模拟器:Avd创建,adb命令 第三章、Ophone布局 Layout 第四章、开发者学习笔记——View、Canvas、bitmap 第五章、综合...
Box2d同时也提供了各种语言环境的实现,由于Ophone平台使用JAVA作为变成语言,所以我们将选择使用Box2d的java版JBox2d,这也将产生一个问题,JBox2D是用processing库来处理图像显示,所以Ophone平台上则不适用,在...
OPhone UI开发者指南 OPhone联网应用开发中的线程管理与界面更新 OPhone平台开发环境常见问题 OPhone游戏编程 流媒体程序开发之:H264解码器移植到OPhone 如何在OPhone平台编写网络应用
OPhone平台2D游戏引擎实现是ophone官网上的博客!这里写的很多,为了方便看,就按照顺序整理了下!
第一章 加速度传感器 第二章、走进Ophone Service 第三章、与MediaPlayer亲密接触:架构、生命周期和应用 第四章 移动微技
将通过一个股票输入法实例来详细介绍如何在OPhone1.5中创建自定义输入法
OMS OPhone Android 开发教程 OMS是Android的二次开发系统
《OPhone应用开发权威指南》2010 黄晓庆 博文视点 broadview 第1章 OPhone平台概述 1 1.1 OPhone的架构 1 1.1.1 Linux内核 2 1.1.2 本地库 2 1.1.3 OPhone运行环境 3 1.1.4 Widget运行环境 3 1.1.5 应用程序框架 4 ...
安装OPhone SDK详细过程 安装OPhone SDK详细过程
中国移动 Android OPhone SDK (OPhone-sdk_windows-1.5.part1) 下载全部后(共6个)解压将其后缀改为.jar
酷派8809Ophone移动定制机Root教程 详细有效 十分实用 再也不必为刷机发愁了
OPhone游戏开发的流程是怎么样的呢? OPhone游戏开发采用什么样的框架?这种框架又有什么优缺点呢? OPhone和传统的Java游戏开发一样吗? OPhone 如何设计UI界面呢?... OPhone 如何开发游戏动画效果呢?
OPhone SDK for Windows