greensock插件下载_使用GreenSock插件轻松制作精美的Web动画

最新推荐文章于 2022-12-20 23:30:02 发布

dingshi7798

最新推荐文章于 2022-12-20 23:30:02 发布

阅读量288

点赞数

文章标签： python java css javascript 编程语言 ViewUI

原文链接：https://www.sitepoint.com/fancy-web-animations-made-easy-greensock-plugins/

版权

greensock插件下载

面向初学者的GreenSock动画教程：插件

本GreenSock教程系列第三部分的目的是向您介绍一些了不起的GreenSock 插件。

您将使用：

使用BezierPlugin对沿弯曲的Bezier路径的属性进行动画处理
GSAP Draggable实用程序可拖动屏幕上的元素，而ThrowPropsPlugin可将其滑动到平稳的位置
DrawSVGPlugin动态绘制SVG笔划
MorphSVGPlugin可以将任何SVG路径变形为任何其他路径，即使两个路径的点数相同
和SplitText实用程序创建有趣的动画文本效果。

在本教程结束时，您将能够在不使用GreenSock插件的情况下，花费通常所需时间的一小部分来创建复杂类型的网络动画。

有关GreenSock基础知识的介绍，包括如何与TweenMax一起使用以对简单动画进行排序和交错，请继续阅读本多篇文章的第1部分。

如果您想在GreenSock强大的时间轴（TimelineLite和TimelineMax）上重新学习一下，请参阅第2部分。

GreenSock文章是CSS之外的系列文章：动态DOM动画库的一部分 。这是我过去分期介绍的内容：

使用Anime.js对DOM进行动画处理将介绍如何充分利用网络上的动画，以及何时可以考虑使用JavaScript动画库而不是仅CSS动画。然后重点介绍Anime.js，这是一个免费的轻量级JavaScript动画库
带有KUTE.js的有趣动画效果向您介绍KUTE.js，这是一个免费且功能丰富JavaScript动画库
使用Velocity.js（无jQuery）使您的网站具有互动性和趣味性（没有jQuery）向您展示了如何使用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基础知识

要开始使用GSAP的BezierPlugin，只需下载TweenMax并将其包含在您的项目中，就像在HTML文档底部使用任何外部JavaScript文件一样。

基本语法如下：

TweenMax.to(document.getElementById('myDiv'), 5, {
  bezier:[
    {left:100, top:250}, 
    {left:300, top:0}, 
    {left:500, top:400}
  ], 
  ease:Power1.easeInOut
});

上面的代码段在.myDiv元素上实现了TweenMax to()方法。在这些属性中，您可以看到bezier属性，其值设置为对象数组。每个对象都包含几个坐标的值。该示例使用top和left属性，但您也可以使用x和y 。

如果坐标列表很长，则最好将它们缓存在变量中，然后使用它代替函数内部的对象本身，如下所示：

const points = [
  {left:100, top:250}, 
  {left:300, top:0}, 
  {left:500, top:400}
];

TweenMax.to(document.getElementById('myDiv'), 5, {
  bezier: points, 
  ease:Power1.easeInOut
});

如果使用x和y设置坐标，请记住，值是指元素的位置，而不是画布本身。例如， x: 10相对于元素当前所在的位置将元素从10向右移动。以下点仍将相对于元素的初始位置，而不是先前指定的点。

如果您希望元素从一组坐标平滑地移动到下一组坐标，则BezierPlugin提供两个选项：

将type属性设置为'soft' 。这样，您提供的坐标就像磁铁一样，将元素吸引向它们。但是，元素不会穿越指定的点
将type属性设置为'thru' ，这是默认值，并为curviness属性指定一个值。此特殊属性使您可以定义贝塞尔曲线上的张力：0等于直线，1是正常弯曲度，2是正常值的两倍， curviness 。 curviness属性仅在将type属性设置为'thru'情况下适用'thru' 。

您还可以将autoRotate属性设置为true ，其作用是使元素根据其在Bezier路径上的位置旋转。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

下面是这些属性如何工作的演示：选择一个curviness值，选中或取消选中复选框以设置autoRotate属性，并使用适当的单选按钮选择'thru'或'soft' 。

请注意， type属性的默认值为'thru' ，并且当您选择'soft' ，将禁用用于设置curviness值的下拉框：

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen GSAP BezierPlugin 。

使用Vecteezy编辑器设计的SVG图形

有关如何使用GSAP的BezierPlugin的更多详细信息，请查看以下链接：

