gsap_适用于高级用户的GSAP + SVG：沿路径运动

我会带着你远行 2023-02-22 03:39 10阅读 0赞

gsap

### 完整系列 **(**Complete Series**)** ###

*  [GSAP + SVG for Power Users: Motion Along A Path ][GSAP _ SVG for Power Users_ Motion Along A Path]
    
    [适用于高级用户的GSAP + SVG：沿路径运动][GSAP _ SVG for Power Users_ Motion Along A Path]
 *  [GSAP + SVG for Power Users 2: Complex Responsive Animation][GSAP _ SVG for Power Users 2_ Complex Responsive Animation]
    
    [适用于高级用户的GSAP + SVG 2：复杂的响应式动画][GSAP _ SVG for Power Users 2_ Complex Responsive Animation]
 *  [GSAP + SVG for Power Users 3: New 1.18.0 Features][GSAP _ SVG for Power Users 3_ New 1.18.0 Features]
    
    [适用于高级用户的GSAP + SVG 3：1.18.0的新功能][GSAP _ SVG for Power Users 3_ New 1.18.0 Features]

![format_png][]

Now that the GreenSock API is picking up steam, there are many tutorials and [Getting Started][] guides out there to provide good introductions to the library, not to mention GreenSock's own [Forum][] and [Documentation][]. This article isn't intended for beginners, but rather a deeper dive into some of the more exciting and lesser-known features that one can work with after they've gotten past the initial introduction. As SVG is [scalable, crisp][scalable_ crisp], and [easy to make responsive][] (more on this in subsequent articles), everything shown will be about SVG in specific, however, you can still use GSAP for Canvas as well.

现在，GreenSock APISwift发展起来，那里有许多教程和《 [入门指南》][Getting Started]为库提供了很好的介绍，更不用说GreenSock自己的[Forum][]和[Documentation了][Documentation] 。 本文不是为初学者准备的，而是更深入地探讨一些较令人兴奋和鲜为人知的功能，这些功能在经过最初的介绍后，便可以使用。 由于SVG具有[可伸缩性，清晰][scalable_ crisp]且[易于响应][easy to make responsive] (在后续文章中将对此进行详细介绍)，因此显示的所有内容都与SVG有关，但是，您仍然可以将GSAP用于Canvas。

Please keep in mind that they don't pay me to write for them- this isn't a marketing article. The library is a tool I find extremely useful. I personally have been using it heavily since I [benchmarked performance for SVG animation][] in both timeline recordings and through visual benchmarks and found that it performed as well as many native technologies. *(Note: please keep in mind that these tests were run in January 2015 with a certain version of each library, and a certain version of Chrome. I encourage you to run tests for yourself with your own use-cases.)*

请记住，他们不付钱给我为他们写信-这不是一篇营销文章。 我发现该库非常有用。 自从我在时间轴记录和视觉基准[测试中对SVG动画的性能进行基准测试后，][benchmarked performance for SVG animation]我个人就一直在大量使用它，并发现它的性能与许多本机技术一样好。 *(请注意：请记住，这些测试是在2015年1月针对每个库的特定版本和特定版本的Chrome运行的。建议您使用自己的用例为自己运行测试。)*

There are a plethora of interesting features to play around with in the GreenSock API. This is the first in a series of articles. We'll begin with focus on their Bezier Plugin. This plugin is included within TweenMax, if you are using TweenLite you will have to load it separately.

GreenSock API中提供了许多有趣的功能。 这是系列文章中的第一篇。 我们将从关注他们的Bezier插件开始。 该插件包含在TweenMax中，如果您使用的是TweenLite，则必须单独加载。

## 沿路径运动 **(**Motion Along a Path**)** ##

Motion along a path is truly vital for realistic movement in animation. Interpolating single values in x, y, and z directions will only get you so far. Consider the movement of a firefly in a jar. Living beings rarely sail along in a linear fashion. Currently, motion along a path is not supported in CSS (though it is [coming down the pipeline][], and you can [vote to support][] its implementation in Microsoft Edge). SMIL offers motion along a path, but [no SMIL support is offered in IE][], nor does it look to be supported in the upcoming Edge browser. GreenSock offers a stable way to create such an effect with the BezierPlugin, included in TweenMax, providing support in even IE8 unlike native technologies. Thus, it's currently the most fully-supported and backwards-compatible way to work with motion along a path.

沿着路径运动对于动画中逼真的运动至关重要。 沿x，y和z方向插值单个值只会使您到目前为止。 考虑一下萤火虫在罐子中的运动。 生物很少以线性方式航行。 当前，CSS中不支持沿路径运动(尽管它正在[沿线发展][coming down the pipeline] ，您可以[投票支持][vote to support]在Microsoft Edge中实现其运动)。 SMIL沿路径提供运动，但是[IE][no SMIL support is offered in IE]中没有[提供SMIL支持][no SMIL support is offered in IE] ，在即将推出的Edge浏览器中也似乎不支持它。 GreenSock提供了一种稳定的方法，可以使用TweenMax中包含的BezierPlugin来创建这种效果，甚至可以在IE8中提供支持，这与本机技术不同。 因此，它是当前沿路径运动得到最全面支持和向后兼容的方式。

