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

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

终于。沿路径的动画,不再是SVG的专利!

Motion Path:规范的当前方向

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

也就是,沿路径的动画将会变得很简单,成为一组可以添加动画的CSS属性,和opacitytransform一样。这样CSS TransitionsKeyframes就可以使用运动路径了,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的袖珍指南,可以看看需要讨论什么内容。

你还可以使用一些基础图形作为路径,如circlepolygonellipseinset。如果你使用过CSS Shape,对这块内容应该比较熟悉。

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

motion-offset

我们使用motion-offset来驱动运动,将元素放到路径上的实际位置。它可以接受浮点长度值或百分比。为了从路径的起点到终点添加动画,我们创建了一个从0100%的动画。使用统一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玩啊逗比的软件。努力向上,厚积薄发。

如需转载,烦请注明出处:http://www.w3cplus.com/css3/web-animations-api-tutorial-part-5-the-loveable-motion-path.html

返回顶部