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

Android动画和Transition系列文章

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

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

官方Interpolator介绍

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

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

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

自定义Interpolator

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

先看官方Interpolator找找灵感

Interpolator的核心是下面这个方法&＃xff1a;

float getInterpolation(float input);


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

相对应的&＃xff0c;LinearInterpolator的方法实现如下&＃xff1a;

public float getInterpolation(float input) {return input;}


而AccelerateInterpolator的函数是个二次函数&＃xff0c;样式如下&＃xff1a;

相对应地&＃xff0c;实现如下&＃xff1a;

public float getInterpolation(float input) {if (mFactor &＃61;&＃61; 1.0f) {return input * input;} else {return (float)Math.pow(input, mDoubleFactor);}}


看完了官方的两个例子&＃xff0c;再来看看如何自定义Interpolator。

自定义Interpolator——SpringInterpolator

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

然后就是根据函数实现方法了&＃xff0c;具体如下&＃xff1a;

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) &＃43; 1).toFloat()}
}


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

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

总结

关于代码&＃xff0c;参考Github

参考

• https://developer.android.com/guide/topics/graphics/prop-animation?hl&＃61;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

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