In order to create a motion along a path, pass an array of `x, y` coordinates as values into the bezier definition. The coordinates refer to points relative to the element's position, not the canvas itself. In other words, if you specify `x:5, y:10`, the motion will be defined from `5` to the right and `10` down from where the element is currently. Subsequent points are still defined by the element's initial position, not the last coordinate. This makes plotting points in an area much easier to map around the element. In the case of these particular fireflies, I tweaked the path to stay within the bounds of the lightbulb, and also look slightly jumpy- as realistic movement of bugs tends to hop around a bit:

为了创建沿路径的运动，请将`x, y`坐标数组作为值传递到贝塞尔曲线定义中。 坐标是指相对于元素位置的点，而不是画布本身。 换句话说，如果您指定`x:5, y:10` ，则将在从元素当前位置的右`5`向下`10`定义运动。 后续点仍由元素的初始位置而不是最后一个坐标定义。 这使得在一个区域中绘制点更容易在元素周围进行映射。 在这些萤火虫的情况下，我调整了路径以使其停留在灯泡的范围内，并且看上去有些跳动-因为实际的虫子运动往往会绕来跳去：

TweenMax.to($firefly1, 6, {
      bezier: {
        type: "soft",
        values:[{x:10, y:30}, {x:-30, y:20}, {x:-40, y:10}, {x:30, y:20}, {x:10, y:30}],
        autoRotate: true
      },
      ease: Linear.easeNone,
      repeat: -1
    }, "start+=3");

See the Pen [Steampunk Lighting][] by Sarah Drasner ([@sdras][sdras]) on [CodePen][].

见笔[蒸汽朋克照明][Steampunk Lighting]萨拉Drasner( [@sdras][sdras] )上[CodePen][] 。

Let's say you aren't animating fireflies. Perhaps you'd like to use the paths as general coordinates, but want the motion between them to be smooth and refined. There are two ways of achieving this. The first is to set the `type` parameter to `soft-` this will take the paths you feed it and curve towards these points as if being pulled in the direction towards them, rather than interpolating values to one set and then the next. The other, more nuanced way that offers more control is to set the type to thru (this is the default), and define a `curviness` value. `0` defines no curviness, `1` is normal, `2` is twice as curvy, and so on- this pen shows the effects of each setting:

假设您不是在动画萤火虫。 也许您想将路径用作一般坐标，但希望它们之间的运动平滑且精确。 有两种方法可以实现此目的。 首先是将`type`参数设置为`soft-`这将采用您输入的路径并朝这些点弯曲，就像朝着它们的方向拉动一样，而不是将值插值到一组然后再插值。 提供更多控制权的另一种更细微差别的方式是将类型设置为直通(这是默认设置)，并定义`curviness`值。 `0`不弯曲， `1`是正常， `2`是弯曲的两倍，依此类推-此笔显示了每种设置的效果：

See the Pen [Demo for Curviness in GreenSock Bezier][] by Sarah Drasner ([@sdras][sdras]) on [CodePen][].

见笔[演示的弯曲度在使用GreenSock贝塞尔][Demo for Curviness in GreenSock Bezier]萨拉Drasner( [@sdras][sdras] )上[CodePen][] 。

Note that past a value of 3, the curviness begins to look less smooth overall, because each point is beginning to loop around its own axis.

请注意，超过3值后，曲线的整体外观将变得不太平滑，因为每个点都开始围绕其自身的轴循环。

In addition to thru and soft, we have 2 other specifications for bezier types: `quadratic`, and `cubic`. Quadratic allows you to define a control point between each anchor. This means you can define one control point (but only one) in between your coordinates. Cubic is similar, but you can specify two control points. For both quadratic and cubic, you must begin and end the array with an anchor, though you can use as many iterations as you like.

除了直通和柔和外，贝塞尔曲线类型还有2个其他规格： `quadratic`和`cubic` 。 二次方可让您定义每个锚点之间的控制点。 这意味着您可以在坐标之间定义一个控制点(但只能定义一个)。 三次相似，但是您可以指定两个控制点。 对于二次方和三次方，都必须使用锚点开始和结束数组，尽管您可以使用任意多的迭代。

For now, you pass an array of coordinates, though I wouldn't be surprised if in the future, GSAP added the ability to use an SVG path itself as the definition for the movement. This library consistently adds new features, and you can watch [their repository][] for updates, and see what's been added in the past year.

现在，您可以传递一个坐标数组，但是如果将来GSAP增加了使用SVG路径本身作为运动定义的功能，我不会感到惊讶。 该库不断添加新功能，您可以观看[其存储库][their repository]中的更新，并查看过去一年中添加的内容。

In the earlier pen, I'm simply using `autoRotate: true`, so that I can have the fireflies spin on their own axis that correlates to the direction of the line while they travel through the array. You can be more specific by setting autoRotate to an integer rather than a boolean to set the initial degree of the element before it begins spinning. You may also pass an array, to adjust these options:

