缓动动画_核心动画概念：缓入缓出

最新推荐文章于 2023-01-13 13:31:45 发布

cungui5726

最新推荐文章于 2023-01-13 13:31:45 发布

阅读量2.6k

点赞数

文章标签： css html5 java css3 js ViewUI

原文链接：https://thenewcode.com/297/Core-Animation-Concepts-Ease-In-amp-Ease-Out

版权

本文介绍了缓动动画的核心概念，特别是CSS过渡中的"缓入"和"缓出"原理。通过调整这些参数，可以创建出模拟真实世界运动感觉的动画效果，使对象看起来更自然。文章还提到了贝塞尔曲线在表示运动轨迹中的应用，并推荐了几个用于定制浏览器缓动效果的资源。

摘要由CSDN通过智能技术生成

缓动动画

With the arrival of CSS transitions, animation is now completely at home on web pages. In animation we need to refer to the properties of momentum, and central to this are the principles of “ease in” and “ease-out”.

随着CSS过渡的到来，动画现在完全可以在网页上找到了。在动画中，我们需要引用动量的属性，而其中的核心是“缓入”和“缓出”的原理。

Consider a regular mechanical motion, like the movement of a minute hand on a clock, or an automatic metal stamping machine. After one minute passes, the hand on the clock will tick forward suddenly, and the metal stamp will crash down on a plate. If we took this motion and graphed it, with time on the horizontal axis and distance on the vertical, the motion would look something like this:

Note that the units of time and