知乎 运动规划和路径规划

Making animations that “feel right” can be tricky.

制作“感觉不错”的动画可能很棘手。

When I’m stuck, I find Disney’s 12 principles of animation useful. They’re from the book ‘The Illusion of Life’ and although the book was written about hand-drawn character animation, a lot of the principles are relevant for animation on the web.

当我陷入困境时，我发现迪士尼的12条动画原理很有用。 它们来自《生命的幻觉》一书，尽管该书是关于手绘角色动画的，但许多原理与网络动画有关。

The 7th principle of animation is about arcs:

动画的第七个原则是关于弧的：

Most natural action tends to follow an arched trajectory, and animation should adhere to this principle by following implied “arcs” for greater realism.

大多数自然动作倾向于遵循弓形的轨迹，动画应遵循此原理，通过遵循暗示的“弧”来实现更大的真实感。

In other words, animating along a curved path can make movement feel more realistic.

换句话说，沿弯曲路径设置动画可以使运动更逼真。

Straight lines are what browsers do best though. When we animate an element from one place to another using a translation the browser doesn’t take realism into account. It’ll always take the fastest and most efficient route.

直线是浏览器最擅长的。 当我们使用翻译将元素从一个地方动画到另一个地方时，浏览器不会考虑现实性。 它将始终采取最快，最有效的途径。

This is where motion paths can come in handy. Motion paths give us the ability to move an element along a predefined path. They’re great for creating trajectories to animate along.

这是运动路径可以派上用场的地方。 运动路径使我们能够沿着预定义的路径移动元素。 它们非常适合创建轨迹以进行动画处理。

Use the toggle to see the paths.

使用切换按钮查看路径。

See the Pen Alien Abduction- toggle by Cassie Evans (@cassie-codes) on CodePen.default

见笔外国人外展切换由卡西·埃文斯( @卡西码上) CodePen .DEFAULT

As well as being useful, they’re quite a lot of fun to play around with.

除了有用之外，它们也很有趣。

See the Pen Loop by Cassie Evans (@cassie-codes) on CodePen.default

见笔环由卡西·埃文斯( @卡西码上) CodePen .DEFAULT

So, how do you animate along a motion path?

那么，如何沿运动路径进行动画处理？

I use GreenSock (GSAP) for most of my SVG animation and I made these demos using the newly released GSAP 3 and their MotionPathPlugin. So, if you want to skip to that bit, go ahead!

我将GreenSock (GSAP)用于大多数SVG动画，并使用新发布的GSAP 3及其MotionPathPlugin进行了这些演示。 因此，如果您想跳到那一点，请继续！

Otherwise let’s take a little journey through the past, present and future of motion path animation.

否则，我们来回顾一下运动路径动画的过去，现在和将来。

(Did someone say CSS motion paths?)

(有人说过CSS运动路径吗？)

首先，一些设置技巧。 (First, a little setup tip.)

Make sure to keep the path and element you’re animating in the same SVG and co-ordinate space, otherwise things get a bit messy.

确保将要设置动画的路径和元素放在相同的SVG和坐标空间中，否则情况会变得有些混乱。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1300 800"><path class="path" d="M1345.7 2.6l2.4-4.4"/><g class="rocket">...</g>
</svg>

SMIL (SMIL)

If you google “SVG motion path animation”, you’re going to get a lot of hits talking about SMIL.

如果您搜索“ SVG运动路径动画”，您将获得很多谈论SMIL的热门信息。

SMIL was the original proposed method for SVG animation. It included the ability to animate along a path using the <animatemotion> element.

SMIL是SVG动画最初提出的方法。 它包括使用<animatemotion>元素沿路径进行动画处理的能力。

It’s nice and declarative and currently the browser support is surprisingly good, covering all modern browsers except Edge and Opera Mini.

它很好并且具有声明性，当前浏览器支持非常好，涵盖了除Edge和Opera Mini之外的所有现代浏览器。