在较早的笔中，我仅使用`autoRotate: true` ，以便萤火虫可以在自己的轴上旋转，而萤火虫在穿过数组时与线的方向相关。 通过将autoRotate设置为整数而不是boolean来设置元素在开始旋转之前的初始程度，可以更加具体。 您还可以传递一个数组，以调整以下选项：

1.  Position property 1 (typically "x")
    
    排名属性1(通常为“ x”)
2.  Position property 2 (typically "y")
    
    排名属性2(通常为“ y”)
3.  Rotational property (typically "rotation", but can also be "rotationX" or "rotationY")
    
    旋转属性(通常为“ rotation”，但也可以为“ rotationX”或“ rotationY”)
4.  Number of degrees (or radians/Math.PI) to add to the new rotation at the onset *(this is optional)*
    
    开始时添加到新旋转的度数(或弧度/Math.PI) *(这是可选的)*
5.  Boolean value indicating whether or not the rotational property should be defined in radians rather than degrees (default is false which results in degrees)
    
    布尔值，指示是否应以弧度而不是度来定义旋转属性(默认为false，导致度数)

Setting the array to  `autoRotate: ["x","y","rotation",0,false]` is the same thing as autoRotate:true, as I have in the pen below, and the element will follow the rotation trajectory of the path it's following. I've provided a toggle for autoRotate:true and false, so that you can see precisely the effect this parameter has on the animation:

将数组设置为`autoRotate: ["x","y","rotation",0,false]`与autoRotate：true相同，就像我在下面的笔中所看到的那样，并且该元素将遵循该对象的旋转轨迹它遵循的路径。 我为autoRotate：true和false提供了一个切换，以便您可以准确地看到此参数对动画的影响：

See the Pen [Demo for autoRotate true/false][Demo for autoRotate true_false] by Sarah Drasner ([@sdras][sdras]) on [CodePen][].

见笔[演示了自动旋转真/假][Demo for autoRotate true_false]萨拉Drasner( [@sdras][sdras] )上[CodePen][] 。

The little character looks much more alive that way than if he had statically been set to any degree angle during the course of the tween. You can also see that I set his initial rotation to face down towards the direction he'd be autoRotating to- that's because if I hadn't, there would have been a little "jump" as he tried to right himself along the correct origin and axis. I could have also passed that in as an option in autoRotate as specified above, either way works.

与在补间过程中将他静态设置为任意角度相比，小人物看起来更生动。 您还可以看到，我将他的初始旋转设置为朝着他将要自动旋转的方向向下-这是因为，如果我没有这样做，则在他尝试沿着正确的原点纠正自己时会出现一些“跳跃”和轴。 我也可以按照上面指定的那样在autoRotate中将其作为选项传递，无论哪种方式都可以。

Motion along a path does not just refer only to character animation, of course. When paired with other types of opacity and transform animations, there are endless possibilities for expressive yet fine-tuned control over animations.

当然，沿着路径运动不仅指角色动画。 与其他类型的不透明度和变换动画配合使用时，可以对动画进行富有表现力的微调控制。

This is part one of a several-part series. As we move forward  learning each of these techniques, we'll begin tying different ways of working together to create increasingly more complex and engaging work. Stay tuned!

这是一个分为多个部分的系列之一。 在我们继续学习每种技术的过程中，我们将开始捆绑不同的协作方式，以创建越来越复杂，更具吸引力的工作。 敬请关注！

> 翻译自: [https://davidwalsh.name/gsap-svg][GSAP _ SVG for Power Users_ Motion Along A Path]

gsap

[GSAP _ SVG for Power Users_ Motion Along A Path]: https://davidwalsh.name/gsap-svg
[GSAP _ SVG for Power Users 2_ Complex Responsive Animation]: https://davidwalsh.name/gsap-svg-responsive-animation
[GSAP _ SVG for Power Users 3_ New 1.18.0 Features]: https://davidwalsh.name/gsap-features
[format_png]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9kcmFzbmVyLWdzYXAuanBn?x-oss-process=image/format,png
[Getting Started]: https://ihatetomatoes.net/greensock-cheat-sheet/
[Forum]: http://greensock.com/forums/forum/11-gsap/
[Documentation]: http://greensock.com/docs/#/HTML5/
[scalable_ crisp]: http://www.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/
[easy to make responsive]: http://slides.com/sdrasner/cssconf#/
[benchmarked performance for SVG animation]: https://css-tricks.com/weighing-svg-animation-techniques-benchmarks/
[coming down the pipeline]: http://dev.w3.org/fxtf/motion-1/
[vote to support]: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/7804467-support-css-motion-path-module
[no SMIL support is offered in IE]: http://caniuse.com/#search=smil
[Steampunk Lighting]: http://codepen.io/sdras/pen/MYQxXe/
[sdras]: http://codepen.io/sdras
[CodePen]: http://codepen.io
[Demo for Curviness in GreenSock Bezier]: http://codepen.io/sdras/pen/PqEPqz/
[their repository]: https://github.com/greensock/GreenSock-JS/
[Demo for autoRotate true_false]: http://codepen.io/sdras/pen/aOZOwj/