CSS中的motion path模塊如何使用

這篇文章主要講解了“CSS中的motion path模塊如何使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS中的motion path模塊如何使用”吧！

什么是 CSS Motion Path 運動路徑？

什么是 CSS Motion Path 運動路徑？利用這個規范規定的屬性，我們可以控制元素按照特定的路徑進行位置變換的動畫。并且，這個路徑可以是非常復雜的一條路徑。

在進一步介紹 CSS Motion Path 之前，我們先看看使用傳統的 CSS 的能力，我們如何實現路徑動畫。

CSS 傳統方式實現直線路徑動畫

在之前，我們希望將一個物體從 A 點直線運動到 B 點，通常而言可以使用 transform: translate()、top | left | bottom | right 或者 是 margin 之類的可以改變物體位置的屬性。

簡單的一個 Demo：

<div></div>

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

CSS 傳統方式實現曲線路徑動畫

當然，CSS 也可以實現一些簡單的曲線路徑動畫的。如果我們希望從 A 點運動到 B 點走的不是一條直線，而是一條曲線，該怎么做呢？

對于一些簡單的圓弧曲線路徑，還是可以借助一些巧妙的辦法實現的，看看下面這個例子。

這次，我們使用了兩個元素，子元素是希望被曲線運動的小球，但是實際上我們是通過設定了父元素的 transform-origin，讓父元素進行了一個 transform: rotate() 的運動帶動了子元素的小球：

<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);
    }
}

使用純 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>

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%;
    }
}

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>

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，元素的朝向也是跟隨路徑的朝向一直變化的。（可以聯想成開車的時候，車頭一直跟隨道路會進行變化的，帶動整個車身的角度變化）

理解 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 下暫時無法生效~

運用 Motion Path 制作動畫效果

OK，上面我們基本把原理給過了一遍，下面我們就看看，運用 Motion Path，可以在實踐中如何運用。

利用 Motion Path 制作按鈕效果

利用運動路徑，我們可以制作一些簡單的按鈕點擊效果。其原理是運用了 background-radial 去生成每一個小圓點，通過控制 background-position 控制小圓點的位移

但是小圓點的運動路徑基本上都是直線，運用本文的 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 組同時出發的動畫。

感謝各位的閱讀，以上就是“CSS中的motion path模塊如何使用”的內容了，經過本文的學習后，相信大家對CSS中的motion path模塊如何使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！