css路径动画_使用CSS对路径上的元素进行动画处理

css路径动画

CSS is very good at moving elements “point-to-point” using keyframe animation, or making objects scale, arc, or swing. It can even recreate traditional “pose-to-pose” animation using step(). But CSS usually comes up against hard limits when trying to move elements along a curved or complex path.

CSS非常擅长使用关键帧动画 “逐点”移动元素，或者使对象缩放， 圆弧或摆动 。 它甚至可以使用step()重新创建传统的“摆姿势”动画 。 但是CSS在尝试沿着弯曲或复杂的路径移动元素时通常遇到硬性限制。

Derived from technology that has been in SVG for a decade, the new Motion Path specification allows elements to follow curving, pre-plotted paths in native HTML and CSS, with some assistance from SVG. At the time of writing, CSS motion path is only supported in Chrome 46+, Opera 33+, and the latest version of the Android browser.

源自SVG十年来的技术，新的Motion Path规范允许元素在SVG的帮助下遵循本机HTML和CSS中弯曲的，预先绘制的路径。 在撰写本文时， 仅在Chrome 46 +，Opera 33+和最新版本的Android浏览器中支持CSS运动路径 。

去问爱丽丝 (Go Ask Alice)

Let’s start with the example at the top of this page. Alice is just a straightforward PNG image: the tricky part is the path. I’ve found the best results by creating paths with the following steps:

让我们从本页顶部的示例开始。 爱丽丝只是一个简单的PNG图片：棘手的部分是路径。 通过以下步骤创建路径，我发现了最佳结果：

1. Create your path in Adobe Illustrator or another vector editing program. The path for the above animation looks like this:

   在Adobe Illustrator或其他矢量编辑程序中创建路径。 以上动画的路径如下所示：

   And the code, something like this:

   和代码，像这样：

   <svg xmlns="http://www.w3.org/2000/svg" width="388px" height="401.1px" viewBox="0 0 388 401.1">
       <path fill="#FFF" stroke="#000" d="M69.8, 98.3c116.9, 0,76.9, 261.5, 261.5, 261.5 s103.8-195.4, 233.8-195.4S627.5, 356, 715.2, 356"/>
   </svg>

2. Remove all of the SVG code except for the path information; that is, keep the value following the d attribute, and eliminate the rest.

   除去路径信息以外的所有SVG代码； 也就是说，将值保留在d属性之后，并消除其余部分。

3. Ensure that path coordinates have spaces after each of the commas, and no carriage returns in the path coordinate sequence (while it shouldn’t make any difference, I’ve found Chrome to have problems interpreting motion paths with either).

   确保路径坐标在每个逗号后都有空格，并且路径坐标序列中不包含回车符(尽管它不应该有任何区别，但我发现Chrome浏览器在解释运动路径时都存在问题)。

4. Reference the code inside the CSS for the element to be moved, as the value of a motion-path property:

   引用CSS内要移动的元素的代码，作为motion-path属性的值：

   #alice {
       motion-path: path("M69.8, 98.3c116.9, 0,76.9, 261.5, 261.5, 261.5 s103.8-195.4, 233.8-195.4S627.5, 356, 715.2, 356");
   }

   The Motion Path specification also indicates that a URL reference to an inline SVG path could also be used, which will be very handy for responsive designs; right now, it doesn’t appear to be supported. (SVG shape elements, including rect, ellipse, line and polyline, are supported).

   运动路径规范还指出，也可以使用对嵌入式SVG路径的URL引用，这对于响应式设计非常方便； 目前，它似乎不受支持。 (SVG形状要素，包括rect ， ellipse ， line和polyline ， 支持 )。

5. Create an animation for the element, using the new motion-offset property:

   使用新的motion-offset属性为元素创建动画：

   @keyframes rabbithole {
     0% { motion-offset: 0; }
     100% { motion-offset: 100%; }
   }

   motion-offset is the distance along the path that the element has completed.

   motion-offset是元素已沿着路径完成的距离。

   In Alice’s case, I’m also scaling her as the animation proceeds:

   就爱丽丝而言，随着动画的进行，我也在缩放她：

   @keyframes rabbithole {
     0% { motion-offset: 0; transform: scale(1); }
     100% { motion-offset: 100%; transform: scale(0); }
   }

6. Finally, call on the animation:

   最后，调用动画：

   #alice {
       animation: rabbithole 2.2s forwards;
   }

在点上 (On-Point)

By default, the animated element is auto-aligned to the tangent of the motion path. This behaviour can be manipulated with the motion-rotation property: setting the new property to a value of reverse will mirror the element (making it animate through the path facing “backwards”), while providing an angle (for example, motion-rotation: -45deg) will force the element to follow the path in a fixed orientation.

默认情况下，动画元素会自动对齐到运动路径的切线。 可以使用motion-rotation属性来操纵此行为：将新属性设置为reverse会镜像元素(使其通过面向“后退”的路径进行动画处理)，同时提供一个角度(例如， motion-rotation: -45deg )将迫使元素以固定的方向遵循路径。

It’s also important to note that the element will be animated from the first drawn point in the SVG, although this default behaviour can be changed by using reversed values for motion-offset.

同样重要的是要注意，该元素将从SVG中的第一个绘制点开始进行动画处理，尽管可以通过使用相反的motion-offset值来更改此默认行为。

结论 (Conclusion)

Motion Path is the most exciting addition to CSS animation in the last five years, and this introductory article barely scratches the surface of its possibilities. What’s holding it back from general use is lack of broad browser support; however, given the specification’s similarities to the original SVG implementation, it shouldn’t to too difficult to create a polyfill for browsers to duplicate a motion path in SVG. If I ever complete work on my machine that stops time, that will be one of the first things I’ll turn to; for now, I’ll follow up this article with another covering the SVG equivalent, so those interested can use the same concepts in that technology for their web pages.

“运动路径”是过去五年中CSS动画中最令人兴奋的功能，这篇介绍性文章几乎没有涉及它的可能性。 普遍使用它的原因是缺乏广泛的浏览器支持。 但是，鉴于该规范与原始SVG实现的相似之处，为浏览器创建一个在SVG中复制运动路径的polyfill应该不会太困难。 如果我在停止时间的机器上完成工作，那将是我首先要解决的问题之一。 现在，我将在本文之后再介绍另一篇与SVG相当的文章，以便有兴趣的人可以在其网页中使用相同技术的概念。

更新资料 (Update)

Eric Willigers, the Chromium developer who implemented support for CSS Motion Path, recently wrote to inform me that the specificaion has changed: motion-* properties are changing to offset-*, along with a suite of new features. These changes should reach Chrome stable at the end of 2016; I’ll update this article when they arrive.

实施了对CSS Motion Path的支持的Chromium开发人员Eric Willigers最近写信告诉我，该规范已经改变： motion-*属性更改为offset-* ，以及一系列新功能。 这些更改将于2016年底稳定到Chrome； 当他们到达时，我将更新本文。

翻译自: https://thenewcode.com/38/Animate-Elements-on-a-Path-with-CSS

css路径动画