自定义控件三部曲之动画篇（二）——Interpolator插值器

谁践踏了优雅 2023-07-24 11:37 112阅读 0赞

一、概述
Interpolator属性是Animation类的一个XML属性，所以alpha、scale、rotate、translate、set都会继承得到这个属性。Interpolator被译为插值器，其实我不大能从字面上理解为什么会这样译，其实他是一个指定动画如何变化的东东，跟PS里的动作有点类似：随便拿来一张图片，应用一个动作，图片就会指定变化。

Interpolator的系统值有下面几个：
Center

意义如下：

  • AccelerateDecelerateInterpolator 在动画开始与介绍的地方速率改变比较慢，在中间的时候加速
  • AccelerateInterpolator 在动画开始的地方速率改变比较慢，然后开始加速
  • AnticipateInterpolator 开始的时候向后然后向前甩
  • AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值
  • BounceInterpolator 动画结束的时候弹起
  • CycleInterpolator 动画循环播放特定的次数，速率改变沿着正弦曲线
  • DecelerateInterpolator 在动画开始的地方快然后慢
  • LinearInterpolator 以常量速率改变
  • OvershootInterpolator 向前甩一定值后再回到原来位置

下面看看各个标签在应用上面的每个插值器后会运动轨迹会怎样。

二、scale标签
下面先看看Scale标签应用插值器后，都会变成什么样。

先看下XML代码：（从控件中心点，从0放大到1.4倍，保持结束时的状态）

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <scale xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  4.     android:fromXScale="0.0"
  5.     android:toXScale="1.4"
  6.     android:fromYScale="0.0"
  7.     android:toYScale="1.4"
  8.     android:pivotX="50%"
  9.     android:pivotY="50%"
  10.     android:duration="700" 
  11.     android:fillAfter="true"
  12. />

下面一个个看看，每个xml值对应的scale动画是怎样的。

20141014100448155

AccelerateInterpolator DecelerateInterpolator

在动画开始的地方速率改变比较慢，然后开始加速 在动画开始的地方快然后慢
20141014100351156 20141014100435625

  1.  AnticipateInterpolator                                            AnticipateOvershootInterpolator 
  3.   开始的时候向后然后向前甩                                开始的时候向后然后向前甩一定值后返回最后的值

20141014100844153 20141014100645812

  1.   BounceInterpolator                                                      CycleInterpolator       
  3.         动画结束的时候弹起                             动画循环播放特定的次数，速率改变沿着正弦曲线

20141014100959000 20141014101013515

  1. LinearInterpolator                                  OvershootInterpolator  
  3.    以常量速率改变                                向前甩一定值后再回到原来位置

20141014101133296 20141014101354297

三、rotate标签

下面先看看rotate标签应用插值器后，都会变成什么样。

先看下XML代码：（从控件中心点，从0放大到1.4倍，保持结束时的状态）

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <rotate xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  4.     android:fromDegrees="0"
  5.     android:toDegrees="360"
  6.     android:pivotX="50%"
  7.     android:pivotY="50%"
  8.     android:duration="700" 
  9.     android:fillAfter="true"
  10. />

AccelerateDecelerateInterpolator 在动画开始与介绍的地方速率改变比较慢，在中间的时候加速

20141014200459312

AccelerateInterpolator DecelerateInterpolator

在动画开始的地方速率改变比较慢，然后开始加速 在动画开始的地方快然后慢

  1.   ![20141014201358240][]      ![20141014201159171][]

AnticipateInterpolator AnticipateOvershootInterpolator 

  1.   开始的时候向后然后向前甩                                开始的时候向后然后向前甩一定值后返回最后的值

20141014201455367 20141014201256609

BounceInterpolator CycleInterpolator 

  1.         动画结束的时候弹起                             动画循环播放特定的次数，速率改变沿着正弦曲线

20141014201444843 20141014201452562

LinearInterpolator OvershootInterpolator

以常量速率改变 向前甩一定值后再回到原来位置
20141014201524062 20141014201741819

四、alpha标签

下面先看看alpha标签应用插值器后，都会变成什么样。

将透明度从0变成1.0，使用不同的插值器看看有什么不同（因为只是透明度的变化，所以基本看不出来有什么不同）

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <alpha xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  4.     android:fromAlpha="0.0"
  5.     android:toAlpha="1.0"
  6.     android:duration="3000" 
  7.     android:fillAfter="true"
  8. />

AccelerateDecelerateInterpolator 在动画开始与介绍的地方速率改变比较慢，在中间的时候加速
20141014203758312

AccelerateInterpolator DecelerateInterpolator

在动画开始的地方速率改变比较慢，然后开始加速 在动画开始的地方快然后慢
20141014203950812 20141014204217519

AnticipateInterpolator AnticipateOvershootInterpolator 

  1.   开始的时候向后然后向前甩                                开始的时候向后然后向前甩一定值后返回最后的值

20141014204035859 20141014204256192

  1.          BounceInterpolator                                                      CycleInterpolator       
  3.         动画结束的时候弹起                             动画循环播放特定的次数，速率改变沿着正弦曲线

20141014204223218 20141014204444113

  1.     LinearInterpolator                                   OvershootInterpolator  
  3.                   以常量速率改变                                 向前甩一定值后再回到原来位置

20141014204249078 20141014204506390

五、translate标签

下面先看看translate标签应用插值器后，都会变成什么样。

把控件从（0，0）平移到（-200，-200）的位置，保持结束时状态不变，使用不同插值器。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <translate xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  4.     android:fromXDelta="0"   
  5.     android:toXDelta="-200"  
  6.     android:fromYDelta="0"  
  7.     android:toYDelta="-200"  
  8.     android:duration="2000"  
  9.     android:fillAfter="true"
  10. />

AccelerateDecelerateInterpolator 在动画开始与介绍的地方速率改变比较慢，在中间的时候加速

20141014205955856

  1. AccelerateInterpolator                                                 DecelerateInterpolator

在动画开始的地方速率改变比较慢，然后开始加速 在动画开始的地方快然后慢

20141014210012627 20141014210025247

  1. AnticipateInterpolator                                            AnticipateOvershootInterpolator 
  3.   开始的时候向后然后向前甩                                开始的时候向后然后向前甩一定值后返回最后的值

20141014205837718 20141014205846531

  1.      BounceInterpolator                                                      CycleInterpolator       
  3.         动画结束的时候弹起                             动画循环播放特定的次数，速率改变沿着正弦曲线

20141014210117944 20141014210124309

  1. LinearInterpolator                                  OvershootInterpolator

以常量速率改变 向前甩一定值后再回到原来位置
20141014205937203 20141014210155337

这篇文章到这就结束了，因为动画比较多，可能看的会有点晕。

发表评论

表情：
评论列表 （有 0 条评论，112人围观）

还没有评论，来说两句吧...

相关阅读