首页 > 代码库 > Android中Animation 详细解读

Android中Animation 详细解读

2024-07-26 09:43:12   223人阅读

Animation从总体来说可以分为两类：

1.Tweened Animations：该类提供了旋转，移动，伸展，淡入淡出等效果

Tweened Animations也有四种类型：

1.     Alpha：淡入淡出效果

2.     Scale：缩放效果

3.     Rotate：旋转效果

4.     Translate：移动效果

设置动画有两种方式：在xml文件中或者在java代码中

在XML中设置动画效果步骤：

1.     在res文件夹下新建一个名为anim的文件夹

2.     创建xml文件，并首先加入set标签（set标签就相当于Java代码中的AnimationSet）

3.     在Set标签中加入alpha，scale，rotate，translate标签（相当于Java代码中的AlphaAnimation，ScaleAnimation，RotateAnimation，TranslateAnimation）

4.     在Java代码中使用AnimationUtils的loadAnimation方法来加载XML文件，并得到一个Animation对象

5.     使用控件的startAnimation()方法执行这个Animation对象

那么通用的属性：

  • android:duration：设置动画持续时间
  • android:fillAfter：如果fillAfter设为true，则动画执行后，控件将停留在动画结束的状态
  • android:fillBefore：如果fillBefore设为true，则动画执行后，控件将回到动画开始的状态
  • android:startOffset(long startOffset)：设置动画执行之前等待的时间（单位：毫秒）
  • android:repeatCount(int repeatCount)：设置动画重复的次数
  • android:interpolator：设置动画的变化速度，其值： ｛

android:interpolator="@android:anim/accelerate_decelerate_interpolator"：先加速，后减速

android:interpolator="@android:anim/accelerate_interpolator"：加速

android:interpolator="@android:anim/decelerate_interpolator"：减速

android:interpolator="@android:anim/cycle_Interpolator"：动画循环播放特定次数，速率改变沿着正弦曲线

android:interpolator="@android:anim/linear_Interpolator"：匀速

｝

示例：

[java] view plaincopyprint?
  1. 1.  <?xml version="1.0" encoding="utf-8"?>    
  2. 2.  <set xmlns:android="http://schemas.android.com/apk/res/android"    
  3. 3.      android:interpolator="@android:anim/accelerate_interpolator" >    
  4. 4.      
  5. 5.      <alpha    
  6. 6.          android:duration="500"    
  7. 7.          android:fromAlpha="1.0"    
  8. 8.          android:startOffset="500"    
  9. 9.          android:toAlpha="0.0" />    
  10. 10.     
  11. 11. </set>    
1.	<?xml version="1.0" encoding="utf-8"?>  2.	<set xmlns:android="http://schemas.android.com/apk/res/android"  3.	    android:interpolator="@android:anim/accelerate_interpolator" >  4.	  5.	    <alpha  6.	        android:duration="500"  7.	        android:fromAlpha="1.0"  8.	        android:startOffset="500"  9.	        android:toAlpha="0.0" />  10.	  11.	</set>

 

rotate.xml

[java] view plaincopyprint?
  1. 1.  <?xml version="1.0" encoding="utf-8"?>    
  2. 2.  <set xmlns:android="http://schemas.android.com/apk/res/android"    
  3. 3.      android:interpolator="@android:anim/accelerate_interpolator" >    
  4. 4.      
  5. 5.      <rotate    
  6. 6.          android:duration="5000"    
  7. 7.          android:fromDegrees="0"    
  8. 8.          android:pivotX="50%"    
  9. 9.          android:pivotY="50%"    
  10. 10.         android:toDegrees="360" />    
  11. 11.     
  12. 12. </set>   
1.	<?xml version="1.0" encoding="utf-8"?>  2.	<set xmlns:android="http://schemas.android.com/apk/res/android"  3.	    android:interpolator="@android:anim/accelerate_interpolator" >  4.	  5.	    <rotate  6.	        android:duration="5000"  7.	        android:fromDegrees="0"  8.	        android:pivotX="50%"  9.	        android:pivotY="50%"  10.	        android:toDegrees="360" />  11.	  12.	</set>

scale.xml

 

