Post by account_disabled on Jan 28, 2024 10:34:39 GMT
GreenSock 初学者的第二部分的目的是向您介绍 GreenSock 的TimelineMax。你将学到： 为什么需要时间表 如何在时间轴中包含多个补间 如何将多个时间线打包到函数中并将它们嵌套在主时间线内以获得更大的灵活性。 在本教程结束时，您将能够轻松地使用 GreenSock 的时间线来操作和完全控制多个补间。 有关 GreenSock 基础知识的介绍，包括如何使用 TweenMax 进行排序和交错简单动画，请参阅这篇由多一个免费的轻量级一个免费且功能丰富的 JavaScript 动画库 使用 Velocity.js（无 jQuery）让您的网站具有互动性和趣味性 向您展示如何使用 Velocity.js（一个开源、强大的免费动画库）来创建高性能的 Web 动画 GreenSock 初学者：Web 动画教程（第 1 部分）是 GreenSock 的概述，也称为 GSAP（GreenSock 动画平台），我在其中讨论了该库的模块和许可模型。
我还将向您展示如何使用 GSAP TweenMax 编写简单的补间、补间序列和交错动画。 为什么您需要 GreenSock 的时间线来编码您的 Web 动画？ 在第 1 部分中，您学习了如何通过创建多个独立的补间并将其时间与每个补间的delay属性协调来向一个或多个元素添加不同的动画。 默认情况下，将一个补间堆叠到另一个补间会导致所有补间同时发生。 然而，更有用的是能够控制补间相对于其他补间的触发时间，例如同时、之前或 WhatsApp 号码数据 之后 1 秒或半秒等。 以这个只有两个补间的基本示例为例。发生的情况如下： Tween 1：圆形形状随着其 X 轴和 Y 轴旋转而增大和缩小 Tween 2：弹出一些文本。 使其工作的 GSAP 片段如下所示 正如您所看到的，两个补间同时发生，这不是预期的效果 如果您希望文本在形状停止旋转时出现，则需要向 tween2 添加适当的延迟，如下所示 这可行，但想象一下您想要更改第一个补间的持续时间或其重复次数。您很快就会意识到，第二个补间不会自动等待第一个补间结束后再开始。因此，您需要调整delay第二个补间的 值。只需两个补间和如此简单的动画，这就不是什么大问题了。
当您的动画更加雄心勃勃并且补间数量增加时，情况并非如此。 那时您会非常高兴地知道 GSAP 为您提供了强大而灵活的TimelineLite和TimelineMax，两者都包含在 TweenMax 中。 使用 GSAP 的时间轴协调多个补间 将时间线视为多个补间甚至其他时间线的容器。在一条时间线内，补间失去了独立性并变得相互联系。默认情况下，每个补间在前一个补间完成后触发，无论您是否更改任何补间的持续时间或它们重复的次数，都没有关系。 作为进入 GreenSock 时间线的第一步，尝试将补间放在时间线内上面的片段中。 上面的代码片段创建了一个名为tl的 TimelineMax 实例。您可以选择任何您喜欢的名称，这不会影响代码的有效性。 获得实例后，您可以使用第 1 部分中已经熟悉的大多数方法，例如tofromTo()等。 上面的代码首先在任何动画开始使用之前调整元素的一些值set()。就像您使用set()TweenMax一样，您可以对时间轴使用相同的方法来实现相同的目标，即设置元素属性的值，以便更改立即生效，而不会随着时间的推移而发生变化，这是动画典型的情况。set()您可以在专用文档页面中阅读有关使用的更多信息。
我还将向您展示如何使用 GSAP TweenMax 编写简单的补间、补间序列和交错动画。 为什么您需要 GreenSock 的时间线来编码您的 Web 动画？ 在第 1 部分中，您学习了如何通过创建多个独立的补间并将其时间与每个补间的delay属性协调来向一个或多个元素添加不同的动画。 默认情况下，将一个补间堆叠到另一个补间会导致所有补间同时发生。 然而，更有用的是能够控制补间相对于其他补间的触发时间，例如同时、之前或 WhatsApp 号码数据 之后 1 秒或半秒等。 以这个只有两个补间的基本示例为例。发生的情况如下： Tween 1：圆形形状随着其 X 轴和 Y 轴旋转而增大和缩小 Tween 2：弹出一些文本。 使其工作的 GSAP 片段如下所示 正如您所看到的，两个补间同时发生，这不是预期的效果 如果您希望文本在形状停止旋转时出现，则需要向 tween2 添加适当的延迟，如下所示 这可行，但想象一下您想要更改第一个补间的持续时间或其重复次数。您很快就会意识到，第二个补间不会自动等待第一个补间结束后再开始。因此，您需要调整delay第二个补间的 值。只需两个补间和如此简单的动画，这就不是什么大问题了。
当您的动画更加雄心勃勃并且补间数量增加时，情况并非如此。 那时您会非常高兴地知道 GSAP 为您提供了强大而灵活的TimelineLite和TimelineMax，两者都包含在 TweenMax 中。 使用 GSAP 的时间轴协调多个补间 将时间线视为多个补间甚至其他时间线的容器。在一条时间线内，补间失去了独立性并变得相互联系。默认情况下，每个补间在前一个补间完成后触发，无论您是否更改任何补间的持续时间或它们重复的次数，都没有关系。 作为进入 GreenSock 时间线的第一步，尝试将补间放在时间线内上面的片段中。 上面的代码片段创建了一个名为tl的 TimelineMax 实例。您可以选择任何您喜欢的名称，这不会影响代码的有效性。 获得实例后，您可以使用第 1 部分中已经熟悉的大多数方法，例如tofromTo()等。 上面的代码首先在任何动画开始使用之前调整元素的一些值set()。就像您使用set()TweenMax一样，您可以对时间轴使用相同的方法来实现相同的目标，即设置元素属性的值，以便更改立即生效，而不会随着时间的推移而发生变化，这是动画典型的情况。set()您可以在专用文档页面中阅读有关使用的更多信息。