实时调试插值方程:interpolator
分享一个实时调试插值方程的开源工具:interpolator,在动效开发中会有帮助,预览插值器效果,所见即所得。关于插值器另见动画插值器Interpolator一文。
GitHub地址:github/inloop/interpolator。
interpolator是用JavaScript和Html实现的前端项目,clone到本地打开index.html文件即可。也可以直接打开在线页面:http://inloop.github.io/interpolator/,基于GitHub搭建的博客就是用这种静态页面的方式。
内置常见插值函数,可修改/编辑自定义函数,并实时预览函数图像。再结合平移、放缩、旋转、透明度四种动画预览插值器效果。
调好插值方程后(当成辅助工具使用,通常动效方程由动效设计师设计),可以非常方便的自定义一个插值器。自定义Interpolator在动画插值器Interpolator一文中有详细介绍。
class AnticipateOvershoot : Interpolator {
private val tension = 2.0f * 1.5f
fun a(t: Float, s: Float): Float = t * t * ((s + 1) * t - s)
fun o(t: Float, s: Float): Float = t * t * ((s + 1) * t + s)
override fun getInterpolation(x: Float): Float {
return if (x < 0.5f) 0.5f * a(x * 2.0f, tension)
else 0.5f * (o(x * 2.0f - 2.0f, tension) + 2.0f)
}
}
将自定义的插值器设置给补间动画Animation、属性动画Animator:
val animator: Animator = ObjectAnimator.ofFloat(imageView, "rotation", 0f, 180f)
//给动画设置自定义插值器
animator.interpolator = AnticipateOvershoot()
animator.duration = 1000
animator.start()
精彩的人生需要浪漫、无畏和勇气。