greensock下载_使用GreenSock的DrawSVG创建动画SVG加载器

greensock下载

今天的教程是一个使您印象深刻的东西，您编写了很少的代码即可实现如此令人愉快的动画。 GreenSock的一个非常聪明的小组的DrawSVG允许您逐步显示（或隐藏）SVG的笔触。让我们通过构建动画预加载器来检查其工作原理。

DrawSVG会做什么？

如前所述，DrawSVG插件将赋予您显示（或隐藏）SVG笔触的功能，但它也可以从笔触中心（或任何位置/段）向外进行动画处理。这正是我们在接下来的练习中将要做的。

DrawSVG是GreenSock动画平台（GSAP）的一部分，可以在任何TweenLite，TweenMax，TimelineLite或TimelineMax动画中使用。 GSAP中所有流行的功能（运行时控件，回调，简化，覆盖管理，嵌套）也可以与您喜欢的SVG动画一起使用！ * 拳头*

获取DrawSVG的副本

要获得DrawSVGPlugin plus文档和支持，需要具有GreenSock俱乐部会员资格。在撰写本文时，根据会员类型的不同，计划每年从50美元到150美元不等。

在Codepen上免费试用DrawSVGPlugin！

从GreenSock的DrawSVGPlugin Codepen链接到DrawSVGPlugin的是一个特殊的功能齐全的版本，因此可以随意分叉其中的任何一个，添加自己的SVG图形，并尝试使用DrawSVGPlugin。

注意：特殊版本的插件仅在CodePen域上有效。

构建我们的装载机

以下代码代表了使此SVG加载程序正常工作所需的一切！

您可以在任何支持SVG的浏览器中找到演示渲染器（如果忽略IE8和更早版本，将获得相当可靠的支持）。您还可以在CodePen上查看完整的Filler Loader演示。

标记

这是我们需要的标记：

<body>
<svg version="1.1" viewBox="0 0 100 100" class="filler-loader">
<circle class="fill-path" cx="50" cy="50" r="40"/>
</svg>
<script src="path/to/jquery.js"></script>
<script src="path/to/TweenMax.min.js"></script>
<script src="path/to/DrawSVGPlugin.js"></script>
<script src="path/to/svganimation.js"></script>
</body>

在我们的index.html存在一个<svg>标签，其中包含一个<circle>标签。附加到<circle>是两个有助于在边界框（黑色正方形）中定位的属性。这两个属性是cx和cy ，并将圆放置在<svg>元素的viewBox中。

您可以在下图中看到该系统的工作方式。系列的第一帧表示我们的<circle>没有任何属性，第二帧添加cx="50" ，最后一帧添加cy="50" 。这些属性的x和y是指将我们的形状定位在其相应的水平和垂直平面上的笛卡尔坐标系。

circle的最后一个属性（ r ）设置circle的半径，即从圆的中心到框的边缘的长度。随时在我的CodePen演示中调整该值，以查看更改后的结果。

风格

现在介绍一些样式。

.filler-loader {
height: 32px;
width: 32px;
transform: rotate(-90deg);
}
.fill-path {
fill: none;
stroke: white;
stroke-linecap: butt;
stroke-width: 8px;
}

此特定示例的样式非常少。我们定义了一些width和height （32 x 32） .fill-path类的约束，然后.fill-path类通过设置CSS区域中可供我们使用的一些SVG属性来赋予路径外观。我们为路径指定宽度，颜色和笔划结束类型。此演示的结束类型设置为butt并完全平方路径的端点。

现在，我们可以将圆旋转-90deg （逆时针）。您可以根据以下屏幕截图查看原因。左图描绘了旋转之前的圆，第二幅图描绘了旋转之后的圆。

现在要使工作正常。

var loader        = new TimelineMax({ repeat: -1 }),
fill_path     = $('.fill-path'),
fill_duration = 1.2,
fill_position = '+=.25'; // place tween .25secs after end of init tween
loader.fromTo( fill_path, fill_duration, { drawSVG: '0' }, { drawSVG: '100%' }, fill_position )
.to( fill_path, fill_duration, { drawSVG: '100% 100%' }, fill_position );

如果您从未见过TimelineMax呼叫，请不要担心。您可以在此处进一步了解有关内容。

将TimelineMax视为要添加框架的时间线。在我们的示例中，我们只有一个时间轴，其中包含一个对象，该对象具有key:value配对以控制动画的播放。回放设置为重复，由分配给TimelineMax选项对象的repeat键的值-1表示。由于我们使用jQuery进行DOM检索，因此我们使用.fill-path类作为钩子来捕获路径。这是我们开始为路径设置动画时将使用的参考。

JavaScript的最后几行内容是魔术真正发生的地方。包含drawSVG的对象首先从空（ drawSVG: '0' ）到填充（ drawSVG: '100%' ）顺时针启动路径动画开始。现在，我们已经在一个方向上填充了路径，我们需要反转填充（逆时针）。这是我们的to()方法出现的地方，并且我们将drawSVG设置为'100% 100%' 。由于我们以100％结束填充动画，因此我们需要将填充再反转100％。这将从当前笔触的任何位置到沿路径存在笔触的状态设置填充动画。中提琴！

结论

正如我们所看到的，DrawSVG非常轻巧，并且可以快速设置，从而使SVG的路径动画对于初学者来说也非常有趣。只需很少的配置，我们就可以将另一个工具库带入下一个项目，使交互和体验愉快。

如果您有任何疑问，请随时在下面的评论中提问。动画愉快！

翻译自: https://webdesign.tutsplus.com/tutorials/create-an-animated-svg-loader-using-greensocks-drawsvg--cms-23067

greensock下载