再谈属性动画——介绍以及自定义Interpolator插值器

川长思鸟来 2022-10-01 06:43 233阅读 0赞

属性动画中有一个重要的概念就是插值器——Interpolator，根据流失的时间因子计算得到属性因子。Android中默认的插值器是AccelerateDecelerateInterpolator，内置了很多插值器，本文将以一个例子介绍各种插值器的效果，以及如何自定义Interpolator。  
话不多说，先看demo，如下图：

## 官方Interpolator介绍 ##

除了最后一个是自定义Interpolator外，其他都是系统自带的。下面主要介绍下效果就好了：

*  AccelerateDecelerateInterpolator：先加速、再减速，默认的插值器
 *  LinearInterpolator：线性插值器
 *  AccelerateInterpolator：加速
 *  DecelerateInterpolator：减速
 *  AnticipateInterpolator：开始时先反向
 *  BounceInterpolator：达到最终位置会先反弹，类似弹弹球着地的效果
 *  OvershootInterpolator:达到最终位置会超出一些
 *  AnticipateOvershootInterpolator：AnticipateInterpolator与OvershootInterpolator的结合
 *  CycleInterpolator：正弦效果，可以指定回荡的次数
 *  PathInterpolator：根据指定的path进行运动，可以实现贝塞尔曲线

Interpolator既可以在代码中指定给动画，同样也可以在xml文件中使用，这块可以到参考文章中查看。

## 自定义Interpolator ##

先介绍一个网站，里面有各种Interpolator的效果以及数学公式定义，网址是 [inloop.github.io/interpolato…][inloop.github.io_interpolato] 。

### 先看官方Interpolator找找灵感 ###

Interpolator的核心是下面这个方法：

float getInterpolation(float input);
    复制代码

其中input就是流失的时间因子，范围是\[0,1\]，输出是属性因子。  
LinearInterpolator的函数是个一次函数，样式如下：

相对应的，LinearInterpolator的方法实现如下：

public float getInterpolation(float input) {
            return input;
        }
    复制代码

而AccelerateInterpolator的函数是个二次函数，样式如下：

相对应地，实现如下：

public float getInterpolation(float input) {
            if (mFactor == 1.0f) {
                return input * input;
            } else {
                return (float)Math.pow(input, mDoubleFactor);
            }
        }
    复制代码

看完了官方的两个例子，再来看看如何自定义Interpolator。

### 自定义Interpolator——SpringInterpolator ###

可以看到，我们自定义的Interpolator在达到终点后，有多次震荡的效果，是不是很像弹簧？这个可以通过自定义Interpolator实现，也可以通过DynamicAnimation实现，具有可以参考[让View具有弹性效果的动画——SpringAnimation][View_SpringAnimation]。  
SpringInterpolator的函数很复杂，样式如下：

然后就是根据函数实现方法了，具体如下：

class SpringInterpolator(val factor: Float) : Interpolator{
        
        override fun getInterpolation(input: Float): Float {
            return (Math.pow(2.0, -10.0 * input) * Math.sin((input - factor / 4) * (2 * Math.PI) / factor) + 1).toFloat()
        }
    }
    复制代码

这么复杂的函数，如果你问我是怎么会的，那我只能告诉你，去上面那个网址看吧，你会发现自定义Interpolator原来这么容易。

**其实自定义Interpolator的核心就是这个上面的函数样式，以及将其再转换成代码就ok了。**

## 总结 ##

关于代码，参考[Github][]

## 参考 ##

*  [developer.android.com/guide/topic…][developer.android.com_guide_topic]
 *  [wiki.jikexueyuan.com/project/and…][wiki.jikexueyuan.com_project_and]
 *  [medium.com/mindorks/un…][medium.com_mindorks_un]
 *  [robots.thoughtbot.com/android-int…][robots.thoughtbot.com_android-int]

> 关注我的技术公众号，不定期会有技术文章推送，不敢说优质，但至少是我自己的学习心得。微信扫一扫下方二维码即可关注：  
>

转载于:https://juejin.im/post/5c73549bf265da2dc8496e3e

[inloop.github.io_interpolato]: https://link.juejin.im?target=http%3A%2F%2Finloop.github.io%2Finterpolator%2F
[View_SpringAnimation]: https://juejin.im/post/5c948c6be51d4501d909fdda
[Github]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fwangli135%2FClimbDemo%2Ftree%2Fmaster%2Fjetpackdemo%2Fsrc%2Fmain%2Fjava%2Fcom%2Fxingfeng%2Fjetpackdemo%2Fanimation%2Fpropertyanimator
[developer.android.com_guide_topic]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.android.com%2Fguide%2Ftopics%2Fgraphics%2Fprop-animation%3Fhl%3Dzh-cn%23interpolators
[wiki.jikexueyuan.com_project_and]: https://link.juejin.im?target=http%3A%2F%2Fwiki.jikexueyuan.com%2Fproject%2Fandroid-animation%2F2.html
[medium.com_mindorks_un]: https://link.juejin.im?target=https%3A%2F%2Fmedium.com%2Fmindorks%2Funderstanding-interpolators-in-android-ce4e8d1d71cd
[robots.thoughtbot.com_android-int]: https://link.juejin.im?target=https%3A%2F%2Frobots.thoughtbot.com%2Fandroid-interpolators-a-visual-guide