GreenSock 插件让精美的网页动画变得简单

[account_disabled]

GreenSock 教程系列第三部分的目的是向您介绍一些令人惊奇的 GreenSock插件。 您将使用： BezierPlugin 用于沿弯曲的贝塞尔路径对属性进行动画处理 GSAP Draggable 实用程序可在屏幕上拖动元素，而 ThrowPropsPlugin 可将它们滑动到平稳停止 用于动态绘制 SVG 笔画的 DrawSVGPlugin MorphSVGPlugin 可将任何 SVG 路径变形为任何其他路径，即使这两个路径的点数不同 SplitText 实用程序可创建有趣的动画文本效果。 在本教程结束时，您将能够在不使用 GreenSock 插件的情况下花费通常所需时间的一小部分来创建复杂类型的 Web 动画。 有关 基础知识的介绍，包括如何使用  进行排序和交错简单动画，请参阅这篇由多个部分组成的文章的第 1 部分。 Learn to Code with JavaScript 如果您想重温 GreenSock 强大的时间线（TimelineLite 和 TimelineMax），请查看第 2 部分。



文章是“超越 CSS：动态 DOM 动画库”系列的一部分。以下是我在前几期中介绍的内容： 使用 Anime.js 对 DOM 进行动画处理涉及如何在 Web 上充分利用动画，以及何时可以考虑使用 JavaScript 动画库而不是纯 CSS 动画。然后重点介绍 Anime.js，一个免费的轻 WhatsApp 号码数据 向您介绍 K让您的网站互动且有趣，向您展示如何使用 Velocity.js（一个开源、强大的免费动画库）来创建高性能的 Web 动画。 GreenSock 初学者：Web 动画教程（第 1 部分）是 GreenSock 的概述，也称为 GSAP（GreenSock 动画平台），我在其中讨论了该库的模块和许可模型。我还向您展示如何使用 GSAP TweenMax 编写简单的补间、补间序列和交错动画 GreenSock 初学者指南（第 2 部分）：GSAP 的时间线深入研究 GSAP 的时间线功能，教您如何在时间线或多个嵌套时间线内组织动画。





使用 GreenSock 的 BezierPlugin 沿路径制作动画 沿着路径的运动由遵循预定义路径（例如弯曲路径或锯齿形路径等）的对象组成。在正确的上下文中，它对于逼真的动画至关重要。 这种动画可以使用SMIL（同步多媒体集成语言）来实现，但该语言已被弃用。 未来的发展趋势似乎是 CSS，但尽管少数浏览器（主要是 Chrome 和 Opera）支持该功能，但在生产网站中采用它可能是一个冒险的举动。 为了获得一致的浏览器支持和易于实施，GSAP 的BezierPlugin是一个绝佳的选择。 这是 TweenMax 附带的免费插件。我们来尝试一下吧！ GreenSock 的 BezierPlugin 基础知识 Learn to Code with JavaScript 要开始使用 GSAP 的 BezierPlugin，只需下载 TweenMax并将其包含到您的项目中，就像在 HTML 文档底部使用任何外 方法.myDiv。在这些属性中，您可以看到bezier其值设置为对象数组的属性。每个对象都包含几个坐标的值。该示例使用top和left属性，但您也可以使用x和y。