But, and this is a big but, the future of SMIL is uncertain, and has been for a while.

但是，这很大，但是SMIL的未来是不确定的，并且已经存在了一段时间。

It was deprecated by Chrome a few years back and although they’ve now suspended that deprecation, implementations still vary and there’s no clear path towards cross-browser support.

Chrome早在几年前就已弃用该功能，尽管他们现在已暂停使用该功能，但实现方式仍然各不相同，也没有通往跨浏览器支持的明确途径。

Although it’s fun to play around with, SMIL isn’t very future-proof, so I’m only going to touch on it.

尽管玩起来很有趣，但是SMIL并不是很适合未来，所以我只涉及它。

In order to animate along a path with the animateMotion element, you reference the path you want to animate along using path="..." and define the element you want to animate using xlink:href="#...":

为了使用animateMotion元素沿path="..."进行动画处理，请使用path="..."引用要进行动画处理的path="..."并使用xlink:href="#..."定义要进行动画处理的元素：

<animateMotion path="M20.2..."xlink:href="#rocket" dur="10s" rotate="auto"/>

See the Pen loop SMIL by Cassie Evans (@cassie-codes) on CodePen.default

见笔环SMIL由卡西·埃文斯( @卡西码上) CodePen .DEFAULT

With SMIL effectively out of the picture, browser vendors are now focused on supporting modern alternatives like the CSS Motion Path Module.

随着SMIL的有效推出，浏览器供应商现在专注于支持现代替代方案，例如CSS运动路径模块。

CSS运动路径模块 (CSS Motion Path Module)

You can check out which features your browser supports in the demo below.

您可以在下面的演示中查看您的浏览器支持哪些功能。

See the Pen Browser Support – CSS motion path module by Cassie Evans (@cassie-codes) on CodePen.default

请参见CodePen上的Cassie Evans的“钢笔浏览器支持-CSS运动路径”模块( @ cassie-codes )。默认

If you’ve got all green smiley faces, you’re good to go. But you may have a sad face for offset-anchor. This is because this property is currently still experimental. It’s behind a flag in Chrome, meaning it’s not turned on by default.

如果您拥有所有绿色的笑脸，那就很好了。 但是您可能对offset-anchor感到沮丧。 这是因为该属性当前仍处于实验状态。 它位于Chrome中的标志后面，表示默认情况下未启用。

You can choose to enable it by going to this URL in Chrome:

您可以通过在Chrome中访问以下网址来选择启用它：

chrome://flags/#enable-experimental-web-platform-features

chrome：// flags /＃enable-experimental-web-platform-features

and enabling experimental web platform features.

并启用实验性Web平台功能。

This module is joint work by the SVG and CSS working groups, so unlike SMIL, we’ll be able to use CSS motion paths to animate both, HTML and SVG DOM elements. I love a CSS-only solution, so although it’s not ready to use in production (yet), this is pretty exciting stuff.

该模块是SVG和CSS工作组的共同工作，因此与SMIL不同，我们将能够使用CSS运动路径为HTML和SVG DOM元素设置动画。 我喜欢仅CSS的解决方案，因此尽管尚未准备好在生产中使用它，但这还是一件令人兴奋的事情。

The motion path module consists of five properties:

运动路径模块包含五个属性：

• offset (shorthand property for the following)

  offset (以下内容的简写属性)

• offset-path

  offset-path

• offset-distance

  offset-distance

• offset-anchor

  offset-anchor

• offset-rotate

  offset-rotate

offset-path (offset-path)

offset-path defines the path that we can place our element on. There are a few proposed values but path() seems to be the only one supported right now.

offset-path定义了可以放置元素的路径。 有一些建议的值，但是path()似乎是目前唯一受支持的值。

.rocket {offset-path: path('M1345.7 2.6l2.4-4.4');
}

path() takes a path string with SVG coordinate syntax, which may look scary, but you don’t have to write this out. You can create a path in a graphics editing program and copy and paste it in.

