实时调试插值方程:interpolator​

QuibblerQuibbler 2022-07-17 约 3 分钟 2374 次阅读

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

相关推荐

Airbnb开源项目
精选开源

Airbnb开源项目

Airbnb Engineering & Data ScienceAirflow Use Apache Airflow (incubating) to author workflows as directed acyclic graphs (DAGs) of tasks12,263Airpal Web UI for PrestoDB2,502Aerosolve A machine learning

2.3k
WilliamChart:轻量美观的 Android 图表库实战
精选开源

WilliamChart:轻量美观的 Android 图表库实战

WilliamChart:轻量美观的 Android 图表库实战数据可视化是运动、健康、金融、统计类 App 的刚需。MPAndroidChart 功能最全但偏重复杂,WilliamChart 走的则是"轻量 + 美观 + Kotlin 原生"路线——v3 用 Kotlin 完全重写,API 极简,一行 chart.animate(dataSet) 就能把数据画成带动画的折线/柱状/环形图,开箱即

175
sherpa解析:开源语音技术全家桶
精选开源

sherpa解析:开源语音技术全家桶

想在手机、树莓派甚至 RISC-V 开发板上离线跑语音识别,五年前还是个需要啃 Kaldi 源码的硬核课题。k2-fsa 组织的 sherpa 把这件事变成了"下载预训练模型、装个包、跑示例"的三步操作。这个以 Apache-2.0 协议开源的项目自我定位是"新一代 Kaldi 的语音转文本框架",它专注端到端模型的推理部署:transducer 与 CTC 两类架构,C++ 与 Python 双…

44