内容简介：在 CSS 动画中，我们平常都会通过 CSS Animation 和 CSS Transform 等实现一些简单的 CSS 动画。然而，要想让动画对象沿着一条路径进行移动，还是有一些难点的。CSS Motion Path 标准的出现，让开发者能够给动画对象定义一条动画路径，配合 keyframe 等操作，轻松实现让一个物体沿着一条路径进行动画。Motion Path Level 1 从 2015 年 4 月 9 日发表第一个工作草案以来，经过3年多的时间，发展得已经比较成熟了，同时 Google Chrom
在 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 接受三个参数，分别是角度，大小以及设置是否让对象完全包含在路径内。
用下面的例子进行一一解释
<style>
body {
transform-style: preserve-3d;
width: 200px;
height: 200px;
}
.box {
width: 50px;
height: 50px;
offset-position: 50% 50%;
offset-distance: 100%;
offset-rotate: 0deg;
}
#redBox {
background-color: red;
offset-path: ray(45deg closest-side);
}
#blueBox {
background-color: blue;
offset-path: ray(180deg closest-side);
}
</style>
<body>
<div class="box" id="redBox"></div>
<div class="box" id="blueBox"></div>
</body>
复制代码
角度
即 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 的边作为动作路径：
<style>
body {
width: 500px;
height: 300px;
border-radius: 80px;
border: dashed aqua;
margin: 0;
}
#blueBox {
width: 40px;
height: 20px;
background-color: blue;
offset-path: margin-box;
}
</style>
<body>
<div id="blueBox"></div>
</body>
复制代码
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 用于设定对象在路径上的位置。
<style>
body {
transform-style: preserve-3d;
width: 300px;
height: 300px;
border: dashed gray;
border-radius: 50%;
}
.circleBox {
position: absolute;
left: 50%;
top: 50%;
width: 40px;
height: 40px;
background-color: red;
border-radius: 50%;
}
#circle1 {
offset-path: ray(0deg farthest-side);
offset-distance: 50%;
}
#circle2 {
offset-path: ray(90deg farthest-side);
offset-distance: 20%;
}
#circle3 {
offset-path: ray(225deg farthest-side);
offset-distance: 100%;
}
</style>
<body>
<div class="circleBox" id="circle1"></div>
<div class="circleBox" id="circle2"></div>
<div class="circleBox" id="circle3"></div>
</body>
复制代码
上面例子中，通过设定三个不同的 offset-distance 设定对应对象在路径上的位置分别为 50%, 20%, 100%。
那么对于 SVG 的几何图形，我们所设定的一些路径可能没有闭合，那么 offset-distance 设定超过 100% 会怎么样呢？
<style>
.item {
width: 100px;
height: 40px;
offset-position: 0% 0%;
offset-path: path('m 0 0 h 200 v 150');
}
#box1 {
background-color: red;
offset-distance: -280%;
}
#box2 {
background-color: green;
offset-distance: 190%;
}
</style>
<body>
<div class="item" id="box1"></div>
<div class="item" id="box2"></div>
</body>
复制代码
可以看到，两个分别设置在 -280% 和 +190% 的位置，最终由于路径没有形成闭合，两个对象停留在最小和最大的可达位置。
<style>
.item {
width: 100px;
height: 40px;
offset-position: 0% 0%;
offset-path: path('m 0 0 h 200 v 150 z');
}
#box1 {
background-color: red;
offset-distance: -280%;
}
#box2 {
background-color: green;
offset-distance: 190%;
}
</style>
<body>
<div class="item" id="box1"></div>
<div class="item" id="box2"></div>
</body>
复制代码
上面的例子则演示了闭合路径的状态，两个对象均可在路径上“循环”移动。
offset-position
offset-position 指定了路径本身的初始位置在哪里，可以提供属性值 auto 或者指定的位置。如果 offset-position 为 auto 并且 position 不为 static ，那么默认的 offset-position 则为 position 的位置。
<style>
#wrap {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
}
#box {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 100px;
left: 80px;
offset-position: auto;
offset-anchor: center;
offset-path: ray(45deg);
}
</style>
<body>
<div id="wrap">
<div id="box"></div>
</div>
</body>
复制代码
offset-anchor
需要移动的对象可能不一定得是对象的正中心，我们想要自定义对象的锚点，则可以通过 offset-anchor 来实现。
#plane {
offset-anchor: center;
}
复制代码
上面例子指定了对象的锚点在中心位置。
<style>
body {
transform-style: preserve-3d;
width: 300px;
height: 300px;
border: 2px solid gray;
border-radius: 50%;
}
.box {
width: 50px;
height: 50px;
background-color: orange;
offset-position: 50% 50%;
offset-distance: 100%;
offset-rotate: 0deg;
}
#item1 {
offset-path: ray(45deg closest-side);
offset-anchor: right top;
}
#item2 {
offset-path: ray(135deg closest-side);
offset-anchor: right bottom;
}
#item3 {
offset-path: ray(225deg closest-side);
offset-anchor: left bottom;
}
#item4 {
offset-path: ray(315deg closest-side);
offset-anchor: left top;
}
</style>
<body>
<div class="box" id="item1"></div>
<div class="box" id="item2"></div>
<div class="box" id="item3"></div>
<div class="box" id="item4"></div>
</body>
复制代码
上面例子中指定了四个矩形的四个不同的锚点位置。
如果 offset-anchor 的属性值为 auto ，有如下规则进行计算：
| 条件 | 结果 |
|---|---|
| offset-path: none; offset-position: 非 auto; |
取 offset-position 的值 |
| offset-anchor: auto; offset-path: none; |
与 background-position 行为相同 |
| 如果上述都不符合 | 取 transform-origin 的值 |
<style>
body {
width: 500px;
height: 500px;
}
.box {
background-color: mediumpurple;
offset-path: none;
offset-anchor: auto;
}
#item1 {
offset-position: 90% 20%;
width: 60%;
height: 20%;
}
#item2 {
offset-position: 100% 100%;
width: 30%;
height: 10%;
}
#item3 {
offset-position: 50% 100%;
width: 20%;
height: 60%;
}
#item4 {
offset-position: 0% 100%;
width: 30%;
height: 90%;
}
</style>
<body>
<div class="box" id="item1"></div>
<div class="box" id="item2"></div>
<div class="box" id="item3"></div>
<div class="box" id="item4"></div>
</body>
复制代码
上面例子展示了， offset-anchor 为 auto 时，锚点的位置计算结果。
offset-rotate
offset-rotate 指定了对象的旋转角度或是如何自动旋转。
| 属性值 | 效果 |
|---|---|
| auto | 对象根据当前路径的朝向进行旋转 如果对 offset-distance 进行动画，对象也会随着当前点的朝向进行旋转 |
| reverse | 与 auto 效果相同，但与朝向相反 |
| 自定义角度 | 对象始终朝着一个方向旋转 |
当属性值为 auto 时，随着 offset-distance 的改变，角度也会自动改变
当属性值为 reverse 时，角度与朝向相反
当属性值为 -45deg 时，角度始终不变
在线演示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- CVPR 2020 论文大盘点：动作检测与动作分割篇
- CVPR 2020 论文大盘点：动作检测与动作分割篇
- Android列表,刷卡动作
- 如何从静态图像中识别“比心”动作
- 58 部落帖子推荐系统的抬手动作
- include指令和include动作的区别
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Beginning PHP and MySQL 5
W. Jason Gilmore / Apress / 2006-01-23 / USD 44.99
Beginning PHP and MySQL 5: From Novice to Professional, Second Edition offers comprehensive information about two of the most prominent open source technologies on the planet: the PHP scripting langua......一起来看看 《Beginning PHP and MySQL 5》 这本书的介绍吧!
