Web动画API教程5：可爱的运动路径（Motion Path)

发布于彦子

9 年前

这是介绍浏览器中web动画API的系列教程的第五篇。如果你有什么问题/想法，或者发现我理解错了规范的内容，或是希望我在接下来的文章中对某部分内容进行探讨的话，请在Twitter给我留言吧~@dancwilson。这篇文章的一个比较早期（简单）的版本在我的CodePen Blog上也有，在Chrome声明支持Motion Path之后发表的。

终于。沿路径的动画，不再是SVG的专利！

Motion Path：规范的当前方向

随着API规范已经制定好并且通过，运动路径motion path也先后出现了不同的形式。单方向最初看起来可能是Effect的形式（如上一篇中讨论的GroupEffect），但随后Motion Path作为一个CSS模块慢慢的一点一点地上位（在它的规范中）。

也就是，沿路径的动画将会变得很简单，成为一组可以添加动画的CSS属性，和opacity和transform一样。这样CSS Transitions和Keyframes就可以使用运动路径了，Web动画API也是。这是非常棒的，因为我们都是希望它们能够尽可能的给我们更多的灵活性。Chrome和Opera已经发布了初步的实现，所以我们现在已经可以真正地开始使用它，尽管还没有找到放入polyfill的方法。

我们来分析一下这些属性到底是什么，可以如何使用，以及现在使用起来会有什么阻碍。

Motion Path属性

我们接下来会讨论三个motion属性。就目前而言，要看到这些示例，你需要在启用了Experimental Web Platform Features的Chrome 43+或者Opera 30+中，通过chrome://flags或者opera://flags查看。它们的作用是在Chrome 46和Opera 33中默认启动这项。我通常会同时用两个版本的Chrome——稳定版（Stable）和金丝雀版（Canary），然后只在Canary中启用这项flag。

`motion-path`

motion-path用于定义路径，元素可沿着该路径移动，下面是路径在SVG 1.1中的工作原理：

#motioner {
  motion-path: path("M200 200 S 200.5 200.1 348.7 184.4z");
}

也可以采用一个fill-rule作为调用路径时的第一个参数。我建议阅读Joni Trythall的关于编写SVG的袖珍指南，可以看看需要讨论什么内容。

你还可以使用一些基础图形作为路径，如circle、polygon、ellipse和inset。如果你使用过CSS Shape，对这块内容应该比较熟悉。

在Blink中的初次实现，我发现只有path()方法可以工作，所以不知道是我一直都没有正确地使用图形，还是它还没有实现这一块。

`motion-offset`

我们使用motion-offset来驱动运动，将元素放到路径上的实际位置。它可以接受浮点长度值或百分比。为了从路径的起点到终点添加动画，我们创建了一个从0到100%的动画。使用统一web动画API，我们有

var m = document.getElementById('motioner');
m.animate([
  { motionOffset: 0 },
  { motionOffset: '100%' }
], 1000);

还有CSS

#motioner {
  animation: path-animation 1s;
}
@keyframes path-animation {
  0% { 
    motion-offset: 0;
  }
  100% { 
    motion-offset: '100%';
  }
}

这个CodePen demo展示了几个小点沿着一条螺旋路径从外向内移动。每个小点在接近中心的时候会变得更快、更小，而且会变得透明。.animate()在每个小点上被调用两次，设置了无限迭代iterations: Infinity和延迟delay，第一次调用是设置运动路径，另一次调用是设置缩放和透明度。我将它们分成两块，是为了指定不同的easing函数，不然可能会混在一起。

这种方法也使用了功能检测，就是如果你在Safari、Firefox、Edge或没有flag的Chrome/Opera中查看过，你就会发现，你看到的是一则提示消息，看不到动画。要看到动画的话也有几个方法，例如：

var m = document.getElementById('motioner');
if (m.style.motionOffset !== undefined) { ... }

当然，我们不希望把用户阻挡在一个真正的web thang(注：web thang是一个“涵盖web上的网站和app”的术语)中，所以我们可以有一个备用的动画（或者没有动画也可以），如果支持的话再切换成Motion Path动画。渐进增强总是没错的。

`motion-rotation`

最后一个属性是motion-rotation，它处理的是元素“面向”哪个方向，在沿着路径移动的过程中。有四种主要的方式来指定。

值auto表示元素随着路径一起旋转。
值reverse表示元素不仅会随着路径旋转，它还会加180度，面向后方。
值auto Xdeg（或reverse Xdeg）也是同样，除了增加x的度数。
值Xdeg不会随着路径旋转，元素会保持固定面朝同一个方向。

还漏了什么？

这是第一个版本，当然，浏览器制造商和规范制定者还在讨论中。我在尝试这一点的时候注意到的最重要的事情是，缺乏一个方法来在不同的屏幕/容器尺寸中适应路径。

路径是按照它们被定义的方式简单地显示出来的。当使用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玩啊逗比的软件。努力向上，厚积薄发。

如需转载，烦请注明出处：https://www.fedev.cn/css3/web-animations-api-tutorial-part-5-the-loveable-motion-path.htmlWomen's Clothing, Footwear & Accessories