gsap_适用于高级用户的GSAP + SVG 2：复杂的响应式动画

gsap

完整系列 (Complete Series)

• GSAP + SVG for Power Users: Motion Along A Path

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

• GSAP + SVG for Power Users 2: Complex Responsive Animation

  适用于高级用户的GSAP + SVG 2：复杂的响应式动画

• GSAP + SVG for Power Users 3: New 1.18.0 Features

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

This is the second 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. Today we'll briefly explore some new GSAP features, and then go further and create a responsive complex animation from start to finish.

这是有关GreenSock Animation API和SVG的系列文章中的第二篇。 本系列不是针对初学者的，而是深入研究了一些较令人兴奋且鲜为人知的功能，这些功能在初次介绍之后就可以使用。 第一篇文章是关于沿着路径运动的。 今天，我们将简要探讨一些新的GSAP功能，然后再进行进一步研究，从头到尾创建一个自适应的复杂动画。

The number-one reason I use GSAP has to do with cross-browser support for SVG transforms. Stable SVG rotation is very cumbersome. In almost every browser, transform-origin problems persist, and are completely unsupported in IE at all. This problem is clearly exacerbated when attempting to use transforms in a responsive manner, as any small transform-origin anomalies are exaggerated and difficult to override.

我使用GSAP的第一原因与跨浏览器对SVG转换的支持有关。 稳定的SVG旋转非常麻烦 。 在几乎所有浏览器中，转换源问题仍然存在，并且在IE中完全不受支持。 尝试以响应方式使用变换时，此问题显然会加剧，因为任何小的起源于变换的异常都会被夸大并且难以覆盖。

Not only does GreenSock correct this behavior, but with support back to IE9, it offers a few more tools that make responsive design and development particularly solid. Currently, transforms on SVG elements with native rendering technologies (and subsequently, other JS libraries that use them) do not support correct rendering based on percentages. The latest (1.17.0) release of GSAP solves this issue with matrix calculations.

GreenSock不仅可以纠正此问题，而且还支持IE9，它提供了更多工具，使响应式设计和开发特别可靠。 当前，使用本机渲染技术(以及随后使用它们的其他JS库)对SVG元素进行的转换不支持基于百分比的正确渲染。 GSAP的最新版本(1.17.0)通过矩阵计算解决了这个问题。

Let's first establish that by removing the width and height values from the SVG itself, defining the viewbox, and then using CSS or JS to control the width and height of the SVG, we can easily make an SVG adjust to percentage, flexbox, or any other kind of responsive implementation. You can also add preserveAspectRatio="xMinYMin meet" to ensure that all corresponding dimensions will scale appropriately and respective to one another, but since that's the default, it's not strictly necessary. Here's a great playground by Sara Soueidan if you'd like to get more background on the viewbox and scaling.

首先，我们要确定，通过从SVG本身删除宽度和高度值，定义视图框，然后使用CSS或JS控制SVG的宽度和高度，我们可以轻松地将SVG调整为百分比，flexbox或任何其他值其他响应式实施。 您还可以添加preserveAspectRatio="xMinYMin meet"以确保所有相应的尺寸都可以适当地缩放并彼此缩放，但是由于这是默认设置，因此并非绝对必要。 这是Sara Soueidan的一个很棒的游乐场 ，如果您想在视图框和缩放比例上获得更多背景信息。

There are 3 particular strengths in this latest release as it applies to SVG, all employing the use of transforms. The first is, aside from transformOrigin, GSAP now has built in support for svgOrigin. This means that you can choose whether you want your element to transform based on the element itself (i.e. rotating on its own axis) or using a coordinate in the SVG viewbox. With svgOrigin, you would declare values according to the viewbox coordinates. In other words, if your viewbox is "0 0 400 400" and you want to spin around the SVG center, you would declare svgOrigin: "200 200";  Usually you will find that moving and adjusting a transformOrigin is enough. But in the case of the pen below, I made a cow spin around the moon at a certain part of the viewbox, and because I used an svgOrigin coordinate, it was very easy to make this animation responsive:

在此最新版本中，由于它适用于SVG，因此具有3个特别的优点，它们都使用了转换。 首先是，除了transformOrigin ，GSAP现在还内置了对svgOrigin支持。 这意味着您可以选择是要基于元素本身(即沿其自身的轴旋转)还是在SVG viewbox使用坐标来变换元素。 使用svgOrigin ，您将根据svgOrigin viewbox坐标声明值。 换句话说，如果您的viewbox为"0 0 400 400"并且想在SVG中心旋转，则可以声明svgOrigin: "200 200"; 通常，您会发现移动和调整transformOrigin就足够了。 但是在下面的笔的情况下，我使奶牛在视箱的某个位置绕着月亮旋转，并且由于我使用了svgOrigin坐标，因此使该动画具有响应性非常容易：

TweenMax.set(cow, {
	svgOrigin:"321.05, 323.3",
	rotation:50
});

(size the window down horizontally to watch the animation adjust to the viewport)

(水平缩小窗口以观看动画调整到视口)

See the Pen Responsive Cow Jumps Over the Moooooon by Sarah Drasner (@sdras) on CodePen.