path()采用具有SVG坐标语法的路径字符串，这看起来可能很吓人，但是您不必将其写出来。 您可以在图形编辑程序中创建路径，然后将其复制并粘贴到其中。

offset-distance (offset-distance)

offset-distance specifies the position along an offset-path for an element to be placed. This can be either in pixels or as a percentage of the length of the path.

offset-distance指定要放置的元素沿偏移路径的位置。 这可以是像素，也可以是路径长度的百分比。

See the Pen Rocket – CSS motion path – offset-distance by Cassie Evans (@cassie-codes) on CodePen.default

见笔火箭- CSS运动路径-偏移距离由卡西埃文斯( @卡西码上) CodePen .DEFAULT

offset-anchor (offset-anchor)

By default the element’s top left corner will be aligned with the path, but we can change this with offset-anchor. offset-anchor behaves a lot like transform-origin. In fact if set to auto, it’s given the same value as the element’s transform-origin, so we can optionally use transform-origin for the same results.

默认情况下，元素的左上角将与路径对齐，但是我们可以使用offset-anchor进行更改。 offset-anchor行为很像transform-origin 。 实际上，如果将其设置为auto，则它的值与元素的transform-origin ，因此我们可以选择对相同的结果使用transform-origin 。

Like transform-origin it accepts a position with x and y values, either as a percentage or a keyword like bottom or left.

像transform-origin一样，它接受带有x和y值的位置，可以是百分比，也可以是诸如bottom或left之类的关键字。

Have a play with the values:

发挥以下价值：

See the Pen Rocket – CSS motion path – offset anchor by Cassie Evans (@cassie-codes) on CodePen.default

见笔火箭- CSS运动路径-偏移锚由卡西埃文斯( @卡西码)上CodePen .DEFAULT

offset-rotate (offset-rotate)

offset-rotate defines the direction the element faces on the path.

offset-rotate定义元素在路径上面向的方向。

By default it’s set to auto and will rotate with the path. You can pass in an optional second value in degrees in order to tweak the direction of this rotation.

默认情况下，它设置为auto ，并将随路径旋转。 您可以传入可选的以度为单位的第二个值，以调整此旋转方向。

See the Pen Rocket – CSS motion path – offset-rotate – auto deg by Cassie Evans (@cassie-codes) on CodePen.default

见笔火箭- CSS运动路径-自动度-偏移旋转由卡西·埃文斯( @卡西码上) CodePen .DEFAULT

If you want your element to face the same direction throughout, and not rotate with the path, you can leave out auto and pass in a value in degrees.

如果您希望元素始终面向相同的方向，并且不随路径旋转，则可以省略auto并以度为单位传递值。

See the Pen Rocket – CSS motion path – offset-rotate – deg by Cassie Evans (@cassie-codes) on CodePen.default

见笔火箭- CSS运动路径-偏移-旋转-度由卡西埃文斯( @卡西码)上CodePen .DEFAULT

These properties were renamed from motion to offset since this spec was proposed. This is because alone, these properties just provide another way to set the position and rotation of absolutely positioned elements. But we can create motion by using them in conjunction with CSS animations and transitions.

自提出该规范以来，这些属性从motion重命名为offset 。 这是因为仅这些属性就提供了另一种方法来设置绝对定位的元素的位置和旋转。 但是我们可以通过将它们与CSS动画和过渡结合使用来创建运动。

.rocket {offset-path: path('M20.2...');offset-anchor: 50% 50%;offset-rotate: auto;/*   if offset anchor isn't supported we can use transform-origin instead */transform-origin: 50% 50%;animation: move 8s forwards linear;transform-box: fill-box;
}@keyframes move {from {offset-distance: 0%;}to {offset-distance: 100%;}
}

See the Pen Rocket – CSS motion path by Cassie Evans (@cassie-codes) on CodePen.default

请参见CodePen上的Cassie Evans( @ cassie-codes )撰写的Pen Rocket – CSS运动路径。

