`
liu86th
  • 浏览: 119289 次
  • 性别: 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):
  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):
  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):
 
  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包中):
  • AlphaAnimation:实现alpha渐变,可以使界面逐渐消失或者逐渐显现
  • TranslateAnimation:实现位置移动渐变,需要指定移动的开始和结束坐标
  • ScaleAnimation: 实现缩放渐变,可以指定缩放的参考点
  • RotateAnimation:实现旋转渐变,可以指定旋转的参考点,默认值为(0,0)左上角。
  • 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):
  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元素,如下:
 
  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毫秒。
 
  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指定了在缩放开始前等待的时间。
  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毫秒,变换的中心点位控件的中心位置。
  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):
  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文件中定义
  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做演示,布局代码如下:
  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):
  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 )。
 
下面来看一个简单的实现:
   
  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):
 
  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):
  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从中间出来,可以通过矩阵变换来把参考点移动到中间来,如下实现:
   
  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的功能:
   
  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度

分享到:
评论

相关推荐

    智能车竞赛介绍(竞赛目标和赛程安排).zip

    全国大学生智能汽车竞赛自2006年起,由教育部高等教育司委托高等学校自动化类教学指导委员会举办,旨在加强学生实践、创新能力和培养团队精神的一项创意性科技竞赛。该竞赛至今已成功举办多届,吸引了众多高校学生的积极参与,此文件为智能车竞赛介绍

    集字卡v4.3.4微信公众号原版三种UI+关键字卡控制+支持强制关注.zip

    字卡v4.3.4 原版 三种UI+关键字卡控制+支持获取用户信息+支持强制关注 集卡模块从一开始的版本到助力版本再到现在的新规则版本。 集卡模块难度主要在于 如何控制各种不同的字卡组合 被粉丝集齐的数量。 如果不控制那么一定会出现超过数量的粉丝集到指定的字卡组合,造成奖品不够的混乱,如果大奖价值高的话,超过数量的粉丝集到大奖后,就造成商家的活动费用超支了。我们冥思苦想如何才能限制集到指定字卡组合的粉丝数,后我们想到了和支付宝一样的选一张关键字卡来进行规则设置的方式来进行限制,根据奖品所需的关键字卡数,设定规则就可以控制每种奖品所需字卡组合被粉丝集到的数量,规则可以在活动进行中根据需要进行修改,活动规则灵活度高。新版的集卡规则,在此次政府发布号的活动中经受了考验,集到指定字卡组合的粉丝没有超出规则限制。有了这个规则限制后,您无需盯着活动,建好活动后就无人值守让活动进行就行了,您只需要时不时来看下蹭蹭上涨的活动数据即可。 被封? 无需担心,模块内置有防封功能,支持隐藏主域名,显示炮灰域名,保护活动安全进行。 活动准备? 只需要您有一个认证服务号即可,支持订阅号借用认证服务号来做活动。如果您

    出口设备线体程序详解:PLC通讯下的V90控制与开源FB284工艺对象实战指南,出口设备线体程序详解:PLC通讯与V90控制集成,工艺对象与FB284协同工作,开源学习V90控制技能,出口设备1200

    出口设备线体程序详解:PLC通讯下的V90控制与开源FB284工艺对象实战指南,出口设备线体程序详解:PLC通讯与V90控制集成,工艺对象与FB284协同工作,开源学习V90控制技能,出口设备1200线体程序,多个plc走通讯,内部有多个v90,采用工艺对象与fb284 共同控制,功能快全部开源,能快速学会v90的控制 ,出口设备; 1200线体程序; PLC通讯; 多个V90; 工艺对象; FB284; 功能开源; V90控制。,V90工艺控制:开源功能快,快速掌握1200线体程序与PLC通讯

    基于Arduino与DAC8031的心电信号模拟器资料:心电信号与正弦波的双重输出应用方案,Arduino与DAC8031心电信号模拟器:生成心电信号与正弦波输出功能详解,基于arduino +DAC

    基于Arduino与DAC8031的心电信号模拟器资料:心电信号与正弦波的双重输出应用方案,Arduino与DAC8031心电信号模拟器:生成心电信号与正弦波输出功能详解,基于arduino +DAC8031的心电信号模拟器资料,可输出心电信号,和正弦波 ,基于Arduino;DAC8031;心电信号模拟器;输出心电信号;正弦波输出;模拟器资料,基于Arduino与DAC8031的心电信号模拟器:输出心电与正弦波

    (参考项目)MATLAB口罩识别检测.zip

    MATLAB口罩检测的基本流程 图像采集:通过摄像头或其他图像采集设备获取包含面部的图像。 图像预处理:对采集到的图像进行灰度化、去噪、直方图均衡化等预处理操作,以提高图像质量,便于后续的人脸检测和口罩检测。 人脸检测:利用Haar特征、LBP特征等经典方法或深度学习模型(如MTCNN、FaceBoxes等)在预处理后的图像中定位人脸区域。 口罩检测:在检测到的人脸区域内,进一步分析是否佩戴口罩。这可以通过检测口罩的边缘、纹理等特征,或使用已经训练好的口罩检测模型来实现。 结果输出:将检测结果以可视化方式展示,如在图像上标注人脸和口罩区域,或输出文字提示是否佩戴口罩。

    kernel-debug-devel-3.10.0-1160.119.1.el7.x64-86.rpm.tar.gz

    1、文件内容:kernel-debug-devel-3.10.0-1160.119.1.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/kernel-debug-devel-3.10.0-1160.119.1.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持:公众号禅静编程坊

    day02供应链管理系统-补充.zip

    该文档提供了一个关于供应链管理系统开发的详细指南,重点介绍了项目安排、技术实现和框架搭建的相关内容。 文档分为以下几个关键部分: 项目安排:主要步骤包括搭建框架(1天),基础数据模块和权限管理(4天),以及应收应付和销售管理(5天)。 供应链概念:供应链系统的核心流程是通过采购商品放入仓库,并在销售时从仓库提取商品,涉及三个主要订单:采购订单、销售订单和调拨订单。 大数据的应用:介绍了数据挖掘、ETL(数据抽取)和BI(商业智能)在供应链管理中的应用。 技术实现:讲述了DAO(数据访问对象)的重用、服务层的重用、以及前端JS的继承机制、jQuery插件开发等技术细节。 系统框架搭建:包括Maven环境的配置、Web工程的创建、持久化类和映射文件的编写,以及Spring配置文件的实现。 DAO的需求和功能:供应链管理系统的各个模块都涉及分页查询、条件查询、删除、增加、修改操作等需求。 泛型的应用:通过示例说明了在Java语言中如何使用泛型来实现模块化和可扩展性。 文档非常技术导向,适合开发人员参考,用于构建供应链管理系统的架构和功能模块。

    基于四旋翼无人机的PD控制研究 附Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    C#与VB实现欧姆龙PLC的Fins TCP通信案例源码:调用动态链接库进行数据读写,定时器与计数器数据区的简洁读写操作示例,C#与VB实现欧姆龙PLC的Fins TCP通信案例源码:调用动态链接库进

    C#与VB实现欧姆龙PLC的Fins TCP通信案例源码:调用动态链接库进行数据读写,定时器与计数器数据区的简洁读写操作示例,C#与VB实现欧姆龙PLC的Fins TCP通信案例源码:调用动态链接库进行读写操作,涵盖定时器计数器数据区学习案例,C#欧姆龙plc Fins Tcp通信案例上位机源码,有c#和VB的Demo,c#上位机和欧姆龙plc通讯案例源码,调用动态链接库,可以实现上位机的数据连接,可以简单实现D区W区定时器计数器等数据区的读写,是一个非常好的学习案例 ,C#; 欧姆龙PLC; Fins Tcp通信; 上位机源码; 动态链接库; 数据连接; D区W区读写; 定时器计数器; 学习案例,C#实现欧姆龙PLC Fins Tcp通信上位机源码,读写数据区高效学习案例

    可调谐石墨烯超材料吸收体的FDTD仿真模拟研究报告:吸收光谱的化学势调节策略与仿真源文件解析,可调谐石墨烯超材料吸收体:化学势调节光谱的FDTD仿真模拟研究,可调谐石墨烯超材料吸收体FDTD仿真模拟

    可调谐石墨烯超材料吸收体的FDTD仿真模拟研究报告:吸收光谱的化学势调节策略与仿真源文件解析,可调谐石墨烯超材料吸收体:化学势调节光谱的FDTD仿真模拟研究,可调谐石墨烯超材料吸收体FDTD仿真模拟 【案例内容】该案例提供了一种可调谐石墨烯超材料吸收体,其吸收光谱可以通过改变施加于石墨烯的化学势来进行调节。 【案例文件】仿真源文件 ,可调谐石墨烯超材料吸收体; FDTD仿真模拟; 化学势调节; 仿真源文件,石墨烯超材料吸收体:FDTD仿真调节吸收光谱案例解析

    RBF神经网络控制仿真-第二版

    RBF神经网络控制仿真-第二版

    松下PLC与威纶通触摸屏转盘设备控制:FPWINPRO7与EBPRO智能编程与宏指令应用,松下PLC与威纶通触摸屏转盘设备控制解决方案:FPWINPRO7与EBPRO协同工作,实现多工位转盘加工与IE

    松下PLC与威纶通触摸屏转盘设备控制:FPWINPRO7与EBPRO智能编程与宏指令应用,松下PLC与威纶通触摸屏转盘设备控制解决方案:FPWINPRO7与EBPRO协同工作,实现多工位转盘加工与IEC编程模式控制,松下PLC+威纶通触摸屏的转盘设备 松下PLC工程使用程序版本为FPWINPRO7 7.6.0.0版本 威纶通HMI工程使用程序版本为EBPRO 6.07.02.410S 1.多工位转盘加工控制。 2.国际标准IEC编程模式。 3.触摸屏宏指令应用控制。 ,松下PLC; 威纶通触摸屏; 转盘设备控制; 多工位加工控制; IEC编程模式; 触摸屏宏指令应用,松下PLC与威纶通HMI联控的转盘设备控制程序解析

    基于循环神经网络(RNN)的多输入单输出预测模型(适用于时间序列预测与回归分析,需Matlab 2021及以上版本),基于循环神经网络(RNN)的多输入单输出预测模型(matlab版本2021+),真

    基于循环神经网络(RNN)的多输入单输出预测模型(适用于时间序列预测与回归分析,需Matlab 2021及以上版本),基于循环神经网络(RNN)的多输入单输出预测模型(matlab版本2021+),真实值与预测值对比,多种评价指标与线性拟合展示。,RNN预测模型做多输入单输出预测模型,直接替数据就可以用。 程序语言是matlab,需求最低版本为2021及以上。 程序可以出真实值和预测值对比图,线性拟合图,可打印多种评价指标。 PS:以下效果图为测试数据的效果图,主要目的是为了显示程序运行可以出的结果图,具体预测效果以个人的具体数据为准。 2.由于每个人的数据都是独一无二的,因此无法做到可以任何人的数据直接替就可以得到自己满意的效果。 这段程序主要是一个基于循环神经网络(RNN)的预测模型。它的应用领域可以是时间序列预测、回归分析等。下面我将对程序的运行过程进行详细解释和分析。 首先,程序开始时清空环境变量、关闭图窗、清空变量和命令行。然后,通过xlsread函数导入数据,其中'数据的输入'和'数据的输出'是两个Excel文件的文件名。 接下来,程序对数据进行归一化处理。首先使用ma

    【图像识别】手写文字识别研究 附Matlab代码+运行结果.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    旅游管理系统(基于springboot,mysql,java).zip

    旅游管理系统中的功能模块主要是实现管理员;首页、个人中心、用户管理、旅游方案管理、旅游购买管理、系统管理,用户;首页、个人中心、旅游方案管理、旅游购买管理、我的收藏管理。前台首页;首页、旅游方案、旅游资讯、个人中心、后台管理等功能。经过认真细致的研究,精心准备和规划,最后测试成功,系统可以正常使用。分析功能调整与旅游管理系统实现的实际需求相结合,讨论了Java开发旅游管理系统的使用。 从上面的描述中可以基本可以实现软件的功能: 1、开发实现旅游管理系统的整个系统程序;  2、管理员;首页、个人中心、用户管理、旅游方案管理、旅游购买管理、系统管理等。 3、用户:首页、个人中心、旅游方案管理、旅游购买管理、我的收藏管理。 4、前台首页:首页、旅游方案、旅游资讯、个人中心、后台管理等相应操作; 5、基础数据管理:实现系统基本信息的添加、修改及删除等操作,并且根据需求进行交流查看及回复相应操作。

    Boost二级升压光伏并网结构的Simulink建模与MPPT最大功率点追踪:基于功率反馈的扰动观察法调整电压方向研究,Boost二级升压光伏并网结构的Simulink建模与MPPT最大功率点追踪:基

    Boost二级升压光伏并网结构的Simulink建模与MPPT最大功率点追踪:基于功率反馈的扰动观察法调整电压方向研究,Boost二级升压光伏并网结构的Simulink建模与MPPT最大功率点追踪:基于功率反馈的扰动观察法调整电压方向研究,Boost二级升压光伏并网结构,Simulink建模,MPPT最大功率点追踪,扰动观察法采用功率反馈方式,若ΔP>0,说明电压调整的方向正确,可以继续按原方向进行“干扰”;若ΔP<0,说明电压调整的方向错误,需要对“干扰”的方向进行改变。 ,Boost升压;光伏并网结构;Simulink建模;MPPT最大功率点追踪;扰动观察法;功率反馈;电压调整方向。,光伏并网结构中Boost升压MPPT控制策略的Simulink建模与功率反馈扰动观察法

    基于matlab平台的图像去雾设计.zip

    运行GUI版本,可二开

    Deepseek相关参考资源文档

    Deepseek相关主题资源及行业影响

    WP Smush Pro3.16.12 一款专为 WordPress 网站设计的图像优化插件开心版.zip

    WP Smush Pro 是一款专为 WordPress 网站设计的图像优化插件。 一、主要作用 图像压缩 它能够在不影响图像质量的前提下,大幅度减小图像文件的大小。例如,对于一些高分辨率的产品图片或者风景照片,它可以通过先进的压缩算法,去除图像中多余的数据。通常 JPEG 格式的图像经过压缩后,文件大小可以减少 40% – 70% 左右。这对于网站性能优化非常关键,因为较小的图像文件可以加快网站的加载速度。 该插件支持多种图像格式的压缩,包括 JPEG、PNG 和 GIF。对于 PNG 图像,它可以在保留透明度等关键特性的同时,有效地减小文件尺寸。对于 GIF 图像,也能在一定程度上优化文件大小,减少动画 GIF 的加载时间。 懒加载 WP Smush Pro 实现了图像懒加载功能。懒加载是一种延迟加载图像的技术,当用户滚动页面到包含图像的位置时,图像才会加载。这样可以避免一次性加载大量图像,尤其是在页面内容较多且包含许多图像的情况下。例如,在一个新闻网站的长文章页面,带有大量配图,懒加载可以让用户在浏览文章开头部分时,不需要等待所有图片加载,从而提高页面的初始加载速度,同时也能

    1. Download this file: https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc-windows-amd64.exe

    Could not create share link. Missing file: C:\Users\xx\.conda\envs\omni\Lib\site-packages\gradio\frpc_windows_amd64_v0.3 1. Download this file: https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_windows_amd64.exe 2. Rename the downloaded file to: frpc_windows_amd64_v0.3 3. Move the file to this location: C:\Users\xx\.conda\envs\omni\Lib\site-packages\gradio

Global site tag (gtag.js) - Google Analytics