1. gsap_适用于高级用户的GSAP + SVG 3：1.18.0的新功能

我就是我 2023-02-22 03:38 4阅读 0赞

1. 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]

This is the third article in a series about the GreenSock Animation API and SVG. This series isn't intended for beginners, but rather a deep dive into some of the more exciting and lesser-known features that one can work with after they've gotten past the initial introduction. The first article was about [Motion Along a Path][GSAP _ SVG for Power Users_ Motion Along A Path]. The second was about [Complex Responsive Animation][GSAP _ SVG for Power Users 2_ Complex Responsive Animation]. Today we'll briefly explore some new GSAP features, and use them to make a more involved animation.

这是有关GreenSock Animation API和SVG的系列文章中的第三篇。 本系列不是针对初学者的，而是深入研究了一些较令人兴奋且鲜为人知的功能，这些功能在初次介绍之后就可以使用。 第一篇文章是关于[“沿路径运动”的][GSAP _ SVG for Power Users_ Motion Along A Path]文章。 第二个是关于[复合响应动画][GSAP _ SVG for Power Users 2_ Complex Responsive Animation] 。 今天，我们将简要探索一些新的GSAP功能，并使用它们来制作更复杂的动画。

## 交错循环 **(**Stagger Cycle**)** ##

The first feature we'll cover is stagger cycle. The stagger feature in a lot of JavaScript animation libraries tends to be a incredibly useful tool for creating elegant animations, and is definitely a benefit over a CSS workflow to create the same effect. To create a stagger effect in CSS, you increment the delay using the element or pseudo element with the same keyframes:

我们要介绍的第一个功能是交错循环。 许多JavaScript动画库中的交错功能往往是用于创建精美动画的非常有用的工具，并且绝对比CSS工作流创建相同效果的好处。 要在CSS中创建交错效果，请使用具有相同关键帧的元素或伪元素来增加延迟：

@keyframes staggerFoo {
      to {
        background: orange;
        transform: rotate(90deg);
     }
    }
    
    .css .bar:nth-child(1) { animation: staggerFoo 1s 0.1s ease-out both; }
    .css .bar:nth-child(2) { animation: staggerFoo 1s 0.2s ease-out both; }
    .css .bar:nth-child(3) { animation: staggerFoo 1s 0.3s ease-out both; }
    .css .bar:nth-child(4) { animation: staggerFoo 1s 0.4s ease-out both; }
    .css .bar:nth-child(5) { animation: staggerFoo 1s 0.5s ease-out both; }
    .css .bar:nth-child(6) { animation: staggerFoo 1s 0.5s ease-out both; }

And in SASS, you could DRY it out a little:

在SASS中，您可以将其干燥一下：

@keyframes staggerFoo {
      to {
        background: orange;
        transform: rotate(90deg);
     }
    }
    
    @for $i from 1 through 6 {
      .sass .bar:nth-child(#{$i} ) {
          animation: staggerFoo 1s ($i * 0.1s) ease-out both;
       }
     }

However, with GSAP, you can create this effect with a single line of code:

但是，使用GSAP，您可以使用一行代码来创建此效果：

TweenMax.staggerTo(".gsap .bar", 1, { backgroundColor: "orange", rotation: 90, ease: Sine.easeOut}, 0.1);

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

[在][here] [CodePen][sdras]上[查看][CodePen] Sarah Drasner( [@sdras][sdras] )的[钢笔][CodePen] 。

The conciseness is a workflow boon, especially if things need to be adjusted down the line.

简洁性是工作流程的福音，尤其是当需要在生产线上进行调整时。

With stagger cycle, we can now pass in multiple values to stagger between, something that would be exponentially complex in CSS. The syntax calls for an array of values:

使用交错循环，我们现在可以传入多个值以在它们之间交错，这在CSS中会成倍地复杂。 语法要求使用值数组：

TweenMax.staggerTo(".foo", 1, {
     cycle: {
       y: [75, 0, -75]
     },
     ease: Power4.easeInOut
    }, 0.05);

Which you can also randomize, as well, for even more interesting effects.

您还可以将其随机化，以获得更有趣的效果。

In the following pen, I simply staggered between three values for each element, and only applied it to one element in the SVG. With very little code (22 lines of JS) you can accomplish so much:

在下面的笔中，我只是在每个元素的三个值之间交错，仅将其应用于SVG中的一个元素。 只需很少的代码(22行JS)，您可以完成很多工作：

See the Pen [SVG with Cycle Stagger][] by Sarah Drasner ([@sdras][sdras]) on [CodePen][].

在[CodePen][sdras]上[查看][CodePen] Sarah Drasner( [@sdras][sdras] ) [编写的][CodePen] [带有Cycle Stagger][SVG with Cycle Stagger]的Pen [SVG][SVG with Cycle Stagger] 。

## 相对HSL彩色动画 **(**Relative HSL Color Animation**)** ##

This one is relatively simple. Get it? Relative? Hoo Boy. The ability to tween relative HSL color amounts is fantastic, because if you're going to create sophisticated color effects easily in animation, slightly adjusting:

这个比较简单。 得到它？ 相对吗 哦，男孩。 能够相对HSL颜色量进行补间的功能非常出色，因为如果要在动画中轻松创建复杂的颜色效果，请稍作调整：

*  Hue
    
    色调
 *  Saturation
    
    饱和
 *  Lightness
    
    亮度

yields very powerful visuals. Say you wanted to turn a whole scene, every element a slightly different color, from day to night slowly. Previously the easiest way to do so was to slowly change the color value of each of these elements individually. You could put an overlay on the whole container, but that lacks sophistication and realism. Or, perhaps, use an SVG fe matrix filter- which is very unsemantic and not very intuitive to animate. Or even a CSS filter, that doesn't, as of yet, have a ton of support. Now, in one small piece of code, you can uniformly, and with great backwards compatibility, grab hundreds of elements and make them slightly darker, decrease their relative saturation, and slowly adjust their hue to turn them a slightly different shade. Tweening HSL also has the benefit of being able to be used for both `background` (for divs) or `fill` (for SVG) because it's not opinionated towards a certain type of property.

产生非常强大的视觉效果。 假设您要慢慢改变整个场景，每个元素的颜色从白天到晚上都要稍有不同。 以前，最简单的方法是分别缓慢更改每个元素的颜色值。 您可以在整个容器上放置一个覆盖层，但是缺少复杂性和真实性。 或者，也许使用SVG fe矩阵滤波器-这是非常语义化的，并且动画效果不是很直观。 甚至是CSS过滤器，到目前为止还没有很多支持。 现在，只需一小段代码，您就可以统一且具有良好的向后兼容性，抓住数百个元素并使它们稍微变暗，降低其相对饱和度，并缓慢调整其色相以使其略有不同。 Tweening HSL的另一个好处是可以用于`background` (用于div)或`fill` (用于SVG)，因为它不针对某种类型的属性。

Here's a little demo to show how it works:

这是一个演示它如何工作的小演示：

See the Pen [Turtles that show Relative HSL tweening][] by Sarah Drasner ([@sdras][sdras]) on [CodePen][].

见笔[海龟，显示相对HSL补间][Turtles that show Relative HSL tweening]萨拉Drasner( [@sdras][sdras] )上[CodePen][] 。

So many options! What's a good use case? Let's leave that up to your viewer. We can put the stagger cycle and the HSL color tweening together with some interaction. But instead of a night scene, let's make it a little more wild.

这么多的选择！ 有什么好的用例？ 让我们留给您的观众。 我们可以将交错周期和HSL颜色补间以及一些交互作用放在一起。 但是，除了夜景，我们让它更加狂野。

Because we are tweening relative values, we can combine effects on the buttons and get multiple outputs. We'll make two different buttons with slightly different relative effects. It's also worth mentioning that we finally have [class operation on SVG in the 3.0.0 release of jquer][]y and can easily control our tweens in interaction:

因为我们要补间相对值，所以我们可以组合按钮上的效果并获得多个输出。 我们将制作两个不同的按钮，它们的相对效果略有不同。 还值得一提的是， [在jquer][class operation on SVG in the 3.0.0 release of jquer] y [的3.0.0版本中][class operation on SVG in the 3.0.0 release of jquer] ，我们终于[对SVG进行了类操作，][class operation on SVG in the 3.0.0 release of jquer]并且可以轻松地控制交互中的补间：

