国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

wudengzan / 2231人閱讀

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

DEMO

See Demo!

工具庫GIT地址

get on GIT 求波star :)

如何實現

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

整體思路大致如下:

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

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

拋物線極值點:(

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

關于拋物線的相關知識可以參看:拋物線

關于緩動效果

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

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

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

傳入為0,輸出應該為0

傳入為1,輸出應該為1

函數應該是連續的

更新記錄

2016-10-08

添加緩動函數效果

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80573.html

相關文章

發表評論

0條評論

wudengzan

|高級講師

TA的文章

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