这是介绍浏览器中web动画api的系列教程的第五篇。如果你有什么问题/想法，或者发现我理解错了规范的内容，或是希望我在接下来的文章中对某部分内容进行探讨的话，请在twitter给我留言吧~@dancwilson。这篇文章的一个比较早期（简单）的版本在我的codepen blog上也有，在chrome声明支持motion path之后发表的。
终于。沿路径的动画，不再是svg的专利！
随着api规范已经制定好并且通过，运动路径motion path也先后出现了不同的形式。单方向最初看起来可能是effect的形式（如上一篇中讨论的groupeffect），但随后motion path作为一个css模块慢慢的一点一点地上位（在它的规范中）。
也就是，沿路径的动画将会变得很简单，成为一组可以添加动画的css属性，和<code>opacity</code>和<code>transform</code>一样。这样css<code>transitions</code>和<code>keyframes</code>就可以使用运动路径了，web动画api也是。这是非常棒的，因为我们都是希望它们能够尽可能的给我们更多的灵活性。chrome和opera已经发布了初步的实现，所以我们现在已经可以真正地开始使用它，尽管还没有找到放入polyfill的方法。
我们来分析一下这些属性到底是什么，可以如何使用，以及现在使用起来会有什么阻碍。
我们接下来会讨论三个<code>motion</code>属性。就目前而言，要看到这些示例，你需要在启用了experimental web platform features的chrome 43+或者opera 30+中，通过<code>chrome://flags</code>或者<code>opera://flags</code>查看。它们的作用是在chrome 46和opera 33中默认启动这项。我通常会同时用两个版本的chrome——稳定版（stable）和金丝雀版（canary），然后只在canary中启用这项flag。
<code>motion-path</code>用于定义路径，元素可沿着该路径移动，下面是路径在svg 1.1中的工作原理：
也可以采用一个<code>fill-rule</code>作为调用路径时的第一个参数。我建议阅读joni trythall的关于编写svg的袖珍指南，可以看看需要讨论什么内容。
你还可以使用一些基础图形作为路径，如<code>circle</code>、<code>polygon</code>、<code>ellipse</code>和<code>inset</code>。如果你使用过css shape，对这块内容应该比较熟悉。
在blink中的初次实现，我发现只有<code>path()</code>方法可以工作，所以不知道是我一直都没有正确地使用图形，还是它还没有实现这一块。
我们使用<code>motion-offset</code>来驱动运动，将元素放到路径上的实际位置。它可以接受浮点长度值或百分比。为了从路径的起点到终点添加动画，我们创建了一个从<code>0</code>到<code>100%</code>的动画。使用统一web动画api，我们有
还有css
这个codepen demo展示了几个小点沿着一条螺旋路径从外向内移动。每个小点在接近中心的时候会变得更快、更小，而且会变得透明。<code>.animate()</code>在每个小点上被调用两次，设置了无限迭代<code>iterations: infinity</code>和延迟<code>delay</code>，第一次调用是设置运动路径，另一次调用是设置缩放和透明度。我将它们分成两块，是为了指定不同的<code>easing</code>函数，不然可能会混在一起。
这种方法也使用了功能检测，就是如果你在safari、firefox、edge或没有<code>flag</code>的chrome/opera中查看过，你就会发现，你看到的是一则提示消息，看不到动画。要看到动画的话也有几个方法，例如：
当然，我们不希望把用户阻挡在一个真正的web thang(注：web thang是一个“涵盖web上的网站和app”的术语)中，所以我们可以有一个备用的动画（或者没有动画也可以），如果支持的话再切换成motion path动画。渐进增强总是没错的。
最后一个属性是<code>motion-rotation</code>，它处理的是元素“面向”哪个方向，在沿着路径移动的过程中。有四种主要的方式来指定。
值<code>auto</code>表示元素随着路径一起旋转。
值<code>reverse</code>表示元素不仅会随着路径旋转，它还会加<code>180</code>度，面向后方。
值<code>auto xdeg</code>（或<code>reverse xdeg</code>）也是同样，除了增加<code>x</code>的度数。
值<code>xdeg</code>不会随着路径旋转，元素会保持固定面朝同一个方向。
这是第一个版本，当然，浏览器制造商和规范制定者还在讨论中。我在尝试这一点的时候注意到的最重要的事情是，缺乏一个方法来在不同的屏幕/容器尺寸中适应路径。
路径是按照它们被定义的方式简单地显示出来的。当使用svg工作的时候，我们有灵活性，因为我们在容器中有不同的坐标系统和属性，如viewbox。在css中定义motion path，路径的尺寸不能被其它属性另外修改或制约。你的元素上定义的宽度和高度只能应用于元素，而不是它的移动路径。你可以使用媒体查询或者javascript来根据不同的标准定义不同的路径，但是通过motion属性设置又要有灵活性目前还是不可能的。
我们会看到规范的方向，但目前尝试一下看看它为我们提供了什么（或者没有提供什么），还是非常好玩的。我收集了一组在codepen上找到的css motion path的demo，以及eric willigers（chrome开发团队中实现这块内容的负责人）也有一个放了一些示例的google文档。
我们将在下一篇中结束这个系列，然后重新过一遍我们之前讨论的内容，并看看一些目前规范中的专题。
本文根据@dancwilson的《web animations api tutorial part 5: the loveable motion path》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://danielcwilson.com/blog/2015/09/animations-part-5/。
在校学生，本科计算机专业。逗比一枚，热爱前端热爱生活，喜欢css喜欢javascript喜欢svg，爱玩ps玩ai玩啊逗比的软件。努力向上，厚积薄发。
如需转载，烦请注明出处：http://www.w3cplus.com/css3/web-animations-api-tutorial-part-5-the-loveable-motion-path.html