Web Animations API 入门教程第5部分: 可爱的运动路径

发表于 | 更新于: | 分类于 |
字数统计: 1,492 | 阅读时长 ≈ 6

Web Animations API 入门教程第5部分: 可爱的运动路径

这是 Web Animations API 入门教程系列的第5部分。

重要信息：自撰写本文以来，运动路径的规范（和Chromium实现）已经发生了重大变化。以下在概念上仍然有效，但是属性名称和更多内容已经改变。截至2016年10月，请查看CSS运动路径。

最后，沿着路径动画…不再仅仅是SVG的领域。

运动路径：当前方向（Spec）

随着API规范的运用，运动路径出现了不同的形式。最初有可能的一个方向是一个形式的特效（如前面所讨论的GroupEffect），但随后借助CSS模块的运动路径的气势一点点上升（拥有它自己的规范）。

因此，沿着路径动画将只是另一组CSS属性，可以动画化，正如opacity和tranform也可以。这样，CSS过渡和关键帧可以使用它,Web Animations API也是…这是伟大的，因为我们想要尽可能多的这些方法之间共享给我们更多的灵活性。Chrome和Opera已经发布了一个初步的实现，所以我们可以在今天开始玩它，尽管还没有在polyfill找到它的任何使用方式。

让我们分解这些属性，我们如何使用它们，现在还有什么事情可以阻碍我们。

运动路径属性

我们将讨论motion的三个属性。现在，要查看示例，您将需要运行Chrome 46或Opera 33。

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 Animations 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演示显示了从外部到内部沿着螺旋路径移动的几个点。随着每个点接近中心，它变得越来越快，变得越来越透明。 .animate()在每个点被称为两次无限迭代和一个延迟，其中一个调用集中在运动偏移，另一个焦点在缩放和不透明度上。我分解了他们，指出了不同的解决方案，当然，他们也可以结合在一起。

这种方法还使用功能检测，您将会注意到，如果您在Safari，Firefox，Edge或旧版Chrome / Opera中查看，因为您将看到一条消息而不是动画。有几种方法可以做到这一点，比如

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

当然，我们不想在真正的网页中完全阻止用户，所以如果支持，我们可以有另一个动画（或者没有动画）切换到Motion Path动画。像往常一样，渐进增强(Progressive Enhancement)是我们的朋友。

motion-rotation

最后的属性是motion-rotation，它处理元素沿着路径移动时面向哪个方向。有四种主要方法可以指定这一点。

  • auto 表示元素将随路径旋转。
  • reverse 元素也将随着路径旋转，但会增加180度，因此将向后。
  • auto Xdeg / reverse Xdeg 除了添加X度也会一样
  • Xdeg 将不再与路径一起旋转，元素将保持固定朝向相同的方向。

少了点什么东西？

这是第一个版本，当然，浏览器制造商和规范作者仍在讨论这一切。在尝试这一过程中，我注意到的最大的一件事就是缺少适应不同屏幕/容器尺寸的路径。

路径只是按照它们的定义出现。当使用SVG时，我们获得灵活性，因为我们在容器上具有不同的坐标系和属性，如 viewBox。使用CSS中定义的运动路径，路径的大小不能被其他属性另外修改或约束。元素上定义的宽度和高度仅适用于元素，而不是其运动路径。您可以使用媒体查询或JavaScript来定义不同条件的不同路径，但是想通过motion属性灵活地设置它们是不可能的事。

回顾和下一节

我们将看到规范的方向，但现在尝试这样做是很有趣的，看看它可能提供什么（和不提供什么）。我正在收集我在CodePen上找到的CSS Motion Path演示文稿，而Eric Willigers（Chrome开发团队的相关实现任务的所有者）拥有一个Google Doc的例子。

我们将在下次再次介绍我们所讨论的内容，并且再看几个目前唯一的规范主题。

查看本系列的其余部分：

【翻译原文】： http://danielcwilson.com/blog/2015/09/animations-part-5/

0%