当数学遇上动画(3)

当数学遇上动画:讲述 ValueAnimator、TypeEvaluator和TimeInterpolator之间的恩恩怨怨(3)

上一节我们得到一个重要的结论,借助TimeInterpolator或者TypeEvaluator“单独” 来控制动画所产生的动画效果殊途同归!

此外,上一节结尾我们还说到,项目AnimationEasingFunctions和项目EaseInterpolator本质上是差不多的,都是定义了一些动画效果对应的函数曲线。前者是将其封装成了TypeEvaluator,后者是将其封装成了Interpolator

这一节我们来研究下这些函数曲线。

1 缓动函数曲线

下图显示了常见的这些函数曲线,到底这些函数曲线都是什么鬼呢?

img

这些函数曲线最早是由Robert Penner提出来用于实现补间动画的"Penner easing functions",这些曲线主要分成10类,包括"BACK", "BOUNCE", "CIRCULAR", "ELASTIC", "EXPO", "QUAD", "CUBIC", "QUART", "QUINT", "SINE",每一类下面都有缓动进入、缓动退出以及缓动进入和退出三种效果,所以共有30个。这些效果对照着函数曲线来看其实也挺好理解,"QUAD", "CUBIC", "QUART", "QUINT"分别对应着二次、三次、四次以及五次曲线,"SINE"对应正弦函数曲线,"EXPO"对应指数函数曲线等等。其中"BACK""ELASTIC"有上冲和下冲的效果。

Robert Penner在Github上开源了jQuery的版本实现,随后也就有了很多不同语言版本的实现,例如Java版本的jesusgollonet/processing-penner-easing以及代码家的Android版本的AnimationEasingFunctions等等。

这些版本的实现都是4个参数的,分别是起始值b、数值间隔c(结束值-起始值)、当前时间t、时间间隔d

这是因为当Interpolator传入到后面的TypeEvaluator的时候就有了起始值、结束值以及时间间隔(时间间隔定义在缓动函数内部,只有部分缓动函数需要这个参数)这3个参数,可以参考下面的代码来理解,所以说,它们在本质上还是一样的!

2 One more thing

看到这里的话,我们就会想啦,如果我们把函数曲线抽象出来,然后再提供相应的转换方法,使其轻轻松松地转换成InterpolatorTypeEvaluator的话,如此,岂不善哉?

所以,我就站在众多巨人们的肩膀上,写了一个新项目Yava,项目代码非常简单,而且代码很少只有4个重要的类,它实现的功能就是将抽象的函数曲线轻松转换成立即可用的InterpolatorTypeEvaluator,并且提供了常见的30个缓动函数(Easing Functions)的实现,它们既可以当做Interpolator来用,又可以当做TypeEvaluator来用,非常方便。

这里我直接把这4个重要类的代码贴出来吧。

(1) IFunction接口

(2)AbstractFunction抽象类

(3)Functions

(4)EasingFunction枚举:包含了30个常见的缓动函数

这个项目的缓动函数的实现参考自EaseInterpolator中的实现,但是这个项目的代码和EaseInterpolator以及AnimationEasingFunctions这两个项目都完全不一样,非常简单易懂,既保留了原有项目应有的功能,同时为项目的使用场景提供了更多的可能,任何你想使用Interpolator或者TypeEvaluator都能使用它。

举个例子,以上一节中的弹跳动画效果为例,现在可以直接使用EasingFunction.BOUNCE_OUT作为Interpolator或者TypeEvaluator来使用:

第一种方式:使用线性插值器和自定义的TypeEvaluator

第二种方式:使用自定义的Interpolator和”线性估值器”

如果你想使用自己定义的函数来制作动画,可以使用Functionswith方法,传入一个实现了IFunction接口的类就行,返回值你既可以当做Interpolator,也可以当做TypeEvaluator来使用

代码示例:

或者这样:

为了方便查看定义出来的InterpolatorTypeEvaluator的效果,我将前面两个项目中的可视化部分整理到项目Yava中,样例应用还包含了上一节的用来作验证的例子,最终效果如下:

img

恭喜你终于看完了,也恭喜自己终于写完了。至此,你可能还有一个疑惑,那就是那些函数曲线是怎么想出来的?这个…我也不知道,我也想知道,别问我,去问Robert Penner吧 😌

最后,我还准备写另一个Android动画效果库wava,神一样的代码家还做了一个超厉害的项目AndroidViewAnimations,目前我的wava只是基于它做些改进,后期我打算加上一些很特别的东西,暂时不表,欢迎关注项目wava 😘

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

1 3 收藏 3 评论

关于作者:五道口宅男潇涧

平凡之路,平凡如我! 个人主页 · 我的文章 · 5 ·    

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部