插值器(Interpolator)的使用说明

Posted 2023-04-17

参考技术A

插值器(Interpolator)和估值器(TypeEvaluator)是实现复杂动画效果的关键，本文主要介绍插值器的使用和如何自定义插值器。

android实现动画效果中的一个辅助接口
作用：设置 属性值 从初始值过渡到结束值 的变化规律

适用于非线性运动动画效果上

系统为我们默认实现了九个插值器分别为：

效果展示

动画加速运行(默认效果)

效果

快速完成动画，超出后再回到结束样式

效果

先加速再减速

效果

先退后在加速前进

效果

先退后再加速前进，超出后在返回终点

效果

最后阶段弹球效果

周期运动

效果

减速

匀速

效果

如果上述的插值器无法满足你的要求，你也可以自定义插值器，这里需要注意的是

下面是属性动画插值器的例子：

那么系统的插值器是如何实现的呢，我们以先减速后加速的AccelerateDecelerateInterpolator为例看一下系统的实现，源码如下:

首先我们知道input在0-1间匀速增长,那么(input + 1) * Math.PI的取值范围为π到2π之间，而cos在π到2π之间是先负后正，取值范围为-1到1之间，除以2后的取值范围为-0.5到0.5之间而加上0.5的取值范围为0,1（即0-100%),但在变化的过程中前一半的变化越来越块，后一半的变化越来越慢，所以是一个先加速后减速的过程。

对比着系统的AccelerateDecelerateInterpolator，我们写一个先减速后加速的AccelerateDecelerateInterpolator出来

效果

以上就是插值器的全部内容。

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

Android动画和Transition系列文章

• 初识属性动画——使用Animator创建动画
• 再谈属性动画——介绍以及自定义Interpolator插值器
• 三谈属性动画——Keyframe以及ViewPropertyAnimator
• 让View具有减速效果的动画——FlingAnimation
• 让View具有弹性效果的动画——SpringAnimation
• 让View跟随状态动起来——StateListAnimator
• 仿抖音发布按住拍呼吸效果
• Jetpack学习之——使用动画缩放图片
• 使用动画隐藏或显示View
• Android中具有动画效果的图片资源
• ViewGroup内容改变时的动画效果—LayoutTransition
• 在布局切换之间实现Transition动画
• 在Activity切换之间实现Transition动画
• 让转场更加酷炫——自定义Transition

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

官方Interpolator介绍

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

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

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

自定义Interpolator

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

先看官方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。
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

参考

• https://developer.android.com/guide/topics/graphics/prop-animation?hl=zh-cn#interpolators
• http://wiki.jikexueyuan.com/project/android-animation/2.html
• https://medium.com/mindorks/understanding-interpolators-in-android-ce4e8d1d71cd
• https://robots.thoughtbot.com/android-interpolators-a-visual-guide

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