In this demo, I’m using a relatively new CSS property, transform-box.

在此演示中，我使用了一个相对较新CSS属性transform-box 。

This is to avoid a browser quirk that’s caught me out a few times. When calculating transforms and transform-origin, some browsers use the element’s bounding box as the reference box and others use the SVG viewbox.

这是为了避免浏览器古怪而使我迷惑不解。 在计算变换和变换原点时，某些浏览器使用元素的边界框作为参考框，而另一些浏览器使用SVG视图框。

If you set the value to fill-box the objects bounding box is used as the reference box.

如果将值设置为fill-box则将对象边界框用作参考框。

And if you set the value to view-box the nearest SVG viewbox is used as the reference box.

并且，如果将值设置为view-box则将最近的SVG viewbox用作参考框。

You can see what happens to the center of rotation when we change it here:

您可以在此处更改时查看旋转中心发生的情况：

See the Pen Rocket – CSS motion path – transform-box by Cassie Evans (@cassie-codes) on CodePen.default

见笔火箭- CSS运动路径-转换盒由卡西·埃文斯( @卡西码上) CodePen .DEFAULT

GreenSock动画平台(GSAP) (GreenSock Animation Platform (GSAP))

While we wait for the CSS solution to be more widely implemented we’re in a bit of a motion path limbo. Thankfully there’s some JavaScript animation libraries that are bridging this gap.

当我们等待CSS解决方案得到更广泛的实施时，我们处于运动路径困境中。 幸运的是，有一些JavaScript动画库弥补了这一空白。

I usually use GreenSock for SVG animation for a few reasons.

我出于某些原因通常将GreenSock用于SVG动画。

There are some cross browser quirks with SVG, especially with how transforms are handled. The folks at GreenSock go above and beyond to handle these inconsistencies.

SVG有一些跨浏览器的怪癖，尤其是在处理转换方面。 GreenSock的员工不仅要解决这些不一致的问题，还需要超越其他方面。

Animation can also be a bit fiddly, especially when it comes to fine-tuning timings and chaining different animations together. GreenSock gives you a lot of control and makes creating complex animations fun.

动画也可能有点怪异，尤其是在调整时间并将不同动画链接在一起的时候。 GreenSock为您提供了很多控制权，并使创建复杂的动画变得有趣。

They also provide some plugins that are great for SVG animation like DrawSVG, MorphSVG and MotionPathPlugin.

他们还提供了一些非常适合SVG动画的插件，例如DrawSVG ， MorphSVG和MotionPathPlugin 。

They’re all free to experiment with on Codepen, but some of the plugins are behind a membership fee. MotionPathPlugin is one of the free ones, and part of the new GSAP 3 release.

他们都可以在Codepen上免费试用，但是某些插件需要收取会员费。 MotionPathPlugin是免费的之一，并且是新GSAP 3版本的一部分。

MotionPathPlugin gives you the ability to turn an SVG path into a motion path, or specify your own path manually. You can then animate SVG or DOM elements along that path, even if those elements are in a completely different coordinate space.

MotionPathPlugin使您能够将SVG路径转换为运动路径，或手动指定自己的路径。 然后，您可以沿该路径设置SVG或DOM元素的动画，即使这些元素位于完全不同的坐标空间中。

Here’s a demo with the necessary libraries added to start you off.

这是一个演示，其中添加了必要的库以开始您的学习。

In order to use a plugin we have to register it, like this:

为了使用插件，我们必须注册它，如下所示：

gsap.registerPlugin(MotionPathPlugin);

Then we can start animating. This is what a tween using the simplified GSAP 3 syntax looks like:

然后我们可以开始制作动画。 使用简化的GSAP 3语法的补间效果如下所示：

gsap.to(".rocket", {motionPath: ...duration: 5,
});

The name ‘tween’ comes from the world of hand-drawn animation, too.

“吐温”这个名字也来自手绘动画的世界。

Tweening is the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image.

