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

CSS 中有一个很是有意思的模块 -- CSS Motion Path Module Level 1，翻译过来也就是运动路径。本文将对 motion path 一探究竟，经过本文，你能够了解到：前端

什么是 CSS motion path
使用 CSS motion path 制做简单路径动画
使用 CSS motion path 制做复杂路径动画

什么是 CSS Motion Path 运动路径？

什么是 CSS Motion Path 运动路径？利用这个规范规定的属性，咱们能够控制元素按照特定的路径进行位置变换的动画。而且，这个路径能够是很是复杂的一条路径。git

在进一步介绍 CSS Motion Path 以前，咱们先看看使用传统的 CSS 的能力，咱们如何实现路径动画。github

CSS 传统方式实现直线路径动画

在以前，咱们但愿将一个物体从 A 点直线运动到 B 点，一般而言可使用 transform: translate()、top | left | bottom | right 或者是 margin 之类的能够改变物体位置的属性。浏览器

简单的一个 Demo：markdown

<div>
复制代码

div {
    width: 60px;
    height: 60px;
    background: #000;
    animation: move infinite 1s alternate linear;
}
@keyframes move {
    100% {
        transform: translate(100px, 100px);
    }
}
复制代码

对于简单的从 A 点直线运动到 B 点的效果以下：svg

CSS 传统方式实现曲线路径动画

固然，CSS 也能够实现一些简单的曲线路径动画的。若是咱们但愿从 A 点运动到 B 点走的不是一条直线，而是一条曲线，该怎么作呢？oop

对于一些简单的圆弧曲线路径，仍是能够借助一些巧妙的办法实现的，看看下面这个例子。动画

此次，咱们使用了两个元素，子元素是但愿被曲线运动的小球，可是实际上咱们是经过设定了父元素的 transform-origin，让父元素进行了一个 transform: rotate() 的运动带动了子元素的小球：ui

<div class="g-container">
    <div class="g-ball"></div>
</div>
复制代码

.g-container {
    position: relative;
    width: 10vmin;
    height: 70vmin;
    transform-origin: center 0;
    animation: rotate 1.5s infinite alternate;
}
.g-ball {
    position: absolute;
    width: 10vmin;
    height: 10vmin;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, #000);
    bottom: 0;
    left: 0;
}
@keyframes rotate {
    100% {
        transform: rotate(90deg);
    }
}
复制代码

为了方便理解，在运动的过程当中，我让父元素的轮廓显现出来：spa

这样，咱们算是勉强获得了一个非直线路径运动动画，它的实际运动轨迹是一条曲线。

然而，这基本上是以前 CSS 能作到的极限了，使用纯 CSS 的方法，没办法实现更复杂的路径动画，譬以下面这样一条路径动画：

直到如今，咱们有了一种更为强大的专门作这个事情的规范，也就是本文的主角 -- CSS Motion Path。

CSS Motion Path 实现直线路径动画

CSS Motion Path 规范主要包含如下几个属性：

offset-path：接收一个 SVG 路径（与 SVG 的path、CSS 中的 clip-path 相似），指定运动的几何路径
offset-distance：控制当前元素基于 offset-path 运动的距离
offset-position：指定 offset-path 的初始位置
offset-anchor：定义沿 offset-path 定位的元素的锚点。这个也算好理解，运动的元素可能不是一个点，那么就须要指定元素中的哪一个点附着在路径上进行运动
offset-rotate：定义沿 offset-path 定位时元素的方向，说人话就是运动过程当中元素的角度朝向

下面，咱们使用 Motion Path 实现一个简单的直线位移动画。

<div>
复制代码

div {
    width: 60px;
    height: 60px;
    background: linear-gradient(#fc0, #f0c);
    offset-path: path("M 0 0 L 100 100");
    offset-rotate: 0deg;
    animation: move 2000ms infinite alternate ease-in-out;
}
@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}
复制代码

offset-path 接收一个 SVG 的 path 路径，这里咱们的路径内容是一条自定义路径 path("M 0 0 L 100 100")，翻译过来就是从 0 0 点运动到 100px 100px 点。

offset-path 接收一个 SVG 路径，指定运动的几何路径。与 SVG 的path、CSS 中的 clip-path 相似，对于这个 SVG Path 还不太了解的能够戳这里先了解下 SVG 路径内容：SVG 路径

咱们会获得以下结果：

经过控制元素的 offset-distance 从 0% 变化到 100% 进行元素的路径动画。

固然，上述的动画是最基本的，我能够充分利用 path 的特性，增长多个中间关键帧，稍微改造下上述代码：

div {
    // 只改变运动路径，其余保持一致
    offset-path: path("M 0 0 L 100 0 L 200 0 L 300 100 L 400 0 L 500 100 L 600 0 L 700 100 L 800 0");
    animation: move 2000ms infinite alternate linear;
}
@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}
复制代码

这里最主要仍是运用了 path 中的 L 指令，获得了以下图这样一条直线路径：

最终的效果以下，与利用 transform: translate() 添加多个关键帧相似：

完整的 Demo 你能够戳这里：CodePen Demo -- CSS Motion Path Demo

CSS Motion Path 实现曲线路径动画

上面的运动轨迹都是由直线构成，下面咱们看看如何使用 CSS Motion Path 实现曲线路径动画。

其实原理仍是如出一辙，只须要在 offset-path: path() 中添加曲线相关的路径便可。

在 SVG 的 Path 中，咱们取其中一种绘制曲线的方法 -- 贝塞尔曲线，譬以下述这条 path，其中的 path 为 d="M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80"：

<svg width="400" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80" stroke="black" fill="transparent"/>
</svg>
复制代码

对应这样一条连续的贝塞尔曲线：

将对应的路径应用在 offset-path: 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

理解 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

运用 Motion Path 制做动画效果

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

利用 Motion Path 制做按钮效果

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

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

CodePen Demo -- Bubbly button (Design by Gal Shir)

可是小圆点的运动路径基本上都是直线，运用本文的 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;
  }
}
复制代码