css中運動路徑動畫MotionPath的示例分析

這篇文章給大家介紹css中運動路徑動畫Motion Path的示例分析，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

專注于為中小企業(yè)提供成都網(wǎng)站建設、網(wǎng)站設計服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)長泰免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉變。

CSS 中有一個非常有意思的模塊 -- CSS Motion Path Module Level 1[1]，翻譯過來也就是運動路徑。

什么是 CSS Motion Path 運動路徑?

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

在進一步介紹 CSS Motion Path 之前，我們先看看使用傳統(tǒng)的 CSS 的能力，我們?nèi)绾螌崿F(xiàn)路徑動畫。

CSS 傳統(tǒng)方式實現(xiàn)直線路徑動畫

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

簡單的一個 Demo：

<div> 

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

對于簡單的從 A 點直線運動到 B 點的效果如下：

CSS 傳統(tǒng)方式實現(xiàn)曲線路徑動畫

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

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

這次，我們使用了兩個元素，子元素是希望被曲線運動的小球，但是實際上我們是通過設定了父元素的 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);     } }

為了方便理解，在運動的過程中，我讓父元素的輪廓顯現(xiàn)出來：

這樣，我們算是勉強得到了一個非直線路徑運動動畫，它的實際運動軌跡是一條曲線。

然而，這基本上是之前 CSS 能做到的極限了，使用純 CSS 的方法，沒辦法實現(xiàn)更復雜的路徑動畫，譬如下面這樣一條路徑動畫：

直到現(xiàn)在，我們有了一種更為強大的專門做這個事情的規(guī)范，也就是本文的主角 -- CSS Motion Path。

CSS Motion Path 實現(xiàn)直線路徑動畫

CSS Motion Path 規(guī)范主要包含以下幾個屬性：

• 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 實現(xiàn)一個簡單的直線位移動畫。

<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 路徑，這里我們的路徑內(nèi)容是一條自定義路徑 path("M 0 0 L 100  100")，翻譯過來就是從 0 0 點運動到 100px 100px 點。

offset-path 接收一個 SVG 路徑，指定運動的幾何路徑。與 SVG 的path、CSS 中的 clip-path 類似，對于這個 SVG  Path 還不太了解的可以戳這里先了解下 SVG 路徑內(nèi)容：SVG 路徑[2]

我們會得到如下結果：

通過控制元素的 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 指令，得到了如下圖這樣一條直線路徑：

image

最終的效果如下，與利用 transform: translate() 添加多個關鍵幀類似：

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

CSS Motion Path 實現(xiàn)曲線路徑動畫

上面的運動軌跡都是由直線構成，下面我們看看如何使用 CSS Motion Path 實現(xiàn)曲線路徑動畫。

其實原理還是一模一樣，只需要在 offset-path: path() 中添加曲線相關的路徑即可。

在 SVG 的 Path 中，我們?nèi)∑渲幸环N繪制曲線的方法 -- 貝塞爾曲線，譬如下述這條 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>

對應這樣一條連續(xù)的貝塞爾曲線：

將對應的路徑應用在 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，元素的朝向也是跟隨路徑的朝向一直變化的。(可以聯(lián)想成開車的時候，車頭一直跟隨道路會進行變化的，帶動整個車身的角度變化)

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

理解 offset-anchor 運動錨點

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

還是上述的 DEMO，我們把小正方形替換成一個三角形，并且把運動的曲線給畫到頁面上，像是這樣：

其中，三角形是通過 clip-path 實現(xiàn)的：

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

• 經(jīng)過實測，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，我們也可以實現(xiàn)一些類似的效果，核心代碼如下，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;   } }

別看代碼多有一點點復雜，但是不難理解，本質(zhì)就是給每個子元素小點點設置同樣的 offset-path:  path()，給不同分組下的子元素設定不同的旋轉角度，并且利用了動畫延遲 animation-delay 設定了 4 組同時出發(fā)的動畫。

這里我們的軌跡 path 不是直線，效果如下：

完整的代碼你可以戳這里：

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

利用 Motion-Path 繪制地圖路徑尋路動畫

這個也是非常實用的，現(xiàn)在我們可以完全利用 CSS Motion-Path 實現(xiàn)地圖上的尋路動畫：

該 Demo 源自 Ahmad Emran，完整的代碼你可以戳這里：

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

利用 Motion-Path 繪制路徑動畫

又或者，我們利用 Path 能繪制任意路徑的特性，實現(xiàn)各種我們想要的路徑，譬如加入購物車的拋物線，或者各類運動軌跡，都不在話下，這里再提供一個  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 何時能夠兼容了，具體是否使用，還需要根據(jù)目標群體瀏覽器使用情況進行取舍。

關于css中運動路徑動畫Motion Path的示例分析就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當前標題：css中運動路徑動畫MotionPath的示例分析
標題鏈接：http://www.muchs.cn/article10/ippigo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設、App開發(fā)、靜態(tài)網(wǎng)站、網(wǎng)站制作、企業(yè)建站、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)