Android中Animation 详细解读
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":匀速
}
示例:
- 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>
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
- 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>
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
- 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>
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
- 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>
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>
使用:
- 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;
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代码
- case R.id.alphaButton:
- // 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
- AnimationSet animationSet = new AnimationSet(true);
- // 创建一个AlphaAnimation对象(参数表示从完全不透明到完全透明)
- AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
- // 设置动画执行的时间(单位:毫秒)
- alphaAnimation.setDuration(1000);
- // 将AlphaAnimation对象添加到AnimationSet当中
- animationSet.addAnimation(alphaAnimation);
- // 使用ImageView的startAnimation方法开始执行动画
- mImageView.startAnimation(animationSet);
- break;
- case R.id.scaleButton:
- // 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
- animationSet = new AnimationSet(true);
- // 创建一个ScaleAnimation对象(以某个点为中心缩放)
- ScaleAnimation scaleAnimation = new ScaleAnimation(1, 0.1f, 1, 0.1f,
- Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
- // 设置动画执行之前等待的时间(单位:毫秒)
- scaleAnimation.setStartOffset(1000);
- // 设置动画执行的时间(单位:毫秒)
- scaleAnimation.setDuration(2000);
- // 如果fillAfter设为true,则动画执行后,控件将停留在动画结束的状态
- // 运行了一下发现以下奇怪的现象
- // scaleAnimation.setFillAfter(true);不会停留在动画结束的状态
- // animationSet.setFillAfter(true);则会停留在动画结束的状态
- animationSet.setFillAfter(true);
- // 将ScaleAnimation对象添加到AnimationSet当中
- animationSet.addAnimation(scaleAnimation);
- // 使用ImageView的startAnimation方法开始执行动画
- mImageView.startAnimation(animationSet);
- break;
- case R.id.rotateButton:
- // 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
- animationSet = new AnimationSet(true);
- // 创建一个RotateAnimation对象(以某个点为圆心旋转360度)
- RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
- Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.25f);
- // 设置动画执行的时间(单位:毫秒)
- rotateAnimation.setDuration(5000);
- // 将RotateAnimation对象添加到AnimationSet当中
- animationSet.addAnimation(rotateAnimation);
- // 使用ImageView的startAnimation方法开始执行动画
- mImageView.startAnimation(animationSet);
- break;
- case R.id.translateButton:
- // 创建一个AnimationSet对象(AnimationSet是存放多个Animations的集合)
- animationSet = new AnimationSet(true);
- // 创建一个RotateAnimation对象(从某个点移动到另一个点)
- TranslateAnimation translateAnimation = new TranslateAnimation(
- Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0.5f,
- Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1.0f);
- // 设置动画执行的时间(单位:毫秒)
- translateAnimation.setDuration(1000);
- // 将TranslateAnimation对象添加到AnimationSet当中
- animationSet.addAnimation(translateAnimation);
- // 使用ImageView的startAnimation方法开始执行动画
- mImageView.startAnimation(animationSet);
- break;