使用CSS offset-path让元素沿着不规则路径运动

   <h2>一、言左右而顾其他</h2>    <p>要让一个元素按照不规则路径进行运动，最好的办法就是使用“ <strong>SVG SMIL animation</strong> ”，并且除了IE浏览器以外，其他浏览器的支持情况都蛮不错的，如下截图所示：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/86b5dfcb476cbf89e33e30717c035ed9.png"></p>    <p>“SVG SMIL animation”虽然强大，但是由于是基于HTML属性生成的各类效果，因为就容易存在复用的问题，例如不同的位置的不同元素的不规则路径动画是一样的，那么我在设置的时候，要么冗余啰嗦，要么交叉不利于维护，有点早些年在HTML标签上写 style 样式的味道。</p>    <p>或许是这个原因，Chrome浏览器开始有了放弃“SVG SMIL animation”的迹象，转而拥抱经过几十年成功验证的CSS来实现， offset-path 几乎可以看成是Chrome浏览器让元素沿着不规则路径运动的新宠儿。</p>    <p>但毕竟是新宠儿，因此，相比较“SVG SMIL animation”，其兼容性还是差了两条街的。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/598763eb0b4a6aa9b921f530a46afc90.png"></p>    <p>但是有一些内部的项目只需要兼容浏览器，因此，实际上 offset-path 也是有用武之地的。</p>    <h3>二、offset-path之前并不叫做offset-path</h3>    <p>offset-path 属性一开始的时候并不叫做 offset-path ，而叫做 motion-path ，这是因为开始有规范对其进行明确定义了，如下截图示意：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/4b3bb97ca509b73194402fe9982b7041.png"></p>    <p>其实不止 motion-path ，还有其他 motion-* 属性也都开始变成 offset-* 开头的了，例如原来的 motion-offset 现在规范用法是 offset-distance 。</p>    <p>根据一些资料的说法，之前语法开始于2015年9月，会在M58版本会移除，大约2017年4月，也就是说，等到下个月 motion-path 这些属性Chrome就会不念旧情，残忍抛弃。为了避免发生如此惨绝人寰的事情，所以从现在开始，我们都开始使用新的规范的属性名称。</p>    <p>不过本文的demo实例还是新老语法一起混用的，因为demo的主要目的是演示，不代表实际的应用，所以大家大可不必在意这个细节。</p>    <h3>三、offset-path让元素沿着不规则路径运动</h3>    <p>使用CSS属性让元素不规则运动要比使用HTML属性控制简单得多，比方说我们只需要下面几行CSS，就可以实现我们想要的效果了，例如：</p>    <pre>  <code class="language-css">.horse-run {     offset-path: path("M10,80 q100,120 120,20 q140,-50 160,0");    animation: move 3s linear infinite;  }  @keyframes move {    100% { offset-distance: 100%;}  }</code></pre>    <p>就可以实现一个马儿沿着不规则路径不停跑的效果。您可以狠狠地点击这里： <a href="/misc/goto?guid=4959740317986341833" rel="nofollow,noindex">CSS offset-path实现的马儿不规则路径不停跑demo</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/fc038bc0ba73360a2b81bb27e609af8d.gif"></p>    <p>其中用到了两个CSS属性，一个是 offset-path ，表示运动的路径，另外一个则是 offset-distance ，我是运动的距离，可以是数值或者百分比单位，如果是 100% 则表示正好把所有的路都跑完了。</p>    <h3>四、其他offset-*运动相关属性值</h3>    <p>除了 offset-path 和 offset-distance 这两个CSS属性，还有其他一些相关的属性，例如 offset-rotation （规范上显示的是 offset-rotate ，浏览器是无效不识别的），表示运动的角度，默认是 auto ，表示自动计算当前路径的切线方向，并朝着这个方向前进，所以，上面的马儿会有会自动爬坡的即视感。</p>    <p>但是如果我们定死了一个角度，例如设置：</p>    <pre>  <code class="language-css">offset-rotation: 30deg</code></pre>    <p>则这个马儿一看就知道昨晚没睡好，得了落枕，头抬不起来只能保持一个姿势：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/764de0f3637a852ed559acad91c72f17.gif"></p>    <p>除了设定固定的角度值，我们还可以使用关键字属性值，例如：</p>    <pre>  <code class="language-css">offset-rotation: reverse;</code></pre>    <p>则马儿立马上下颠倒跑起来，如下截图：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/df15094affff1da53d3bed925efec4fe.png"></p>    <p>我们甚至可以把属性值组合起来，例如：</p>    <pre>  <code class="language-css">offset-rotation: auto 30deg;</code></pre>    <p>表示在原来的切线方向上，再旋转30度，例如，之前值为 auto 的时候，马儿在平地上是朝前看的，现在则是看自己的蹄子美不美：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0f838051d642dac457eb551795357f1f.png"></p>    <p>除了 offset-rotation ，还有其他相关CSS属性，包括 offset-position 和 offset-anchor 。</p>    <p>其中， offset-anchor 表示锚定的中心点，其属性值和 transform-origin 类似，可以是：</p>    <pre>  <code class="language-css">#item1 {      offset-anchor: right top;  }  #item2 {      offset-anchor: right bottom;  }  #item3 {      offset-anchor: left bottom;  }  #item4 {      offset-anchor: left top;  }  #item5 {      offset-anchor: center;  }  ...</code></pre>    <p>等等，元素运动的时候，会让这个点和路径重合进行运动。。</p>    <p>offset-position 指定路径的初始位置，行为类似于属性 background-position 。</p>    <p>根据我的测试，Chrome浏览器虽然认得 offset-position 和 offset-anchor 这两个属性，但是马儿并没有任何的变化，哪怕有一像素的位移或者旋转之类的。可能是我使用的方式不对，所以只能从规范的示例上挖掘这两个属性的表现：</p>    <p>已知四个元素 offset-position 值分别是：</p>    <pre>  <code class="language-css">offset-position: 90% 20%;    offset-position: 100% 100%;    offset-position: 50% 100%;    offset-position: 0% 100%;</code></pre>    <p>当 offset-anchor 值为 center 的时候，表现如下图（SVG图，IE9+）：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ccda27ffbfd27fe75d197384cad21833.jpg"></p>    <p>上图中的加号表示的就是 offset-anchor 确定的锚点位置。</p>    <p>当 offset-anchor 值为 auto 的时候，则表现就跟CSS2.1中 background-position 属性的百分比解析一模一样了：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c6fe364833112c75c0d3dd60de8d5d1e.jpg"></p>    <p>图片示意的很清楚，还是很好理解的。如果按照上面两张规范图所示的表现的话，浏览器是应该有所表现才对，我猜测很有可能，浏览器还没有对其进行完全的解析，毕竟规范也才更新不久。</p>    <h3> </h3>    <p> </p>    <p>来自：http://www.zhangxinxu.com/wordpress/2017/03/offset-path-css-animation/</p>    <p> </p>