鍍金池/ 問答/HTML5  動漫  網(wǎng)絡(luò)安全  HTML/ 如何使canvas實現(xiàn)的鼠標(biāo)滾動序列幀動畫變得平滑有彈性?

如何使canvas實現(xiàn)的鼠標(biāo)滾動序列幀動畫變得平滑有彈性?

如題,看到一些網(wǎng)站上面使用canvas來做圖片的序列幀動畫,有一些綁定了鼠標(biāo)滾輪事件,比如:http://www.clearmotion.com/te...

自己嘗試了一下,發(fā)現(xiàn)滾動停止時并不平滑,鼠標(biāo)停馬上就停止了
https://jsfiddle.net/Deryckxi...

請問這種如何處理才能實現(xiàn)站上的效果

回答
編輯回答
情皺

一個想法(實際是不是這樣做的就不知道了):每次滾動播放一定的幀數(shù),如果出現(xiàn)連續(xù)滾動則要做防抖動處理,并根據(jù)滾動距離進行幀的播放??淳W(wǎng)站的效果似乎還用了緩動函數(shù),因為滾動一次的時候從開始到停止并不是很流暢。

2018年5月4日 16:32