`
liu86th
  • 浏览: 117929 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

[转]Animation自定义动画效果的实现

 
阅读更多

提供了三种动画效果：逐帧动画(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）：
view plaincopy to clipboardprint?
  1. <animation-list    
  2.     xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:oneshot="false">   
  4. <item android:drawable="@drawable/qq001" android:duration="80"/>   
  5. <item android:drawable="@drawable/qq002" android:duration="80"/>   
  6. <item android:drawable="@drawable/qq003" android:duration="80"/>   
  7. <item android:drawable="@drawable/qq004" android:duration="80"/>   
  8. <item android:drawable="@drawable/qq005" android:duration="80"/>   
  9. <item android:drawable="@drawable/qq006" android:duration="80"/>   
  10. <item android:drawable="@drawable/qq007" android:duration="80"/>   
  11. <item android:drawable="@drawable/qq008" android:duration="80"/>   
  12. </animation-list>  
Java代码  收藏代码
  1. <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/qq001" android:duration="80"/> <item android:drawable="@drawable/qq002" android:duration="80"/> <item android:drawable="@drawable/qq003" android:duration="80"/> <item android:drawable="@drawable/qq004" android:duration="80"/> <item android:drawable="@drawable/qq005" android:duration="80"/> <item android:drawable="@drawable/qq006" android:duration="80"/> <item android:drawable="@drawable/qq007" android:duration="80"/> <item android: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）：
view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <LinearLayout    
  3. xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:orientation="vertical"    
  5.     android:layout_width="fill_parent"  
  6.     android:layout_height="fill_parent">   
  7.     <ImageView    
  8.        android:id="@+id/animation_view"  
  9.        android:layout_width="fill_parent"    
  10.        android:layout_height="wrap_content"  
  11.        android:src="@drawable/qq_animation" />   
  12.     <Button    
  13.        android:id="@+id/animation_btn"    
  14.        android:layout_width="fill_parent"  
  15.        android:layout_height="wrap_content"    
  16.        android:text="@string/start_animation" />   
  17.     <Button    
  18.        android:id="@+id/one_shot_btn"    
  19.        android:layout_width="fill_parent"  
  20.        android:layout_height="wrap_content"    
  21.        android:text="@string/play_once" />   
  22. </LinearLayout>  
Java代码  收藏代码
  1. <?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/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）：
 
view plaincopy to clipboardprint?
  1. public class AnimActivity extends Activity {   
  2.     /** Called when the activity is first created. */  
  3.     AnimationDrawable mAd;   
  4.     Button mPlayBtn;   
  5.     Button mOneShotBtn;   
  6.     boolean mIsOneShot;   
  7.     
  8.     @Override  
  9.     public void onCreate(Bundle savedInstanceState) {   
  10.        super.onCreate(savedInstanceState);   
  11.        setContentView(R.layout.main);   
  12.     
  13.        ImageView iv = (ImageView) findViewById(R.id.animation_view);   
  14.        mAd = (AnimationDrawable) iv.getDrawable();   
  15.     
  16.        mPlayBtn = (Button) findViewById(R.id.animation_btn);   
  17.        mPlayBtn.setOnClickListener(new OnClickListener() {   
  18.            @Override  
  19.            public void onClick(View view) {   
  20.               startAnimation();   
  21.            }   
  22.        });   
  23.     
  24.        mOneShotBtn = (Button) findViewById(R.id.one_shot_btn);   
  25.        mOneShotBtn.setOnClickListener(new OnClickListener() {   
  26.            @Override  
  27.            public void onClick(View view) {   
  28.               if (mIsOneShot) {   
  29.                   mOneShotBtn.setText("Play Once");   
  30.               } else {   
  31.                   mOneShotBtn.setText("Play Repeatly");   
  32.               }   
  33.               mAd.setOneShot(!mIsOneShot);   
  34.               mIsOneShot = !mIsOneShot;   
  35.            }   
  36.        });   
  37.     
  38.     }   
  39.     
  40.     /**  
  41.      * 通过AnimationDrawable的start函数播放动画，  
  42.      * stop函数停止动画播放，  
  43.      * isRunning来判断动画是否正在播放。  
  44.      */  
  45.     public void startAnimation() {   
  46.        if (mAd.isRunning()) {   
  47.            mAd.stop();   
  48.        } else {   
  49.            mAd.stop();   
  50.            mAd.start();   
  51.        }   
  52.     }   
  53. }   
  54.    
Java代码  收藏代码
  1. public class AnimActivity extends Activity { /** Called when the activity is first created. */ AnimationDrawable mAd; Button mPlayBtn; Button mOneShotBtn; boolean mIsOneShot; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ImageView iv = (ImageView) findViewById(R.id.animation_view); mAd = (AnimationDrawable) iv.getDrawable(); mPlayBtn = (Button) findViewById(R.id.animation_btn); mPlayBtn.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { startAnimation(); } }); mOneShotBtn = (Button) findViewById(R.id.one_shot_btn); mOneShotBtn.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { if (mIsOneShot) { mOneShotBtn.setText("Play Once"); } else { mOneShotBtn.setText("Play Repeatly"); } mAd.setOneShot(!mIsOneShot); mIsOneShot = !mIsOneShot; } }); } /** * 通过AnimationDrawable的start函数播放动画， * stop函数停止动画播放， * isRunning来判断动画是否正在播放。 */ public void startAnimation() { if (mAd.isRunning()) { mAd.stop(); } else { mAd.stop(); mAd.start(); } } }  
 
布局动画介绍
 
布局动画和逐帧动画是由本质的不同的，逐帧动画是一帧帧图片组成的，而布局动画是渐变动画，OPhone通过改变UI的属性（大小、位置、透明度等）来实现动画效果。
 
在OPhone显示系统中，每个view都对应一个矩阵来控制该view显示的位置，通过不同的方式来改变该控制矩阵就可以实现动画效果，例如旋转、移动、缩放等。
 
不同的矩阵变换有不同的类来实现，android.view.animation.Animation类代表所有动画变换的基类，目前在OPhone系统中有如下五个实现（都位于android.view.animation包中）：
  • l AlphaAnimation：实现alpha渐变，可以使界面逐渐消失或者逐渐显现
  • l TranslateAnimation：实现位置移动渐变，需要指定移动的开始和结束坐标
  • l ScaleAnimation： 实现缩放渐变，可以指定缩放的参考点
  • l RotateAnimation：实现旋转渐变，可以指定旋转的参考点，默认值为（0，0）左上角。
  • l AnimationSet： 代表上面的渐变组合
有一个和渐变动画效果关系比较密切的类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）：
view plaincopy to clipboardprint?
  1. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  2. android:interpolator="@android:anim/decelerate_interpolator">   
  3. <alpha    
  4.     android:fromAlpha="0.0"    
  5.     android:toAlpha="1.0"    
  6.     android:duration="1000" />   
  7. </set>  
Java代码  收藏代码
  1. <set xmlns: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元素，如下：
 
view plaincopy to clipboardprint?
  1. <alpha    
  2. xmlns:android="http://schemas.android.com/apk/res/android"  
  3. android:interpolator="@android:anim/accelerate_interpolator"  
  4. android:fromAlpha="0.0"    
  5. android:toAlpha="1.0"    
  6. android:duration="1000" />  
Java代码  收藏代码
  1. <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毫秒。
 
view plaincopy to clipboardprint?
  1. <scale    
  2. xmlns:android="http://schemas.android.com/apk/res/android"  
  3. android:interpolator="@android:anim/accelerate_interpolator"  
  4. android:fromXScale="1"  
  5. android:toXScale="1"  
  6. android:fromYScale="0.1"  
  7. android:toYScale="1.0"  
  8. android:duration="500"  
  9. android:pivotX="50%"  
  10. android:pivotY="50%"  
  11. android:startOffset="100" />  
Java代码  收藏代码
  1. <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指定了在缩放开始前等待的时间。
view plaincopy to clipboardprint?
  1. <rotate    
  2. xmlns:android="http://schemas.android.com/apk/res/android"  
  3. android:interpolator="@android:anim/accelerate_interpolator"  
  4. android:fromDegrees="0.0"  
  5. android:toDegrees="360"  
  6. android:pivotX="50%"  
  7. android:pivotY="50%"  
  8. android:duration="500" />  
Java代码  收藏代码
  1. <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毫秒，变换的中心点位控件的中心位置。
view plaincopy to clipboardprint?
  1. <translate    
  2. xmlns:android="http://schemas.android.com/apk/res/android"  
  3. android:interpolator="@android:anim/accelerate_interpolator"  
  4. android:fromYDelta="-100%"    
  5. android:toYDelta="0"  
  6. android:duration="500" />  
Java代码  收藏代码
  1. <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）：
view plaincopy to clipboardprint?
  1. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  2. android:interpolator="@android:anim/decelerate_interpolator">   
  3. <translate    
  4. android:fromYDelta="-100%"    
  5. android:toYDelta="0"  
  6. android:duration="500" />   
  7. <alpha    
  8. android:fromAlpha="0.0"    
  9. android:toAlpha="1.0"  
  10. android:duration="500" />   
  11. </set>  
Java代码  收藏代码
  1. <set xmlns: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文件中定义
view plaincopy to clipboardprint?
  1. LayoutAnimationController，该文件同样位于res/anim/目录下，下面是一个示例（res\anim\layout_anim_ctrl.xml）：   
  2. <layoutAnimation    
  3. xmlns:android="http://schemas.android.com/apk/res/android"  
  4. android:delay="30%"  
  5. android:animationOrder="reverse"  
  6. android:animation="@anim/translate_alpha_anim" />  
Java代码  收藏代码
  1. 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做演示，布局代码如下：
view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <LinearLayout    
  3. xmlns:android="http://schemas.android.com/apk/res/android"  
  4. android:orientation="vertical"    
  5. android:layout_width="fill_parent"  
  6. android:layout_height="fill_parent">   
  7.     <ListView    
  8.     android:id="@+id/list"    
  9.     android:layout_width="fill_parent"  
  10.     android:layout_height="fill_parent"    
  11.        
  12.     android:persistentDrawingCache="animation|scrolling"  
  13.     android:layoutAnimation="@anim/layout_anim_ctrl" />   
  14. </LinearLayout>  
Java代码  收藏代码
  1. <?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"> <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）：
view plaincopy to clipboardprint?
  1. public class ListActivity extends Activity {   
  2.     
  3.     String[] mListItems =    
  4.     { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5"};   
  5.     
  6.     @Override  
  7.     public void onCreate(Bundle savedInstanceState) {   
  8.        super.onCreate(savedInstanceState);   
  9.        setContentView(R.layout.list);   
  10.     
  11.        ArrayAdapter<String> listItemAdapter =    
  12.            new ArrayAdapter<String>(this,   
  13.               android.R.layout.simple_list_item_1, mListItems);   
  14.        ListView lv = (ListView) this.findViewById(R.id.list);   
  15.        lv.setAdapter(listItemAdapter);   
  16.     }   
  17. }  
Java代码  收藏代码
  1. public class ListActivity extends Activity { String[] mListItems = { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5"}; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.list); ArrayAdapter<String> listItemAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, mListItems); ListView lv = (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 )。
 
下面来看一个简单的实现：
   
view plaincopy to clipboardprint?
  1. class ViewAnimation extends Animation {   
  2.        public ViewAnimation() {   
  3.        }   
  4.     
  5.        @Override  
  6.         public void initialize(int width, int height, int parentWidth, int parentHeight) {   
  7.            super.initialize(width, height, parentWidth, parentHeight);   
  8.            setDuration(2500);   
  9.            setFillAfter(true);   
  10.            setInterpolator(new LinearInterpolator());   
  11.        }   
  12.     
  13.        @Override  
  14.         protected void applyTransformation(float interpolatedTime,   
  15.               Transformation t) {   
  16.            final Matrix matrix = t.getMatrix();   
  17.            matrix.setScale(interpolatedTime, interpolatedTime);   
  18.               
  19.        }   
  20.     }  
Java代码  收藏代码
  1. class ViewAnimation extends Animation { public ViewAnimation() { } @Override public void initialize(int width, int height, int parentWidth, int parentHeight) { super.initialize(width, height, parentWidth, parentHeight); setDuration(2500); setFillAfter(true); setInterpolator(new LinearInterpolator()); } @Override protected void applyTransformation(float interpolatedTime, Transformation t) { final Matrix matrix = 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）：
 
view plaincopy to clipboardprint?
  1. public class ViewAnimActivity extends Activity {   
  2.     
  3.     Button mPlayBtn;   
  4.     ImageView mAnimImage;   
  5.     
  6.     @Override  
  7.     public void onCreate(Bundle savedInstanceState) {   
  8.        super.onCreate(savedInstanceState);   
  9.        setContentView(R.layout.view_anim_layout);   
  10.        mAnimImage = (ImageView) this.findViewById(R.id.anim_image);   
  11.     
  12.        mPlayBtn = (Button) findViewById(R.id.play_btn);   
  13.        mPlayBtn.setOnClickListener(new OnClickListener() {   
  14.     
  15.            @Override  
  16.            public void onClick(View view) {   
  17.               mAnimImage.startAnimation(new ViewAnimation());   
  18.            }   
  19.     
  20.        });   
  21.     
  22.     }   
  23. }  
Java代码  收藏代码
  1. public class ViewAnimActivity extends Activity { Button mPlayBtn; ImageView mAnimImage; @Override public void onCreate(Bundle savedInstanceState) { 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(new OnClickListener() { @Override public void onClick(View view) { mAnimImage.startAnimation(new ViewAnimation()); } }); } }  
 
 
布局代码如下（res\layout\view_anim_layout.xml）：
view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <LinearLayout    
  3. xmlns:android="http://schemas.android.com/apk/res/android"  
  4. android:orientation="vertical"  
  5. android:layout_width="fill_parent"  
  6. android:layout_height="fill_parent"  
  7. >    
  8. <Button   
  9. android:id="@+id/play_btn"  
  10. android:layout_width="fill_parent"  
  11. android:layout_height="wrap_content"  
  12. android:text="Start Animation"  
  13. />   
  14. <ImageView    
  15. android:id="@+id/anim_image"  
  16. android:persistentDrawingCache="animation|scrolling"  
  17. android:layout_width="fill_parent"    
  18. android:layout_height="wrap_content"    
  19. android:src="@drawable/ophone"  
  20. />   
  21. </LinearLayout>  
Java代码  收藏代码
  1. <?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" > <Button android:id="@+id/play_btn" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Start Animation" /> <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>  
 
从上图可以看到ImageView是从左上角出来的，这是由于没有指定矩阵的变换参考位置，默认位置为（0,0），如果要想让ImageView从中间出来，可以通过矩阵变换来把参考点移动到中间来，如下实现：
   
view plaincopy to clipboardprint?
  1. class ViewAnimation extends Animation {   
  2.        int mCenterX;//记录View的中间坐标   
  3.        int mCenterY;   
  4.        public ViewAnimation() {   
  5.        }   
  6.     
  7.        @Override  
  8.        public void initialize(int width, int height, int parentWidth, int parentHeight) {   
  9.            super.initialize(width, height, parentWidth, parentHeight);   
  10.            //初始化中间坐标值   
  11.            mCenterX = width/2;    
  12.            mCenterY = height/2;   
  13.            setDuration(2500);   
  14.            setFillAfter(true);   
  15.            setInterpolator(new LinearInterpolator());   
  16.        }   
  17.     
  18.        @Override  
  19.        protected void applyTransformation(float interpolatedTime,   
  20.               Transformation t) {   
  21.            final Matrix matrix = t.getMatrix();   
  22.            matrix.setScale(interpolatedTime, interpolatedTime);   
  23.            //通过坐标变换，把参考点（0,0）移动到View中间   
  24.            matrix.preTranslate(-mCenterX, -mCenterY);   
  25.            //动画完成后再移回来   
  26.            matrix.postTranslate(mCenterX, mCenterY);   
  27.        }   
  28.     }  
Java代码  收藏代码
  1. class ViewAnimation extends Animation { int mCenterX;//记录View的中间坐标 int mCenterY; public ViewAnimation() { } @Override public void initialize(int width, int height, int parentWidth, int parentHeight) { super.initialize(width, height, parentWidth, parentHeight); //初始化中间坐标值 mCenterX = width/2; mCenterY = height/2; setDuration(2500); setFillAfter(true); setInterpolator(new LinearInterpolator()); } @Override protected void applyTransformation(float interpolatedTime, Transformation t) { final Matrix matrix = 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的功能：
   
view plaincopy to clipboardprint?
  1.  class ViewAnimation extends Animation {   
  2.        int mCenterX;//记录View的中间坐标   
  3.        int mCenterY;   
  4.        Camera camera = new Camera();   
  5.        public ViewAnimation() {   
  6.        }   
  7.     
  8.        @Override  
  9.        public void initialize(int width, int height, int parentWidth,   
  10.               int parentHeight) {   
  11.            super.initialize(width, height, parentWidth, parentHeight);   
  12.            //初始化中间坐标值   
  13.            mCenterX = width/2;    
  14.            mCenterY = height/2;   
  15.            setDuration(2500);   
  16.            setFillAfter(true);   
  17.            setInterpolator(new LinearInterpolator());   
  18.        }   
  19.     
  20.        @Override  
  21.        protected void applyTransformation(float interpolatedTime,   
  22.               Transformation t) {   
  23. //         final Matrix matrix = t.getMatrix();   
  24. //         matrix.setScale(interpolatedTime, interpolatedTime);   
  25. //         //通过坐标变换，把参考点（0,0）移动到View中间   
  26. //         matrix.preTranslate(-mCenterX, -mCenterY);   
  27. //         //动画完成后再移回来   
  28. //         matrix.postTranslate(mCenterX, mCenterY);   
  29.            final Matrix matrix = t.getMatrix();   
  30.            camera.save();   
  31.            camera.translate(0.0f, 0.0f, (1300 - 1300.0f * interpolatedTime));   
  32.            camera.rotateY(360 * interpolatedTime);   
  33.            camera.getMatrix(matrix);   
  34.            matrix.preTranslate(-mCenterX, -mCenterY);   
  35.            matrix.postTranslate(mCenterX, mCenterY);   
  36.            camera.restore();   
  37.        }   
  38.     }  
Java代码  收藏代码
  1. class ViewAnimation extends Animation { int mCenterX;//记录View的中间坐标 int mCenterY; Camera camera = new Camera(); public ViewAnimation() { } @Override public void initialize(int width, int height, int parentWidth, int parentHeight) { super.initialize(width, height, parentWidth, parentHeight); //初始化中间坐标值 mCenterX = width/2; mCenterY = height/2; setDuration(2500); setFillAfter(true); setInterpolator(new LinearInterpolator()); } @Override protected void applyTransformation(float interpolatedTime, Transformation t) { // final Matrix matrix = t.getMatrix(); // matrix.setScale(interpolatedTime, interpolatedTime); // //通过坐标变换，把参考点（0,0）移动到View中间 // matrix.preTranslate(-mCenterX, -mCenterY); // //动画完成后再移回来 // matrix.postTranslate(mCenterX, mCenterY); final Matrix matrix = 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度

分享到：
| [转]Android上几种简单的Animation使用方 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    继承Animation自定义动画

    总结，继承`Animation`自定义动画是Android开发中的一个重要技能，它允许开发者创造出独特的动画效果，提升应用的交互体验。通过深入理解动画原理和源码，我们可以更加灵活地控制动画行为，满足各种复杂需求。在实际...

    自定义动画框架实现ScrollView滚动动画

    以下将详细讲解如何实现一个自定义动画框架，以及如何在ScrollView滚动过程中实现子控件的不同动画效果。 首先，我们需要理解ScrollView的基本工作原理。ScrollView是一个可滚动的布局容器，它允许用户在内容超过...

    Animation动画的解析与自定义Animation动画

    在Android开发中，动画(Animation)是提升用户体验和视觉...通过自定义动画，开发者可以创造出独特且引人入胜的交互效果，使应用更加生动有趣。在实际开发中，应结合具体需求选择合适的动画类型，并注意性能和用户体验。

    android动画介绍之 自定义Animation动画

    在这里，我们主要关注基于`Animation`类的自定义动画，它是Android早期版本中主要的动画实现方式。 一、理解Animation `Animation`是Android动画的基础类，它定义了动画的基本行为，如持续时间、重复次数等。`...

    pulltorefresh实现自定义动画

    自定义动画实现步骤 要实现自定义动画，需要进行以下几个步骤： 1. **导入源码**：首先需要导入PullToRefresh库的源码，这样才能对库中的组件进行修改。 2. **修改动画资源**：修改`pull_to_refresh_header_...

    iOS-自定义转场动画

    当你希望在某个UIViewController中使用自定义转场动画时，可以设置该控制器的transitioningDelegate属性，并实现对应的协议方法，这样系统就会在转场时调用你的自定义动画代码。 4. **UIStoryboardSegue**: 在...

    android Animation动画实现loading效果

    总结，通过Android Animation，我们可以轻松创建各种Loading效果，无论是简单的旋转动画，还是复杂的自定义动画。结合补间动画、属性动画和第三方库，开发者能够为应用程序增添更多生动、有趣的交互元素，提升整体的...

    ios 自定义转场动画

    2. 实现动画效果：在`perform`方法中，你可以使用Core Animation或者其它图形库（如SnapKit, AutoLayout等）来创建动画效果。例如，你可以改变视图的frame，使用关键帧动画，或者应用CATransform3D变换来实现3D翻转...

    前端自定义动画.zip

    本资源“前端自定义动画.zip”可能包含了一系列关于如何在前端实现自定义动画的示例、代码片段和教程。 自定义动画的核心是利用CSS、JavaScript或者现代Web API如Web Animations API来创建动态效果。下面我们将深入...

    Android自定义动画 3D旋转

    本篇文章主要探讨的是如何实现3D旋转这一特殊的自定义动画效果。3D旋转是Android动画库中的一种高级技巧，通过它可以创建出逼真的立体旋转效果，为用户带来更丰富的视觉体验。 在Android中，自定义动画主要包括两种...

    swift-iOS自定义转场动画集锦

    4. **自定义动画控制器**：创建一个类继承自`UIViewControllerAnimatedTransitioning`，在这个类中实现你的动画效果。 5. **交互性**：如果需要，你可以实现`UIInteractiveTransitioning`协议，使转场动画具有交互...

    使用animation翻页动画效果

    /* 自定义动画持续时间 */ animation-timing-function: ease-in-out; /* 动画速度曲线，可选择ease、linear、ease-in、ease-out、ease-in-out等 */ animation-delay: 0s; /* 动画开始前的延迟 */ animation-...

    自定义动画渐变进度条.zip

    总的来说，"自定义动画渐变进度条.zip"项目是一个关于UI设计、动画实现和组件封装的实例，可以帮助开发者提升其在移动应用开发中的技能。通过研究这个项目，不仅可以学习到渐变色和动画的实现，还能了解到如何将...

    轻松实现各种自定义动画上啦刷新和下拉刷新

    4. 自定义动画实现： 在Android中，可以使用`ObjectAnimator`或`ValueAnimator`创建自定义动画。在iOS中，可以使用`UIViewPropertyAnimator`或`Core Animation`。这些工具允许开发者自定义动画的起始、结束、持续...

    animation图片移动效果

    此外，使用`Interpolator`可以自定义动画的速度曲线，如线性、加速、减速等，以获得更自然的动画效果。 总之，Android提供了多种方式来实现图片移动效果，开发者可以根据需求和目标设备的API级别选择合适的动画系统...

    自定义PopupWindow动画效果

    在实现自定义动画时，还需要注意以下几点： 1. 动画同步：确保PopupWindow的显示和动画的开始是同步的，避免出现动画开始前PopupWindow已经完全显示或者动画结束后PopupWindow还未完全消失的情况。 2. 生命周期...

    swift-四个自定义转场动画的demo

    这个“swift-四个自定义转场动画的demo”提供了四个不同的转场动画示例，帮助开发者深入理解如何在iOS应用中实现自定义动画。 一、自定义转场动画基础 在iOS中，自定义转场动画主要通过`...

    自定义转场动画 - 手势动画效果

    在你的视图控制器中，你需要实现`UIViewControllerTransitioningDelegate`协议，并在`animationController(forPresented:)`和`animationController(forDismissed:)`方法中返回你的自定义动画控制器。如果需要手势...

    Android imageview的自定义动画

    除了使用内置的动画类型，还可以自定义动画效果。例如，创建一个自定义的旋转动画： ```java public class CustomRotateAnimator extends ValueAnimator { private ImageView imageView; public ...

    flutter动画效果自定义小部件自定义renderobject

    在创建自定义动画效果时，可以结合`Animation`类和`AnimatedBuilder`小部件。`Animation`类代表了一个随着时间变化的值，`AnimatedBuilder`会根据`Animation`的状态重新构建其子小部件。通过将动画对象链接到`...

Magicbox
Global site tag (gtag.js) - Google Analytics