[java] view plaincopyprint?
  1. 1.  <?xml version="1.0" encoding="utf-8"?>    
  2. 2.  <set xmlns:android="http://schemas.android.com/apk/res/android"    
  3. 3.      android:interpolator="@android:anim/accelerate_interpolator" >    
  4. 4.      
  5. 5.      <scale    
  6. 6.          android:duration="2000"    
  7. 7.          android:fromXScale="1.0"    
  8. 8.          android:fromYScale="1.0"    
  9. 9.          android:pivotX="50%"    
  10. 10.         android:pivotY="50%"    
  11. 11.         android:toXScale="0.0"    
  12. 12.         android:toYScale="0.0" />    
  13. 13.     
  14. 14. </set>   
1.	<?xml version="1.0" encoding="utf-8"?>  2.	<set xmlns:android="http://schemas.android.com/apk/res/android"  3.	    android:interpolator="@android:anim/accelerate_interpolator" >  4.	  5.	    <scale  6.	        android:duration="2000"  7.	        android:fromXScale="1.0"  8.	        android:fromYScale="1.0"  9.	        android:pivotX="50%"  10.	        android:pivotY="50%"  11.	        android:toXScale="0.0"  12.	        android:toYScale="0.0" />  13.	  14.	</set>


  translate.xml

 

[java] view plaincopyprint?
  1. 1.  <?xml version="1.0" encoding="utf-8"?>    
  2. 2.  <set xmlns:android="http://schemas.android.com/apk/res/android"    
  3. 3.      android:interpolator="@android:anim/accelerate_interpolator" >    
  4. 4.      
  5. 5.      <translate    
  6. 6.          android:duration="2000"    
  7. 7.          android:fromXDelta="50%"    
  8. 8.          android:fromYDelta="0%"    
  9. 9.          android:toXDelta="100%"    
  10. 10.         android:toYDelta="100%" />    
  11. 11.     
  12. 12. </set>    
1.	<?xml version="1.0" encoding="utf-8"?>  2.	<set xmlns:android="http://schemas.android.com/apk/res/android"  3.	    android:interpolator="@android:anim/accelerate_interpolator" >  4.	  5.	    <translate  6.	        android:duration="2000"  7.	        android:fromXDelta="50%"  8.	        android:fromYDelta="0%"  9.	        android:toXDelta="100%"  10.	        android:toYDelta="100%" />  11.	  12.	</set>

 

 

使用：

[java] view plaincopyprint?
  1. case R.id.alphaButton:    
  2.             Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha);    
  3.             mImageView.startAnimation(alphaAnimation);    
  4.             break;    
  5.     
  6.         case R.id.scaleButton:    
  7.             Animation scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scale);    
  8.             mImageView.startAnimation(scaleAnimation);    
  9.             break;    
  10.     
  11.         case R.id.rotateButton:    
  12.             Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate);    
  13.             mImageView.startAnimation(rotateAnimation);    
  14.             break;    
  15.     
  16.         case R.id.translateButton:    
  17.             Animation translateAnimation = AnimationUtils.loadAnimation(this, R.anim.translate);    
  18.             mImageView.startAnimation(translateAnimation);    
  19.             break;  
case R.id.alphaButton:              Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha);              mImageView.startAnimation(alphaAnimation);              break;            case R.id.scaleButton:              Animation scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scale);              mImageView.startAnimation(scaleAnimation);              break;            case R.id.rotateButton:              Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate);              mImageView.startAnimation(rotateAnimation);              break;            case R.id.translateButton:              Animation translateAnimation = AnimationUtils.loadAnimation(this, R.anim.translate);              mImageView.startAnimation(translateAnimation);              break;

java代码实现

Java代码中的通用属性：

  •    setDuration(long durationMillis)：设置动画持续事件（单位：毫秒）
  • setFillAfter(boolean fillAfter)：如果fillAfter设为true，则动画执行后，控件将停留在动画结束的状态
  • setFillBefore(boolean fillBefore)：如果fillBefore设为true，则动画执行后，控件将回到动画开始的状态
  • setStartOffset(long startOffset)：设置动画执行之前等待的时间（单位：毫秒）
  • setRepeatCount(int repeatCount)：设置动画重复的次数
  • setInterpolator(Interpolator i)：设置动画的变化速度