BezierPlugin文档
有关通过IHateTomatoes选择坐标点的 YouTube视频
如果计划将BezierPlugin与内联SVG一起使用，则需要MorphSVGPlugin.pathDataToBezier()函数将SVG路径数据转换为bezier锚点，并将结果提供给values属性。

GreenSock的高级插件和实用程序

您可以使用TweenMax及其提供的所有优点来完成很多工作，但是要付出更多的努力，GreenSock的高级插件和实用程序令人震惊。

要将高级内容下载到您本地的开发环境或您自己的网站，您至少需要Club GreenSock的Shockingly Green会员资格。

但是，请访问此神奇的CodePen演示，只要您的GSAP动画存在于CodePen上，您就可以免费使用GSAP的高级插件。

首先，您只需单击复制按钮即可复制插件的URL并将其添加到您自己的Pen中。

或者，只需单击“ 收藏”按钮，即可使用您感兴趣的插件来分叉GreenSock的许多演示之一，并将其用作起点。

GSAP Premium插件CodePen页面。

是时候陷入困境了！

使用GreenSock的Draggable和ThrowProps进行拖放

Draggable是一个很棒的实用程序库，可让您立即编写拖放动画。不仅如此，您的代码还将与跨浏览器兼容，可在触摸屏上启用设备，高效且始终适用于HTML和SVG元素。

当与ThrowPropsPlugin配对时，Draggable在屏幕上产生类似于物理学的滑动运动。

这是一个简单的实现：

Draggable.create('#yourID');

现在，您可以水平和垂直拖动id为yourID的元素。

如果希望将元素限制在给定范围内，请利用bounds属性。为了获得更高的平滑度，请下载并添加ThrowPropsPlugin。要使用它，只需将throwProps设置为true ，如下所示：

Draggable.create('#yourID', {
  bounds: '.container',
  throwProps: true
});

现在，使用.container类不能将可拖动元素拖动到该元素的边界之外。

要水平或垂直锁定拖动动作的方向，请键入以下内容：

Draggable.create('#yourID', {
  bounds: '.container',
  throwProps: true,
  type: 'y' //only vertical scroll
});

现在，该元素仅可沿垂直轴拖动。要将其更改为水平轴，请将'y'替换为'x'作为type属性的值。

您可以将type属性设置为'rotation'的值。在这种情况下，您将不能以水平和/或垂直方向拖动元素，而是以圆周运动旋转它。

这是使用这种动画的CodePen演示：

见笔ThrowProps和可拖动的演示由SitePoint（ @SitePoint上） CodePen 。

使用Vecteezy编辑器设计的SVG图形

您可能会注意到此演示的三件事：

Draggable具有有用的回调函数，例如onDragStart() ， onDragEnd()等，您可以使用它们来完成与拖动动作的阶段有关的工作
GreenSock还可以操纵CSS变量或自定义属性，这是添加到库的最新版本中的很棒的功能。
GreenSock提供了svgOrigin ，这是CSSPlugin（与TweenMax打包在一起）中包含的一个特殊属性。使用svgOrigin ，可以在SVG的全局坐标空间而不是相对于元素本身中设置transformOrigin。为了得出数字，您可以使用Illustrator寻求帮助，但是我主要是通过反复试验来完善选择。

有关Draggable和ThrowPropsPlugin的更多详细信息，请访问以下资源：

可拖动文档
ThrowPropsPlugin文档
GreenSock在CodePen上策划的演示集合
莎拉·德拉斯纳（Sarah Drasner）在CodePen上的一些Draggable演示（随时研究它们，这是值得的）：
https://codepen.io/collection/DNRrdY/
https://codepen.io/sdras/pen/gbERKQ

使用GreenSock的DrawSVGPlugin实时绘制SVG描边动画

使用GreenSock的DrawSVGPlugin，您可以快速创建一个SVG图形，看起来就像在屏幕上绘制的一样。

仅使用CSS创建这种动画并不复杂。但是，GSAP具有一些优点：

您可以使用简单的SVG形状（例如矩形，圆形等），这些形状没有getTotalLenght()方法（您需要此方法来计算SVG笔触的长度）
当您缩放SVG以便在不同的屏幕尺寸上响应地工作时， getTotalLength()不会调整。有了DrawSVG，您不必为此担心
使用DrawSVG，您可以使用整数，布尔值（即，对或错）和百分比来对笔划进行动画处理，并且具有更大的可能性。

要开始使用它，您可以尝试如下操作：

TweenLite.fromTo("#path", 1, {
  drawSVG:"0 5%"
}, {
  drawSVG:"95% 100%"
});

