亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

wudengzan / 2285人閱讀

摘要:一般我們會對值先進(jìn)行歸一化處理然后傳入緩動函數(shù)進(jìn)行映射。緩動函數(shù)應(yīng)該具備以下幾點要求歸一化后傳入為,輸出應(yīng)該為傳入為,輸出應(yīng)該為函數(shù)應(yīng)該是連續(xù)的更新記錄添加緩動函數(shù)效果

DEMO

See Demo!

工具庫GIT地址

get on GIT 求波star :)

如何實現(xiàn)

難點在于在不超出屏幕范圍的前提下,盡量拋得更高

整體思路大致如下:

我們知道拋物線的方程式為:

現(xiàn)在我們知道拋物線上的兩個點(動畫的起點和終點)以及極值點的y值(因為要剛好接觸屏幕頂部,所以可以知道這個值)來解這個方程,獲得a, b, c

拋物線極值點:(,

當(dāng)拋物線的方程確定之后,我們就能夠畫出這條軌跡了。

關(guān)于拋物線的相關(guān)知識可以參看:拋物線

關(guān)于緩動效果

如果我們需要整個動畫是一個動感的效果而不是線性的執(zhí)行完整個動畫,這個時候就需要緩動函數(shù)了,類似CSS3中的animation-timing-function,我們給這個工具庫添加了一個簡易的實現(xiàn),能夠支持easeIn, easeOut, easeInOutlinear,如果要實現(xiàn)自定義更加復(fù)雜的效果,需要使用貝塞爾曲線,感興趣的朋友可以研究下。

在動畫中我們一般按照動畫已經(jīng)進(jìn)行的時間計算出動畫完成的進(jìn)度,然后線性的更新動畫的一個參數(shù)值(在我們的動畫里面我們線性的更新x軸的值,然后計算y坐標(biāo)),故整個動畫過程看上去也是線性運(yùn)動的,緩動函數(shù)的作用在于能夠完成一種映射,把x的值根據(jù)我們定義的緩動函數(shù)映射成另一個值,打破目前這種線性的狀態(tài)。一般我們會對值先進(jìn)行歸一化處理然后傳入緩動函數(shù)進(jìn)行映射。

緩動函數(shù)應(yīng)該具備以下幾點要求(歸一化后):

傳入為0,輸出應(yīng)該為0

傳入為1,輸出應(yīng)該為1

函數(shù)應(yīng)該是連續(xù)的

更新記錄

2016-10-08

添加緩動函數(shù)效果

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/80573.html

相關(guān)文章

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<