请参见CodePen上的Sarah Drasner( @sdras ) 撰写的“笔响应式母牛越过 Moooooon” 。

The next great feature we'll cover is smoothOrigin on SVG elements. Typically, if you change the transform origin on elements after they've already been transformed, the movement becomes complex and counterintuitive as seen below: (this pen courtesy of Marc Grabinski)

我们将介绍的下一个重要功能是SVG元素上的smoothOrigin 。 通常，如果在元素已经变换之后更改其变换原点，则运动将变得复杂且违反直觉，如下所示：(此笔由Marc Grabinski提供)

See the Pen Stacking Transforms with SVG by Marc Grabanski (@1Marc) on CodePen.

见笔堆叠变换与SVG由Marc Grabanski( @ 1Marc )上CodePen 。

As explained in this video by Carl Schooff of GreenSock, smoothOrigin corrects for this problem. It makes sure that when you change the transform origin for an SVG element and subsequently move it again, it doesn't cause any kind of strange jumpiness. This solves a huge amount of counter-intuitive and hair-pulling behavior when working with a longer and more complex responsive animation. GSAP also leaves you the option of turning this off with one line of code, in the edge-case that you'd like to use the native rendering: CSSPlugin.defaultSmoothOrigin = false;

正如GreenSock的Carl Schooff在此视频中所解释的，smoothOrigin可以解决此问题。 确保当您更改SVG元素的变换原点并随后再次移动它时，它不会引起任何奇怪的跳跃。 当处理更长，更复杂的响应动画时，这解决了许多违反直觉和拖头发的行为。 在您要使用本机渲染的情况下，GSAP还为您提供了使用一行代码关闭此选项的选项： CSSPlugin.defaultSmoothOrigin = false;

The last great feature for complex responsive animations in GSAP is the ability to do percentage-based animations dependant on the SVG elements themselves. CSS and SMIL don't have good support for this type of behavior. Just like Motion Along A Path, GSAP offers the most backwards-compatibility and cross-browser support for percentage-based SVG transforms. Check out this pen courtesy of GreenSock:

GSAP中复杂的响应动画的最后一个强大功能是能够根据SVG元素本身执行基于百分比的动画。 CSS和SMIL对这种行为没有很好的支持。 就像沿着路径运动一样，GSAP为基于百分比的SVG转换提供了最向后的兼容性和跨浏览器的支持。 看看这支由GreenSock提供的笔：

See the Pen SVG Percent-based translation by GreenSock (@GreenSock) on CodePen.

请参阅CodePen上GreenSock ( @GreenSock )提供的基于 Pen SVG百分比的翻译 。

My original intent in this article was to discuss how amazing percentage-based transforms on SVG are and how useful they can be. But as I began to write demos for it, I realized that what's surprising, though, is the fact that you might not need them. SVG transforms rely on the SVG canvas, not absolute, browser-window defined pixel integers. If we couple the power of GSAP's timeline with SVG's ease of use for scalability, we can get some very interesting effects. Because we're moving our elements according the to the SVG DOM, elements aren't the only thing that's scalable. All of the corresponding transforms and movement are as well:

我在本文中的初衷是讨论SVG上基于​​百分比的惊人转换以及它们的有用性。 但是当我开始为它编写演示时，我意识到令人惊讶的是，您可能不需要它们 。 SVG转换依赖于SVG画布，而不是浏览器窗口定义的绝对像素整数。 如果将GSAP时间轴的功能与SVG的易用性相结合以实现可伸缩性，我们将获得一些非常有趣的效果。 因为我们要根据SVG DOM来移动元素，所以元素并不是唯一可扩展的东西。 所有相应的变换和移动也是如此 ：

See the Pen Completely Responsive, Fluid Complex Animation by Sarah Drasner (@sdras) on CodePen.

在CodePen上查看 Sarah Drasner( @sdras ) 编写的“钢笔完全响应，流畅的复杂动画” 。

There are no media queries to be found. I'm moving things based on the x and y axes like so:

找不到媒体查询。 我正在基于x和y轴移动事物，如下所示：

tl.staggerFromTo($iPop, 0.3, {
		scale: 0,
		x: 0,
		y: 0
	}, {
	scale: 1,
		x: 30,
		y: -30,
		ease: Back.easeOut
}, 0.1, "start+=0.3")

Note that we're not moving things with percentage-based transforms. GSAP is establishing behavior based on the viewbox, and therefore, responsive animation becomes as easy as removing the width and height and declaring it elsewhere.

请注意，我们不会使用基于百分比的转换来移动内容。 GSAP正在基于视图框建立行为，因此，响应式动画变得与删除宽度和高度并将其声明到其他位置一样容易。

It's nice to just "squish" an animation to our viewport, but we all know that true responsive development is a more involved process than that. Let's take our new shiny tools and couple them with some responsive development, from start to finish.

只是将动画“压缩”到我们的视口是很好的，但是我们都知道，真正的响应式开发比这更复杂。 从头到尾，让我们采用新的闪亮工具，并将其与响应开发相结合。

