Easing 是在动画中表达深度的一个重要方式。动画新手最常犯的一个错误是在起始动画节点使用 ease-in，在结束动画节点使用 ease-out。实际上你需要的是反过来的。
如果我们将这些状态应用于过渡，它应该像这样：
.button {
background: #1b8f5a;
/* 应用于初始状态，因此此转换将应用于返回状态 */
transition: background 0.25s ease-in;
}
.button:hover {
background: #3eaf7c;
/* 应用于悬停状态，因此在触发悬停时将应用此过渡 */
transition: background 0.35s ease-out;
}
点击此处实现
Easing 也可以表达动画元素的质量。以下面的 Pen 为例，你认为哪个球是硬的，哪个球是软的？
点击此处实现
你可以通过调整你的 Easing 来获得很多独特的效果，使你的动画非常时尚。CSS 允许你通过调整 cubic bezier 属性来修改 Easing，Lea Verou 开发的这个 playground 对探索这个问题非常有帮助。
虽然使用 cubic-bezier ease 提供的两个控制柄可以为简单的动画获得很好的效果，但是 JavaScript 允许多个控制柄，以此支持更多的变化。
以弹跳为例。在 CSS 中，我们必须声明向上和向下的每个关键帧。在 JavaScript 中，我们可以通过在 greensock API(GSAP) 中声明 bounce 来描述 ease 中所有这些移动 (其他 JS 库有其他类型的 easing 默认值)。
这里是 CSS 中用来实现 bounce 的代码 (来自 animate.css 的例子)：
@keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0) scaleY(3);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0) scaleY(0.9);
}
75% {
transform: translate3d(0, -10px, 0) scaleY(0.95);
}
90% {
transform: translate3d(0, 5px, 0) scaleY(0.985);
}
to {
transform: translate3d(0, 0, 0);
}
}
.bounceInDown {
animation-name: bounceInDown;
}
下面是 JS 中使用 GreenSock 实现相同的 bounce：
gsap.from(element, { duration: 1, ease: 'bounce.out', y: -500 })
我们将在之后章节的部分示例中使用 GreenSock。他们有一个很棒的 ease visualizer，帮助你建立精心制作的画架。 |
发表于 2023-9-6 09:43
|