寫程式學習筆記08 - 高級Timing Function: cubic-bezier

in hive-180932 •  3 months ago 

上一次的課堂,我學到了用animation-timing-function來更容易的控制物件移動,例如ease-in,ease-out等。不過,人的想像是無盡的,對於這些物件移動效果總有無數想法,例如我想頭半段如光一樣快,尾半段卻如龜一樣慢,那又怎麼辦?難道又要一個個timing去設定嗎?

Screenshot 2020-05-14 at 19.08.14.png

哈!原來也是有這些超好用的function的,就是cuber-bezier了!cuber-bezier有四個點要設定:cuber-bezier(x1, y1, x2, y2),x1, y1是開始點,x2, y2就是結束點,我想如果大家的數學知識沒有還給老師的話,會知道這是什麼。

不過不知道也不要緊,因為我上網找到一個叫https://cubic-bezier.com/ 的網站,裡面就有相關的模擬設定:

Screenshot 2020-05-14 at 19.07.07.png

總之如果是一條直線的話,就是均速移動,如果線在直線上,就是比均速快,相反就是比均速慢了。

所以,只要好好利用這個function,及以上這個網站,大家就能很輕鬆的控制物件的速度設定了!

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!