10
推荐一个缓动函数速查网站
source link: https://zhuanlan.zhihu.com/p/139410497
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
推荐一个缓动函数速查网站
在做CSS动画或者JavaScript动画时，缓动函数是很重要的，它就相当于是如下公式
本质上是一个时间函数，由时间来决定位移、大小等外在显示。
在CSS内部有一些内置的animation-timing-function，比如ease-in-out、linear等，追求自定义的话可以指定cubic-bezier。
但是在JavaScript中没有办法了，只能自己来定义缓动函数了，这里介绍一个速查网站，能很方便地查到常用的缓动函数以及它们的详情。
在鼠标hover的时候还会有一个动画的快捷显示，点开某一个缓动函数可以查看详情，比如以easeInOutElastic为例
左侧部分显示具体的设置代码，右侧可以通过大小、位移、透明度跟linear缓动对比查看效果。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK