自定义加/减速选项

不走寻常路,为项目创建完全自定义的动画。

有时您不想使用 CSS 附带的加/减速关键字,或者要使用 Web Animations 或 JavaScript 框架。在这些情况下,您通常可以定义自己的曲线(或方程),这让您可以从很大程度上控制项目动画的感觉。

摘要

  • 自定义加/减速选项可让您为项目提供更多个性。
  • 您可以创建与默认动画曲线(缓出、缓入等)相似的三次贝塞尔曲线,但重点放在不同的位置。
  • 当需要更好地控制动画时间和行为(例如,弹性或弹跳动画)时,请使用 JavaScript。

如果您使用 CSS 编写动画,就会发现可以通过定义三次贝塞尔曲线来定义时间。事实上,关键字 easeease-inease-outlinear 映射到预定义的贝塞尔曲线,详见 CSS 过渡规范网页动画规范

这些贝塞尔曲线有四个值,即两对数字,每对数字描述三次贝塞尔曲线的控制点的 X 和 Y 坐标。贝塞尔曲线的起点具有坐标 (0, 0),终点具有坐标 (1, 1);您需要设置两个控制点的 X 和 Y 值。两个控制点的 X 值必须介于 0 到 1 之间,每个控制点的 Y 值可以超过 [0, 1] 限制,不过相关规范未说明多大程度。

通过改变每个控制点的 X 和 Y 值,您将获得截然不同的曲线,从而给动画带来截然不同的感觉。例如,如果第一个控制点位于右下角,则动画开始播放时将会很慢。如果它在左上角,动画在开头会显得很快。相反,如果第二个控制点在网格的右下角,则动画在结尾处变快;如果在左上角,则动画结束时速度会变慢。

为便于比较,以下是两条曲线:一条典型的缓入缓出曲线和一条自定义曲线:

缓入缓出动画的曲线。

自定义动画曲线。

查看采用自定义加/减速选项的动画

自定义曲线的 CSS 为:

transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);

前两个数字是第一个控制点的 X 和 Y 坐标,后两个数字是第二个控制点的 X 和 Y 坐标。

创建自定义曲线非常有趣,并且您可以有效控制动画的感觉。以上面的曲线为例,你可以看到,该曲线与经典的缓入缓出曲线相似,但缓入(或“开始”)部分缩短,而末尾的减速拉长。

使用此动画曲线工具进行实验,看看该曲线如何影响动画的感觉。

使用 JavaScript 框架实现更多控制

有时您需要三次贝塞尔曲线无法提供的更多控制。如果您需要弹跳的感觉,可以考虑使用 JavaScript 框架,因为使用 CSS 或 Web Animations 很难实现这个效果。

TweenMax

GreenSock 的 TweenMax(或 TweenLite,如果希望保持轻量级)是一个强大的框架,因为您可以通过一个小型 JavaScript 库从该框架中获得很多控制,并且它是一个非常成熟的代码库。

查看弹性缓动的动画

要使用 TweenMax,请在页面中包括以下脚本:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

脚本就绪后,您可以对元素调用 TweenMax,并告知它您想要哪些属性以及您想要的任何加/减速选项。有许多缓动选项可供您使用;以下代码使用了弹性缓出:

    var box = document.getElementById('my-box');
    var animationDurationInSeconds = 1.5;

    TweenMax.to(box, animationDurationInSeconds, {
      x: '100%',
      ease: 'Elastic.easeOut'
    });

TweenMax 文档重点介绍了您在此处提供的所有选项,非常值得一读。