为了使动画正常工作，您的SVG需要定义笔触，无论是在SVG本身中作为表示属性还是在CSS中：

// Define a stroke and stroke-width in CSS:
#path {
  stroke-width: 5px;
  stroke: blue;
}

要交错多个SVG笔划，可以简单地使用GSAP交错方法。 DrawSVGPlugin与GSAP API无缝集成。例如：

/* All elements with the class of .element 
   will have a stroke animation with a 0.1 
   delay between each of them during 1 second */
   
TweenMax.staggerFrom(".element", 1, {
  drawSVG: 0
}, 0.1);

这是使用DrawSVGPlugin的实时演示：

请参见CodePen上的SitePoint（ @SitePoint ）提供的Pen GSAP DrawSVGPlugin 。

有关更多详细信息，请不要错过以下资源：

使用GreenSock的MorphSVGPlugin进行变形的动画

使用GSAP的MorphSVGPlugin ，即使两个形状之间的路径点数量不均匀，也可以用一行代码将一个SVG形状变形为另一种。

这样就可以以相对较少的努力获得一些很酷的效果。

您可以像下面这样简单地开始使用MorphSVGPlugin：

TweenLite.to("#circle", 1, {
  morphSVG:"#square"
});

SVG的#circle元素将在1秒的时间内变为#square元素。

如您所见，该插件与GSAP的方法完美集成，因此在上面的代码片段中，您没有什么不知道的。

如果愿意，可以将路径数据（而不是#square提供给函数。

查看此演示中的工作原理：

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen GSAP MorphPlugin 。

Luca Zanon在Unsplash.com上拍摄的背景照片

如果您的SVG使用的是简单形状而不是路径，MorphSVG也可以解决此问题。只需使用MorphSVGPlugin.convertToPath()函数，该函数就可以实现它的提示：它将形状转换为路径，以便GSAP可以对其进行变形。

这是另一个演示此操作的演示：

见笔GSAP MorphSVG插件与形状由SitePoint（ @SitePoint上） CodePen 。

使用Vecteezy编辑器设计的SVG图形

有关GSAP的MorphSVGPlugin的更多信息，请查看以下资源：

使用GreenSock的SplitText实用程序实现有趣的文字效果

正确的动画可以使网络上的文字更具吸引力和乐趣。 GSAP提供了许多用于处理文本的插件，但我最喜欢的是SplitText 。

使用几行代码，您可以将文本拆分为句子，单词或字符，然后将它们设置为动画内容。

这是一个基本示例：

const el = document.getElementById('elID');
const split = new SplitText(el, {
  type: 'lines, words, chars'
});

el包含一些文本， split包含可用于操作文本的splitText实例。

例如， split.lines包含分成几行的文本数组，然后您可以轻松地使用GreenSock的API制作动画。

在后台，GSAP在每行，每个单词或句子周围添加了一些额外的<div>元素。这使代码可以将这些容器作为目标并分别为其设置动画。

为了在完成动画后摆脱其他标记，GreenSock提供了方便的revert()函数，您可以在onComplete()回调函数中调用该函数：

onComplete: function() {
  split.revert();
}

这是此实时演示中的SplitText：

见笔GSAP SplitText工具由SitePoint（ @SitePoint ）上CodePen 。

背景图片由Unsplash.com提供

要了解更多信息，请访问以下资源：

结论

恭喜你！您已经完成了有关GreenSock的迷你系列的结尾。到现在为止，您应该能够将GSAP包含到您的项目中，并向网站中添加一些动画魔术了。

GreenSock凭借其丰富的API和插件提供了无数种可能性，因此，要成为专家，请前往docs页面并继续练习。如果您遇到任何障碍，请立即加入GreenSock论坛，这是一个友好而乐于助人的地方，这里有专门的GSAP忍者，他们一定会帮到您的。

这也结束了我对JavaScript动画库的游览。现在，交给您，创建自己的动画并使网络更美丽。

翻译自: https://www.sitepoint.com/fancy-web-animations-made-easy-greensock-plugins/

greensock插件下载

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
greensock插件下载_使用GreenSock插件轻松制作精美的Web动画

greensock插件下载本GreenSock教程系列第三部分的目的是向您介绍一些了不起的GreenSock 插件。您将使用：使用BezierPlugin对沿弯曲的Bezier路径的属性进行动画处理 GSAP Draggable实用程序可拖动屏幕上的元素，而ThrowPropsPlugin可将其滑动到平稳的位置 DrawSVGPlugin动态绘制SVG笔划 Morp...
复制链接

扫一扫