//button hue
    function hued() {
    
    //keeps the fill and background consistent relative hue changes
      var ch1 = "hsl(+=110%, +=0%, +=0%)", 
      tl = new TimelineMax({
        paused: true
      });
    
      tl.add("hu");
    
      tl.to(mult, 1.25, {
          fill: ch1
        }, "hu");
    
    //tweens for background because of divs and css
      tl.to(body, 1.25, {
          backgroundColor: ch1
        }, "hu");
    
    //the gauge responds to the action in the scene as if it's showing pressure
    
      tl.from(gauge, 2, {
          rotation: "-=70",
          transformOrigin: "50% 50%",
          ease: Bounce.easeOut
        }, "hu");
    
      return tl;
    }
    
    var hue = hued();
    
    //same thing for the tweens for button saturation (has some relative hue as well)
    function saturation() {
      var ch2 = "hsl(+=5%, +=2%, -=10%)",
      tl = new TimelineMax({
        paused: true
      });
    
      tl.add("sated");
    
      tl.to(body, 1, {
          backgroundColor:ch2
        }, "sated");
    
      tl.to(mult, 2, {
          fill:ch2
        }, "sated");
    
      tl.from(gauge, 2, {
          rotation: "-=100",
          transformOrigin: "50% 50%",
          ease: Bounce.easeOut
        }, "sated");
    
      return tl;
    }
    
    var sat = saturation();
    
    // ...
    
    //detect class and either start or reverse the timeline depending
    $(but1).on('click', function(e) {
        e.preventDefault();
    
        $(this).toggleClass('a-s');
        if ($(this).hasClass('a-s')) {
          sat.restart();
        } else {
          sat.reverse();
        }
      });
    
    
      $(but2).on('click', function(e) {
    
        e.preventDefault();
        $(this).toggleClass('a-h');
        if ($(this).hasClass('a-h')) {
          hue.restart();
        } else {
          hue.reverse();
        }
      });

We'll also make the scene stagger in with a bit more nuance with the new stagger cycle. But because we want all of the elements to come in and eventually look the same, it makes more sense to use a `staggerFrom` than `staggerTo`:

我们还将通过新的交错循环使场景更加精细。 但是因为我们希望所有元素都进入并且最终看起来相同，所以使用`staggerFrom`比`staggerTo`更有意义：

tl.staggerFrom(city, 0.75, {
         y: -50,
         scale: 0,
         cycle:{
           x:[300, 100, 200],
           opacity:[0.5, 0.3, 0.2, 0.8],
           rotation:[50, 100, 150],
         }, 
         transformOrigin: "50% 50%",
         ease: Back.easeOut
       }, 0.02, "in");

And that becomes our city constructor set:

这就是我们的城市构造函数集：

See the Pen [City Construction Site][] by Sarah Drasner ([@sdras][sdras]) on [CodePen][].

请参阅[CodePen][sdras]上Sarah Drasner( [@sdras][sdras] ) [撰写][CodePen]的Pen [City施工现场][City Construction Site] 。

There is one more key feature in this release: tweening and morphing complex string-based values. This is such a mind-blowing feature, though, we'll spend a future article focusing on this feature.

此版本中还有一个关键功能：补间和变形基于字符串的复杂值。 但是，这是一个令人赞叹的功能，我们将在以后的文章中重点介绍该功能。

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

这是一个由多个部分组成的系列文章的第三部分。 在我们继续学习每种技术的过程中，我们将把不同的工作方式结合在一起，以创建越来越复杂和引人入胜的工作。 敬请关注！

> 翻译自: [https://davidwalsh.name/gsap-features][GSAP _ SVG for Power Users 3_ New 1.18.0 Features]

1. 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
[here]: http://codepen.io/sdras/pen/9c852940ec52897ca79544879de90eab/
[sdras]: http://codepen.io/sdras
[CodePen]: http://codepen.io
[SVG with Cycle Stagger]: http://codepen.io/sdras/pen/XmmjQb/
[Turtles that show Relative HSL tweening]: http://codepen.io/sdras/pen/zvwGKw/
[class operation on SVG in the 3.0.0 release of jquer]: http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/
[City Construction Site]: http://codepen.io/sdras/pen/YyXewa/