一.效果图

补间(View)动画 - 图1

二.使用 xml 文件实现方式

通用属性:

  • android:duration 动画持续时间,以毫秒为单位
  • android:fillAfter 如果设置为true,控件动画结束时,将保持动画最后时的状态
  • android:fillBefore 如果设置为true,控件动画结束时,还原到开始动画前的状态
  • android:fillEnabled 与android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态
  • android:repeatCount 重复次数
  • android:repeatMode 重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍,必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。
  • android:interpolator 设定插值器,其实就是指定的动作效果,比如弹跳效果等
  1. 渐变
    自身属性:
  • android:fromAlpha 动画开始的透明度,从0.0 —1.0 ,0.0表示全透明,1.0表示完全不透明

  • android:toAlpha 动画结束时的透明度,也是从0.0 —1.0 ,0.0表示全透明,1.0表示完全不透明

示例:

  1. anim 文件:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"
  3. >
  4. <alpha android:fromAlpha="1.0"
  5. android:toAlpha="0.0"
  6. android:duration="2000"/>
  7. </set>

调用:

  1. Animation animation = AnimationUtils.loadAnimation(this, R.anim.view_alpha);
  2. animation.setFillAfter(true);//设置保持动画后的状态
  3. mIvIcon.startAnimation(animation);
  1. 平移
    自身属性:
  • android:fromXDelta 起始点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,具体意义已在scale标签中讲述,这里就不再重讲
  • android:fromYDelta 起始点Y轴从标,可以是数值、百分数、百分数p 三种样式;
  • android:toXDelta 结束点X轴坐标
  • android:toYDelta 结束点Y轴坐标

示例:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <translate android:fromXDelta="0"
  4. android:toXDelta="100%"
  5. android:fromYDelta="0"
  6. android:toYDelta="100%"
  7. android:duration="2000"
  8. />
  9. </set>
  1. 缩放
    自身属性:
  • android:fromXScale 起始的X方向上相对自身的缩放比例,浮点值,比如1.0代表自身无变化,0.5代表起始时缩小一倍,2.0代表放大一倍;
  • android:toXScale 结尾的X方向上相对自身的缩放比例,浮点值;
  • android:fromYScale 起始的Y方向上相对自身的缩放比例,浮点值,
  • android:toYScale 结尾的Y方向上相对自身的缩放比例,浮点值;
  • android:pivotX 缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,当为数值时,表示在当前View的左上角,即原点处加上50px,做为起始缩放点;如果是50%,表示在当前控件的左上角加上自己宽度的50%做为起始点;如果是50%p,那么就是表示在当前的左上角加上父控件宽度的50%做为起始点x轴坐标。
  • android:pivotY 缩放起点Y轴坐标,取值及意义跟android:pivotX一样。

示例:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:duration="2000">
  4. <scale android:fromXScale="1.0"
  5. android:toXScale="0.5"
  6. android:fromYScale="1.0"
  7. android:toYScale="0.5"
  8. android:pivotX="100%p"
  9. android:pivotY="100%p"/>
  10. <!--默认缩放中心在左上角-->
  11. </set>
  1. 旋转
    自身属性:
  • android:fromDegrees 开始旋转的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数
  • android:toDegrees 结束时旋转到的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数
  • android:pivotX 缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p
  • android:pivotY 缩放起点Y轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p

示例:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <rotate android:pivotX="50%"
  4. android:pivotY="50%"
  5. android:fromDegrees="0"
  6. android:toDegrees="180"
  7. android:duration="2000"/>
  8. </set>
  1. 动画集合
    示例:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:duration="2000"
  4. android:fillAfter="true">
  5. <alpha android:fromAlpha="1"
  6. android:toAlpha="0.5"/>
  7. <rotate android:fromDegrees="0"
  8. android:toDegrees="180"
  9. android:pivotX="50%"
  10. android:pivotY="50%"
  11. />
  12. </set>

