探秘神奇的运动路径动画 Motion Path

<div> 

div:nth-child(2) { 
    width: 40px; 
    height: 40px; 
    background: linear-gradient(#fc0, #f0c); 
    offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80'); 
} 
@keyframes move { 
    0% { 
        offset-distance: 0%; 
    } 
    100% { 
        offset-distance: 100%; 
    } 
} 

可以得到如下运动效果：

可以看到，元素是沿着贝塞尔曲线的路径进行运动的，并且，由于这次没有限制死 offset-rotate，元素的朝向也是跟随路径的朝向一直变化的。(可以联想成开车的时候，车头一直跟随道路会进行变化的，带动整个车身的角度变化)

完整的 Demo 你可以戳这里：CodePen Demo -- CSS Motion Path Demo[4]

理解 offset-anchor 运动锚点

OK，那么接下来，我们再看看 offset-anchor 如何理解。

还是上述的 DEMO，我们把小正方形替换成一个三角形，并且把运动的曲线给画到页面上，像是这样：

其中，三角形是通过 clip-path 实现的：

width: 40px; 
 height: 40px; 
 clip-path: polygon(0 0, 100% 50%, 0 100%); 
 background: linear-gradient(#fc0, #f0c); 

通常而言，沿着曲线运动的是物体的中心点(类比 transform-origin)，在这里，我们可以通过 offset-anchor 改变运动的锚点，譬如，我们希望三角形的最下方沿着曲线运动：

.ball { 
    width: 40px; 
    height: 40px; 
    clip-path: polygon(0 0, 100% 50%, 0 100%); 
    offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80'); 
    offset-anchor: 0 100%; 
    background: linear-gradient(#fc0, #f0c); 
    animation: move 3000ms infinite alternate linear; 
} 
@keyframes move { 
    0% { 
        offset-distance: 0%; 
    } 
    100% { 
        offset-distance: 100%; 
    } 
} 

• 经过实测，Can i use 上写着 offset-anchor 属性的兼容性在为 Chrome 79+、Firefox 72+，但是实际只有 Firefox 支持，Chrome 下暂时无法生效~

完整的 Demo 你可以戳这里：CodePen Demo -- CSS Motion Path offset-anthor Demo[5]

运用 Motion Path 制作动画效果

OK，上面我们基本把原理给过了一遍，下面我们就看看，运用 Motion Path，可以在实践中如何运用。

利用 Motion Path 制作按钮效果

利用运动路径，我们可以制作一些简单的按钮点击效果。在之前，我在 CodePen 上见到过这样一种按钮点击效果：

其原理是运用了 background-radial 去生成每一个小圆点，通过控制 background-position控制小圆点的位移，详细的 Demo 代码你可以戳这里：

CodePen Demo -- Bubbly button (Design by Gal Shir)[6]

但是小圆点的运动路径基本上都是直线，运用本文的 Motion Path，我们也可以实现一些类似的效果，核心代码如下，HTML 这里我们使用了 Pug 模板，CSS 使用了 SASS：

.btn 
  -for(var i=0; i<60; i++) 
    span.dot 

.btn { 
  position: relative; 
  padding: 1.5rem 4.5rem; 
} 
.btn .dot { 
  position: absolute; 
  width: 4px; 
  height: 4px; 
   
  @for $i from 1 through $count {  
    &:nth-child(#{$i}) { 
        top: 50%; 
        left: 50%; 
        transform: translate3d(-50%, -50%, 0) rotate(#{360 / $count * $i}deg); 
      } 
  } 
   
  &::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 4px; 
    height: 4px; 
    border-radius: 50%; 
    offset-path: path("M0 1c7.1 0 10.7 2 14.3 4s7.1 4 14.3 4 10.7-2 14.3-4 7.2-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4 10.7-2 14.3-4 7.1-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4 10.7-2 14.3-4 7.1-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4"); 
    offset-distance: 0; 
  } 
} 
 
.btn.is-animating:active .dot:nth-child(4n+1)::before { 
  animation: dot var(--animation-time) var(--animation-timging-function); 
} 
.btn.is-animating:active .dot:nth-child(4n+2)::before { 
  border: 1px solid var(--color-primary); 
  background: transparent; 
  animation: dot var(--animation-time) var(--animation-timging-function) 0.1s; 
} 
.btn.is-animating:active .dot:nth-child(4n+3)::before { 
  animation: dot var(--animation-time) var(--animation-timging-function) 0.2s; 
} 
.btn.is-animating:active .dot:nth-child(4n)::before { 
  border: 1px solid var(--color-primary); 
  background: transparent; 
  animation: dot var(--animation-time) var(--animation-timging-function) 0.3s; 
} 
 
@keyframes dot { 
  0% { 
    offset-distance: 0%; 
    opacity: 1; 
  } 
  90% { 
    offset-distance: 60%; 
    opacity: .5; 
  } 
  100% { 
    offset-distance: 100%; 
    opacity: 0; 
  } 
} 

别看代码多有一点点复杂，但是不难理解，本质就是给每个子元素小点点设置同样的 offset-path: path()，给不同分组下的子元素设定不同的旋转角度，并且利用了动画延迟 animation-delay 设定了 4 组同时出发的动画。

这里我们的轨迹 path 不是直线，效果如下：

完整的代码你可以戳这里：

CodePen Demo -- Button Animation with CSS Offset Paths[7]

利用 Motion-Path 绘制地图路径寻路动画

这个也是非常实用的，现在我们可以完全利用 CSS Motion-Path 实现地图上的寻路动画：

该 Demo 源自 Ahmad Emran，完整的代码你可以戳这里：

CodePen Demo -- CodePen Home Animation with offset-path | Only Using CSS & HTML[8]

利用 Motion-Path 绘制路径动画

又或者，我们利用 Path 能绘制任意路径的特性，实现各种我们想要的路径，譬如加入购物车的抛物线，或者各类运动轨迹，都不在话下，这里再提供一个 Demo：

CodePen Demo -- CSS Motion Path offset-path animation[9]

Can i Use - Motion-Path

来看看 Motion-Path 目前的兼容性如何?截止至 2021-04-27。

Can i Use - Motion-Path[10]：

目前而言，除去 IE 浏览器，就等待 Safari 何时能够兼容了，具体是否使用，还需要根据目标群体浏览器使用情况进行取舍。

最后

好了，本文到此结束，介绍了运动路径动画 Motion Path，并且利用它实现了一些以往无法简单实现的路径动画效果，希望对你有帮助 :

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS[11] 。

参考资料

[1]CSS Motion Path Module Level 1:

https://drafts.fxtf.org/motion-1/

[2]SVG 路径:

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths

[3]CodePen Demo -- CSS Motion Path Demo:

https://codepen.io/Chokcoco/pen/gOgqoem

[4]CodePen Demo -- CSS Motion Path Demo:

https://codepen.io/Chokcoco/pen/gOgqoem

[5]CodePen Demo -- CSS Motion Path offset-anthor Demo:

https://codepen.io/Chokcoco/pen/poRGZeE

[6]CodePen Demo -- Bubbly button (Design by Gal Shir):

https://codepen.io/Chokcoco/pen/bGGMLdd

[7]CodePen Demo -- Button Animation with CSS Offset Paths:

https://codepen.io/Chokcoco/pen/xxgMPzJ

[8]CodePen Demo -- CodePen Home Animation with offset-path | Only Using CSS & HTML:

https://codepen.io/ahmadbassamemran/pen/bXByBv

[9]CodePen Demo -- CSS Motion Path offset-path animation:

https://codepen.io/Chokcoco/pen/dyNaZea

[10]Can i Use - Motion-Path:

https://caniuse.com/?search=motion%20path

[11]Github -- iCSS:

https://github.com/chokcoco/iCSS