CSS 动作路径标准 Motion Path 简介

在 CSS 动画中，我们平常都会通过 CSS Animation 和 CSS Transform 等实现一些简单的 CSS 动画。然而，要想让动画对象沿着一条路径进行移动，还是有一些难点的。CSS Motion Path 标准的出现，让开发者能够给动画对象定义一条动画路径，配合 keyframe 等操作，轻松实现让一个物体沿着一条路径进行动画。

Motion Path Level 1 从 2015 年 4 月 9 日发表第一个工作草案以来，经过3年多的时间，发展得已经比较成熟了，同时 Google Chrome、Opera 浏览器也是第一批能够支持大部分草案标准功能的浏览器。

下面我们就来了解一下吧。

动作路径

既然是要让对象沿着一条路径走，那么本标准中最重要的点就在如何定义路径上了。

offset-path

offset-path 即为定义路径的属性，它能够接受 ray()、CSS Shaps 中的图形 以及能够接受类似 SVG 路径定义的 path()。

在 Chrome 中，目前叫 motion-path

ray()

ray()即为辐射线。它以容器的中心为圆心，在容器中嵌入一个能够嵌入的最大圆形，结合自定义的夹角，将圆心与边上的点相连，形成路径。

ray接受三个参数，分别是角度，大小以及设置是否让对象完全包含在路径内。

用下面的例子进行一一解释

 

 

 

 

 

 

 

角度

即 CSS 中的角度定义，如上图，45deg 和 90deg 分别形成 45 度和 90 度的夹角。

 

大小

第二个大小参数决定了路径的长短，它支持以下的属性

 

属性值	含义
closest-side	初始位置到最近一边的距离
closest-corner	初始位置到最近一角的距离
farthest-side	初始位置到最远一遍的距离
farthest-corner	初始位置到最远一角的距离
sides	初始位置到交线的距离

 

contain

设置对象是否完全包含在路径之中

如果上述例子设置了 conatin，两个 box 将会完全包含在路径之内

offset-path: ray(90deg, closest-side, contain)

CSS 图形

我们还能利用 CSS 中的形状来定义动作路径，CSS 中的形状我们已经不陌生了，例如inset() , circle(), ellipse(), polygon()，甚至还能使用盒模型的数值如 margin-box, border-box, padding-box, content-box。

下面这个例子使用了 margin-box 的边作为动作路径：

 

 

 

 

path()

path() 可以接受 SVG 中的几何描述数据作为动作路径

.path {

 

 offset-path: path('M150 0 L75 200 L225 200 Z');

 

}

如上代码使用 SVG 描述一个三角形，那么这个对象的动作路径即为这个三角形，那么他的初始位置以及初始方向，可以参考 SVG 相关标准进行设定。

url

url 与 上面的 path() 相同，path() 直接将 SVG 几何描述内容写到 CSS 中，url 则可以直接引用 SVG 文件。

offset-distance

offset-distance 用于设定对象在路径上的位置。