补间是在两个图像之间生成中间帧，以使第一图像平滑地演变为第二图像的过程。

That’s pretty much what a GSAP tween does. You feed in the element you want to animate, the duration, and the properties you want to target and the tween will figure out the in-between states.

这几乎就是GSAP补间所做的。 您输入要设置动画的元素，持续时间以及要定位的属性，并且补间将找出中间状态。

The motionPath attribute can be used shorthand, and passed a path:

motionPath属性可以motionPath使用，并传递路径：

gsap.to(".rocket", {motionPath: "#path",duration: 5,
});

Or, if we want more control over the settings we can pass it an object of options:

或者，如果我们想对设置进行更多控制，可以将其传递给选项对象：

gsap.to(".rocket", {motionPath: {path: "#path",align: "#path",autoRotate: true,},duration: 5,
});

See the Pen Rocket – GSAP motion path by Cassie Evans (@cassie-codes) on CodePen.default

请参见CodePen上的Cassie Evans( @ cassie-codes )撰写的Pen Rocket – GSAP运动路径。

Here are some of the properties we can control.

这是我们可以控制的一些属性。

path (path)

This defines the motion path we’re animating along, we can reference a path that exists in the document by using a selector,

这定义了我们要进行动画处理的运动路径，我们可以使用选择器来引用文档中存在的路径，

motionPath: {path: "#path",
}

a string that contains SVG path data,

包含SVG路径数据的字符串，

motionPath: {path: 'M125.7 655a9.4 9.4...',
}

an object containing an array of x and y co-ordinates to move between,

包含x和y坐标数组的对象，可以在它们之间移动，

motionPath: {path: [{x: 100, y: 100}, {x: 300, y: 20}]
}

or a variable referring to one of these options:

或引用以下选项之一的变量：

const myPath = 'M125.7 655a9.4 9.4...'motionPath: {path: myPath,
}

align (align)

We can use this to align the element to the path, or other elements in the document by passing in a selector:

我们可以通过传递选择器来使用它来使元素与路径或文档中的其他元素对齐：

motionPath: {path: "#path",align: "#path"
}

We can also align the element to itself if we want the animation to start from the element’s current position.

如果我们希望动画从元素的当前位置开始，我们还可以将元素与其自身对齐。

motionPath: {path: "#path",align: "self"
}

In the next demo, the purple rocket is aligned to self and the green rocket is aligned to the path.

在下一个演示中，紫色火箭与自身对齐，绿色火箭与路径对齐。

align: “self” is like moving the path to the element, rather than the element to the path.

align：“自我”就像将路径移动到元素，而不是将元素移动到路径。

See the Pen Rocket – GSAP motion path – align by Cassie Evans (@cassie-codes) on CodePen.default

请参见Pen Rocket – GSAP运动路径–通过CodePen上的Cassie Evans( @ cassie-codes )对齐。

By default, the element’s top left corner will be the center of rotation and alignment. In order to align the element accurately on the path you’ll need to set the element’s center of rotation, like this:

默认情况下，元素的左上角将是旋转和对齐的中心。 为了在路径上精确对齐元素，您需要设置元素的旋转中心，如下所示：

gsap.set(".rocket", { xPercent: -50,    yPercent: -50,    transformOrigin: "50% 50%"
});

autoRotate (autoRotate)

This is how we get our element to rotate along with the curvature of the path:

这就是我们如何使元素随路径的曲率一起旋转：

motionPath: {path: "#path",align: "#path"autoRotate: true,
}

We can also provide a number value. This will rotate along with the path, but maintain that angle relative to the path.

我们还可以提供一个数字值。 这将随路径一起旋转，但相对于路径保持该角度。

motionPath: {path: "#path",align: "#path"autoRotate: 90,
}

start & end (start & end)

These properties let us define where on the path the motion should begin and end.

这些属性使我们可以定义运动应在路径上的何处开始和结束。

