实时调试插值方程:interpolator​

Quibbler 2022-7-17 590

实时调试插值方程: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()

        



不忘初心的阿甘
最新回复 (0)
    • 安卓笔记本
      2
        登录 注册 QQ
返回
仅供学习交流,切勿用于商业用途。如有错误欢迎指出:fluent0418@gmail.com