隐藏

CSS 过度中ease与ease-in-out的区别(ease曲线)

发布:2023/3/11 21:15:03作者:管理员 来源:本站 浏览次数:242

问题:


最近在学CSS中的过渡动画,有一个疑问:就是ease和ease-in-out,描述都是两头快中间慢。我想着TM不是重复了么。有啥区别啊???


于是就开始网上各种搜他们的区别。发现还是有其他同学在问这个问题。但是找了好大一圈看到的内容大多数都是下面这样。可以说是毫无收获。


最后想找一下曲线,看看曲线估计就能知道两者的区别了,结果找了一大圈都没找到。浪费一下午时间,最终终于黄天不负苦心人让我找到了。


linear:


规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。(匀速)


ease:


规定慢速开始,然后变快,然后慢速结束的过渡效果(cubibezier(0.25,0.1,0.25,1))(相对于匀速,中间快,两头慢)。


ease-in:


规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))(相对于匀速,开始的时候慢,之后快)。


ease-out:


规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))(相对于匀速,开始时快,结束时候间慢,)。


ease-in-out:


规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))(相对于匀速,(开始和结束都慢)两头慢)。


答案:


先上曲线!


下面是ease的曲线:


下面是ease-in-out的曲线:


图片的横坐标是时间,纵坐标是变化的参数例如移动的距离,或者缩放的尺寸,旋转的角度等。为了简单,我们就假设是平移动画里面的距离。


可以看出,斜率就是速度了。有了曲线问题就简单了。

重点来了!!!


ease:开始很慢,但是很快就加速到一个比较大的速度,时间过半就开始缓慢减速,直到最后减速为0;


ease-in-out:开始慢,但是匀加速到一个速度大概时间到1/3的时候就保持这个速度直到最后1/3时间再均匀减速。

加分项:



以下视频就可以看出他们各自的速度了,ease一出来就一马当先,直到最后就很慢,等到了其他选手。