By default, it starts at 0 and ends at 1, but we can provide any decimal number:

默认情况下，它从0开始到1结束，但是我们可以提供任何十进制数字：

motionPath: {path: "#path",align: "#path"autoRotate: true,start: 0.25,end: 0.75,
}

If you want the element to go backwards along the path, you can provide negative numbers.

如果您希望元素沿路径向后移动，则可以提供负数。

See the Pen Rocket – GSAP motion path – align by Cassie Evans (@cassie-codes) on CodePen.default

请参见Pen Rocket – GSAP运动路径–通过CodePen上的Cassie Evans( @ cassie-codes )对齐。

immediateRender (immediateRender)

If your element is starting off at a different position in the document and you want it to align with the path you might notice a jump as it moves from its position to the path.

如果您的元素从文档中的其他位置开始，并且您希望其与路径对齐，那么当元素从其位置移动到路径时，您可能会注意到一个跳跃。

See the Pen Rocket – GSAP motion path – align by Cassie Evans (@cassie-codes) on CodePen.default

请参见Pen Rocket – GSAP运动路径–通过CodePen上的Cassie Evans( @ cassie-codes )对齐。

You can fix force it to render immediately upon instantiation by adding immediateRender:true to the tween.

您可以通过在补间中添加immediateRender:true来修复强制使其立即实例化的问题。

// animate the rocket along the path
gsap.to(".rocket", {motionPath: {path: "#path",align: "#path",autoRotate: true,},duration: 5,ease: "power1.inOut",immediateRender: true,
});

MotionPathHelper (MotionPathHelper)

Another super cool feature of the GSAP 3 release is the MotionPathHelper.

GSAP 3版本的另一个超酷功能是MotionPathHelper。

It enables you to edit paths directly in the browser! I found this really helpful, as I’m always going back and forth between the browser and my graphics editor.

它使您可以直接在浏览器中编辑路径！ 我发现这非常有帮助，因为我总是在浏览器和图形编辑器之间来回切换。

Give it a go in the demo below. When you’re done, click “copy motion path” to copy the SVG path data to your clipboard. Paste the new path data into the d=”” attribute in the SVG code to update your path.

在下面的演示中试用一下。 完成后，单击“复制运动路径”以将SVG路径数据复制到剪贴板。 将新路径数据粘贴到SVG代码中的d =””属性中，以更新路径。

There are instructions on how to edit the path in the GSAP docs.

在GSAP文档中有有关如何编辑路径的说明。

See the Pen Rocket – GSAP motion path – helper by Cassie Evans (@cassie-codes) on CodePen.default

见笔火箭-帮手- GSAP运动路径由卡西·埃文斯( @卡西码上) CodePen .DEFAULT

GreenSock is a ton of fun to play around with!

GreenSock充满乐趣！

There are a bunch of other features and plugins that when paired with motion path animation can be used to create really cool effects.

还有许多其他功能和插件，当与运动路径动画配合使用时，可以用来创建非常酷的效果。

In this demo, DrawSVG is progressively showing the text path as some staggered elements animate along the path using MotionPathPlugin:

在此演示中，DrawSVG使用MotionPathPlugin逐步显示文本路径，如一些交错元素沿路径动画：

See the Pen Squiggle text animation by Cassie Evans (@cassie-codes) on CodePen.default

见笔Squiggle的文字动画由卡西·埃文斯( @卡西码上) CodePen .DEFAULT

If you’ve had fun with these examples and want to explore GreenSock some more, Christina Gorton has written The New Features of GSAP 3 providing a practical overview.

如果您对这些示例感兴趣，并希望进一步了解GreenSock，则Christina Gorton撰写了《 GSAP 3的新功能》，其中提供了实用的概述。

GreenSock also have a great getting started guide.

GreenSock也有很好的入门指南。

Happy animating!

动画愉快！

翻译自: https://tympanus.net/codrops/2019/12/03/motion-paths-past-present-and-future/

知乎 运动规划和路径规划