仿天猫超市收藏抛物线动画工具库

DEMO

See Demo!

工具库GIT地址

get on GIT 求波star :)

如何实现

难点在于在不超出屏幕范围的前提下，尽量抛得更高

整体思路大致如下：

我们知道抛物线的方程式为:

现在我们知道抛物线上的两个点（动画的起点和终点）以及极值点的y值（因为要刚好接触屏幕顶部，所以可以知道这个值）来解这个方程，获得a, b, c

抛物线极值点：（，）

当抛物线的方程确定之后，我们就能够画出这条轨迹了。

关于抛物线的相关知识可以参看：抛物线

关于缓动效果

如果我们需要整个动画是一个动感的效果而不是线性的执行完整个动画，这个时候就需要缓动函数了，类似CSS3中的animation-timing-function，我们给这个工具库添加了一个简易的实现，能够支持easeIn, easeOut, easeInOut和linear，如果要实现自定义更加复杂的效果，需要使用贝塞尔曲线，感兴趣的朋友可以研究下。

在动画中我们一般按照动画已经进行的时间计算出动画完成的进度，然后线性的更新动画的一个参数值（在我们的动画里面我们线性的更新x轴的值，然后计算y坐标），故整个动画过程看上去也是线性运动的，缓动函数的作用在于能够完成一种映射，把x的值根据我们定义的缓动函数映射成另一个值，打破目前这种线性的状态。一般我们会对值先进行归一化处理然后传入缓动函数进行映射。

缓动函数应该具备以下几点要求（归一化后）：

• 传入为0，输出应该为0

• 传入为1，输出应该为1

• 函数应该是连续的

---

更新记录

2016-10-08

• 添加缓动函数效果