setInterpolator(newAccelerateDecelerateInterpolator())：先加速，后减速

setInterpolator(newAccelerateInterpolator())：加速

setInterpolator(newDecelerateInterpolator())：减速

setInterpolator(new CycleInterpolator())：动画循环播放特定次数，速率改变沿着正弦曲线

setInterpolator(new LinearInterpolator())：匀速

以及其他一些特定的动画效果

java代码

 

[java] view plaincopyprint?
  1. case R.id.alphaButton:    
  2.            // 创建一个AnimationSet对象（AnimationSet是存放多个Animations的集合）     
  3.            AnimationSet animationSet = new AnimationSet(true);    
  4.            // 创建一个AlphaAnimation对象（参数表示从完全不透明到完全透明）     
  5.            AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);    
  6.            // 设置动画执行的时间（单位：毫秒）     
  7.            alphaAnimation.setDuration(1000);    
  8.            // 将AlphaAnimation对象添加到AnimationSet当中     
  9.            animationSet.addAnimation(alphaAnimation);    
  10.            // 使用ImageView的startAnimation方法开始执行动画     
  11.            mImageView.startAnimation(animationSet);    
  12.            break;    
  13.    
  14.        case R.id.scaleButton:    
  15.            // 创建一个AnimationSet对象（AnimationSet是存放多个Animations的集合）     
  16.            animationSet = new AnimationSet(true);    
  17.            // 创建一个ScaleAnimation对象（以某个点为中心缩放）     
  18.            ScaleAnimation scaleAnimation = new ScaleAnimation(1, 0.1f, 1, 0.1f,    
  19.                    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);    
  20.            // 设置动画执行之前等待的时间（单位：毫秒）     
  21.            scaleAnimation.setStartOffset(1000);    
  22.            // 设置动画执行的时间（单位：毫秒）     
  23.            scaleAnimation.setDuration(2000);    
  24.            // 如果fillAfter设为true，则动画执行后，控件将停留在动画结束的状态     
  25.            // 运行了一下发现以下奇怪的现象     
  26.            // scaleAnimation.setFillAfter(true);不会停留在动画结束的状态     
  27.            // animationSet.setFillAfter(true);则会停留在动画结束的状态     
  28.            animationSet.setFillAfter(true);    
  29.                        // 将ScaleAnimation对象添加到AnimationSet当中     
  30.                        animationSet.addAnimation(scaleAnimation);    
  31.                        // 使用ImageView的startAnimation方法开始执行动画     
  32.                        mImageView.startAnimation(animationSet);    
  33.            break;    
  34.    
  35.        case R.id.rotateButton:    
  36.            // 创建一个AnimationSet对象（AnimationSet是存放多个Animations的集合）     
  37.            animationSet = new AnimationSet(true);    
  38.            // 创建一个RotateAnimation对象（以某个点为圆心旋转360度）     
  39.            RotateAnimation rotateAnimation = new RotateAnimation(0, 360,    
  40.                    Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.25f);    
  41.            // 设置动画执行的时间（单位：毫秒）     
  42.            rotateAnimation.setDuration(5000);    
  43.            // 将RotateAnimation对象添加到AnimationSet当中     
  44.            animationSet.addAnimation(rotateAnimation);    
  45.            // 使用ImageView的startAnimation方法开始执行动画     
  46.            mImageView.startAnimation(animationSet);    
  47.            break;    
  48.    
  49.        case R.id.translateButton:    
  50.            // 创建一个AnimationSet对象（AnimationSet是存放多个Animations的集合）     
  51.            animationSet = new AnimationSet(true);    
  52.            // 创建一个RotateAnimation对象（从某个点移动到另一个点）     
  53.            TranslateAnimation translateAnimation = new TranslateAnimation(    
  54.                    Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0.5f,    
  55.                    Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1.0f);    
  56.            // 设置动画执行的时间（单位：毫秒）     
  57.            translateAnimation.setDuration(1000);    
  58.            // 将TranslateAnimation对象添加到AnimationSet当中     
  59.            animationSet.addAnimation(translateAnimation);    
  60.            // 使用ImageView的startAnimation方法开始执行动画     
  61.            mImageView.startAnimation(animationSet);    
  62.            break;    

Android中Animation 详细解读


联系
我们