仿天貓超市收藏拋物線動畫工具庫

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

• 添加緩動函數效果