三.使用代码实现

  1. 渐变
  1. //声明一个渐变动画, 参数1代表起始透明度,参数2代表结束透明度 //1代表完全不透明,0是完全透明
  2. AlphaAnimation alphaAnimation = new AlphaAnimation(1f, 0f);
  3. //设置持续时间
  4. alphaAnimation.setDuration(2000);
  5. //设置动画后的状态
  6. alphaAnimation.setFillAfter(true);
  7. //设置重复次数
  8. alphaAnimation.setRepeatCount(2);
  9. //设置重复模式
  10. alphaAnimation.setRepeatMode(Animation.REVERSE);
  11. //设置动画监听
  12. alphaAnimation.setAnimationListener(new Animation.AnimationListener() {
  13. @Override
  14. public void onAnimationStart(Animation animation) {
  15. }
  16. @Override
  17. public void onAnimationEnd(Animation animation) {
  18. }
  19. @Override
  20. public void onAnimationRepeat(Animation animation) {
  21. }
  22. });
  23. mIvIcon.startAnimation(alphaAnimation);
  1. 平移
  1. // (int fromXType, 表示X的起始值类型,该类型指定相对长度的类型
  2. // Animation.RELATIVE_TO_PARENT 相对于父亲的长度
  3. // Animation.RELATIVE_TO_SELF 相对于自身的长度
  4. // Animation.ABSOLUTE 表示绝对类型,传入长度的绝对值
  5. // float fromXValue, 表示的是动画开始的时候,X的起始位置 (值由类型确定)
  6. //
  7. // int toXType, 表示X的结束值类型,该类型指定相对长度的类型
  8. // float toXValue,表示的是动画结束的时候,X的结束位置 (值由类型确定)
  9. //
  10. // y的起始类型, y的起始值 y的结束类型, y的结束值
  11. // int fromYType, float fromYValue, int toYType, float toYValue
  12. TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0f
  13. , Animation.RELATIVE_TO_PARENT, 1f,
  14. Animation.RELATIVE_TO_PARENT, 0f,
  15. Animation.RELATIVE_TO_PARENT, 1f);
  16. translateAnimation.setDuration(2000);
  17. translateAnimation.setFillAfter(true);
  18. mIvIcon.startAnimation(translateAnimation);
  1. 缩放
  1. // float fromX, 起始X的大小, 值为自身长度的倍数
  2. //
  3. // float toX, 结束X的大小, 值为自身长度的倍数
  4. // float fromY,
  5. // float toY,
  6. // int pivotXType, 缩放中心点的X位置的类型, 相对长度类型
  7. // float pivotXValue, 圆心的X的值 (值由类型确定) ,相对长度类型
  8. // int pivotYType, float pivotYValue
  9. ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 0.5f, 1.0f, 0.5f);
  10. scaleAnimation.setFillAfter(true);
  11. scaleAnimation.setDuration(2000);
  12. mIvIcon.startAnimation(scaleAnimation);
  1. 旋转
  1. //申明一个旋转动画 参数1:起始角度 参数2:旋转的度数 起始值小于结束值 顺时针, 大于 逆时针
  2. // RotateAnimation rotateAnimation = new RotateAnimation(-180, -90);
  3. // RotateAnimation rotateAnimation = new RotateAnimation(0, 180, 150, 0);
  4. // float fromDegrees,起始角度
  5. // float toDegrees, 结束角度 起始值小于结束值 顺时针旋转, 大于 逆时针旋转
  6. // int pivotXType, 表示圆心X位置的相对类型, 相对长度类型
  7. //
  8. // float pivotXValue, 圆心的X的值 (值由类型确定)
  9. //
  10. // int pivotYType, float pivotYValue
  11. //设置旋转中心在图片的中心
  12. RotateAnimation rotateAnimation = new RotateAnimation(0, 180
  13. ,Animation.RELATIVE_TO_SELF,0.5f,
  14. Animation.RELATIVE_TO_SELF,0.5f);
  15. rotateAnimation.setDuration(2000);
  16. rotateAnimation.setFillAfter(true);
  17. mIvIcon.startAnimation(rotateAnimation);
  1. 集合
  1. //先声明一个动画集合
  2. AnimationSet animationSet = new AnimationSet(true);
  3. //声明需要的动画
  4. RotateAnimation rotateAnimation = new RotateAnimation(0, 180
  5. ,Animation.RELATIVE_TO_SELF,0.5f,
  6. Animation.RELATIVE_TO_SELF,0.5f);
  7. ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 0.5f, 1.0f, 0.5f);
  8. //将每个动画添加进动画集合
  9. animationSet.addAnimation(rotateAnimation);
  10. animationSet.addAnimation(scaleAnimation);
  11. animationSet.setDuration(3000);
  12. animationSet.setFillAfter(true);
  13. mIvIcon.startAnimation(animationSet);

四、地址和参考

demo
Android:这是一份全面 & 详细的补间动画使用教程