There are a few ways we can do this. One is to take a large SVG sprite and shift the viewbox with a media query event handler. Another is to design our animation using interlocking parts, much like tetris pieces, and use multiple SVGs that can be reconfigured. Let's explore the latter.

我们有几种方法可以做到这一点。 一种是使用大型SVG精灵，并使用媒体查询事件处理程序移动视图框 。 另一个方法是使用互锁的零件(如俄罗斯方块碎片)设计动画 ，并使用多个可重新配置的SVG。 让我们探索后者。

See the Pen Responsive Huggy Laser Panda Factory by Sarah Drasner (@sdras) on CodePen.

见笔响应Huggy激光熊猫厂萨拉Drasner( @sdras )上CodePen 。

In the pen above, Huggy Laser Panda Factory, we have 3 distinct parts of the factory. In order to keep our code organized, each section can accept one type of user interaction, which then triggers its own timeline. Keeping the inline SVGs distinct from one another also allows us to collapse them and move them according to percentage or integers on variable viewports, making our animation flexible for both mobile and future iterations. We've plotted out an initial view for desktop, as well as how it will be reconfigured for smaller displays, including a transform:scaleX(-1); to reflect the second portion on mobile so it will fit gracefully, with a mobile-first implementation.

在上面的Huggy Laser Panda Factory笔中，我们有工厂的3个不同部分。 为了使我们的代码井井有条，每个部分都可以接受一种类型的用户交互，然后触发其自己的时间轴。 保持嵌入式SVG彼此不同还使我们可以折叠它们，并根据它们在可变视口上的百分比或整数移动它们，从而使我们的动画在移动和未来迭代中都具有灵活性。 我们已经为桌面绘制了一个初始视图，以及如何将其重新配置为较小的显示，包括transform:scaleX(-1); 以便将第二部分反映在移动设备上，从而使其与移动设备优先实现相适应。

@media (max-width: 730px) {
	.second {
		width: 70%;
		top: -90px;
		margin-left: 70px;
		transform: scaleX(-1);
	}
}


@media (min-width: 731px) {
	.second {
		width: 350px;
		margin-left: 365px;
		top: 370px !important;
	}
}

Each building block has its own function, named for what part of the animation it serves. This avoids any scoping problems and keeps everything organized and legible. The user can only trigger behaviors relative to the same SVG, or building block, of the animation. We pause the timeline initially, but use the button or group to restart it here:

每个构建块都有其自己的功能，并根据其在动画中的作用而命名。 这样可以避免任何范围界定问题，并使一切井井有条。 用户只能触发相对于动画的相同SVG或构造块的行为。 我们最初会暂停时间轴，但是请使用按钮或组在此处重新启动它：

//create a timeline but initially pause it so that we can control it via click
var triggerPaint = new TimelineMax({paused:true});
triggerPaint.add(paintPanda());

//this button kicks off the panda painting timeline
$("#button").on("click", function(e){
	e.preventDefault();
	triggerPaint.restart();
});

Keep in mind the SVG DOM is a bit of a mythical beast, and differs from regular DOM operations in some instances. You can't perform class operations with jQuery on SVG DOM elements (though that's coming down the pipeline soon, in version 3.0.0), so there are times when vanilla JavaScript will work better.

请记住，SVG DOM有点像神话中的野兽，在某些情况下与常规DOM操作有所不同。 您无法在SVG DOM元素上使用jQuery执行类操作(尽管该版本即将在3.0.0版中发布 )，因此有时香草JavaScript会更好地工作。

We also have a looping timeline that covers many elements in the document. We set a relative label to the beginning of it so that we can set loops on multiple objects. This is important because if we let loops follow one another in a timeline, only the first will fire, as it will run forever and the second one will wait to follow indefinitely.

我们还有一个循环时间表，涵盖了文档中的许多元素。 我们在其开头设置一个相对标签，以便可以在多个对象上设置循环。 这一点很重要，因为如果让循环在时间轴中紧随其后，则只会触发第一个循环，因为它将永远运行，而第二个循环将无限期地等待。

function revolve() {
	var tl = new TimelineMax();

	tl.add("begin");
	tl.to(gear, 4, {transformOrigin:"50% 50%", rotation:360, repeat:-1, ease: Linear.easeNone}, "begin");
	tl.to(wind, 2, {transformOrigin:"50% 50%", rotation:360, repeat:-1, ease: Linear.easeNone}, "begin");

	// ...
	return tl;
}

var repeat = new TimelineMax();
repeat.add(revolve());

We now have four timelines in total; three that are cleanly associated with each section, and the global looping timeline. Our interaction and animations scale with each individual SVG, so we are free to move and adjust them in the configurations that we like for different viewports, and the code stays direct and organized.

现在，我们总共有四个时间表： 与每个部分明确相关联的三个，以及全局循环时间表。 我们的交互和动画与每个单独的SVG缩放比例，因此我们可以自由地在我们喜欢的视口配置中移动和调整它们，并且代码保持直接和有条理。

This is the second 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 more complex and engaging work. Stay tuned!

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

翻译自: https://davidwalsh.name/gsap-svg-responsive-animation

gsap