之前遇見動畫就很想用css實現，顯然有些效果是我們力所不能及，實現起來麻煩，效果不好，讓人捉急。其實歸結起來，不同的動畫有自己的優勢，根據實際情況進行取捨。本文就告訴大家如何用SVG寫出個簡單動畫。就讓我們以路徑動畫為例來說明吧。

類似於下面動畫，這種之前就覺得好炫酷

好吧，就算不說這個，沒學習之前，svg實現的loading我也不知道怎麼搞得。

當然SVG肯定不是隻是來做這個的啦，這只是人家神奇的一部分。SVG的優勢是 跨裝置能力強、體積小、影象可透明，可以與js互動等等等等，在這裡不一一介紹啦。我們直接從小例子開始,動手實現個按路徑運動的動畫。

首先讓我們來實現一個描繪圖形邊框的小例子，如下圖：

要描繪如上圖的五角星圖形，我們首先應該確定各個角的座標，然後將它們連線起來就好了。說起來簡單，做起來其實更簡單，簡單程式碼實現如下：

1. <svgversion="1.1"

2. xmlns="http://www.w3.org/2000/svg"width="500"height="500"viewbox="-500 -500 2500 2500">

3. <polygonpoints="-12 -69,-58 85,64 -14,-81 -14,41 85"class="star-path"></polygon>

4. <polygonpoints="-12 -69,-58 85,64 -14,-81 -14,41 85"class="star-fill"></polygon>

5. </svg>

在以上的程式碼中，polygon 標籤是svg多邊形標籤，points 屬性定義多邊形每個角的 x 和 y 座標。通過class為star-path的標籤來實現我們圖中的灰色軌跡，通過class為star-fill的標籤來實現描繪的動畫。

上邊我們實現了五角星的圖形，下面我們就結合css，來完成這個完整的描繪動畫：

1. .star-path{

2.    fill: none;

3.    stroke-width:10;

4.    stroke:#d3dce6;

5.    stroke-linejoin:round;

6.    stroke-linecap:round;

7. }

8. .star-fill{

9.    fill: none;

10.    stroke-width:10;

11.    stroke:#ff7700;

12.    stroke-linejoin:round;

13.    stroke-linecap:round;

14.    stroke-dasharray:782;

15.    stroke

    -dashoffset:0;

16.    animation: starFill 2s ease-out infinite;

17. }

18. @keyframes starFill {

19. 0%{

20.        stroke-dashoffset:782;

21. }

22. 100%{

23.        stroke-dashoffset:0;

24. }

25. }

在上面的程式碼中，最核心的屬性就是 stroke-dasharray和stroke-dashoffset 。 stroke-dasharray：定義描邊的虛線長度，如果提供奇數個，則會自動複製該值成偶數。 stroke-dashoffset：定義虛線描邊的偏移量。 在上面程式碼中，stroke-dasharray代表虛線之間的間距大小。當我們設定了間距足夠長的時候，以至於大於我們圖形的總邊長，就會達到我們想要的效果。一開始我們的短劃線是0，缺口是全部長度，隨動畫的進行，短劃線的長度慢慢增長為圖形總邊長的全部長度，達到了慢慢充滿全部的效果。另外，我們要知道路徑長度也可以藉助 如下程式碼path.getTotalLength() 函式獲取路徑的長度。

1. document.querySelector('.star-path').getTotalLength();

除此之外，我們還可以改變偏移 stroke-dashoffset 來達到效果，將虛線的偏移量設定為 0，此時我們看到的路徑描邊就是沒有間斷的連續曲線，通過設定虛線偏移量等於曲線的長度，那該曲線恰好“消失”，程式碼如下：

1. .star-path{

2.    fill: none;

3.    stroke-width:10;

4.    stroke:#d3dce6;

5.    stroke-linejoin:round;

6.    stroke-linecap:round;

7. }

8. .star-fill{

9.    fill: none;

10.    stroke-width:10;

11.    stroke:#ff7700;

12.    stroke-linejoin:round;

13.    stroke-linecap:round;

14.    stroke-dasharray:1340;

15.    stroke-dashoffset:0;

16.    animation: starFill 2s ease-out infinite;

17. }

18. @keyframes starFill {

19. 0%{

20.        stroke-dashoffset:1340;

21. }

22. 100%{

23.        stroke-dashoffset:0;

24. }

25. }

很多時候我們可以運用這種方法到我們運營活動專案中，stroke-dasharray 和 stroke-dashoffset 是創造大量 SVG 路徑動畫所要用到的兩個重要屬性，掌握原理就可以給各種圖形描邊

另外我們再實現個根據運動路徑運動的小例子，這裡要涉及到svg的 path屬性實現，如下圖：

1. <svgwidth="500"height="500">

2. <pathd="M100 150 L200 50 L300 150 L400 50 Z"

3. stroke="#ccc"stroke-width="2"

4. fill="none"

5. />

6. <circler="20"x="150"y="0"style="fill:#336622;">

7. <animateMotion

8. dur="3s"

9. repeatCount="indefinite"

10. rotate="auto"

11. path="M100 150 L200 50 L300 150 L400 50 Z"/>

12. </circle>

13. </svg>

path標籤用於指定一條運動路徑，從點(100,150)到(200,50)再到(300,150)再到(400,50)最後再連結起點。 我們用了svg的animateMotion動畫標籤。repeatCount屬性描述動畫的重複次數，indefinite是無限迴圈，dur屬性描述動畫的持續時間，我們這裡讓整個動畫持續3秒。 我們用start和end可以控制整個動畫的開始結束時間，而且如果我們想點選控制運動的開始可以加入begin="click"。

當然我們實現的很簡單的效果，如果涉及到想元素自動根據運動路徑的角度來改變它的運動方向，我們可以使用rotate設定為auto，想讓元素在外圍運動，可以設定rotate="auto-reverse"。

另外，當路徑複雜的時候再用path屬性來描述就顯得很多餘和麻煩，這時候我們可以使用標籤來指定運動路徑：

1. <svgwidth="500"height="500">

2. <pathd="M100 150 L200 50 L300 150 L400 50 Z"

3. stroke="#ccc"stroke-width="2"

4. fill="none"

5. id="myPath"

6. />

7. <circler="20"x="150"y="0"style="fill:#336622;">

8. <animateMotion

9. dur="6s"

10. begin="click"

11. repeatCount="indefinite"

12. rotate="auto">

13. 相關推薦

    簡單聊一聊那些svg的沿路徑運動

    之前遇見動畫就很想用css實現，顯然有些效果是我們力所不能及，實現起來麻煩，效果不好，讓人捉急。

    [聊一聊系列]聊一聊前端存儲那些事兒

    我們 老朋友 必須 獲取 sql 壓力 做了 lan read https://segmentfault.com/a/1190000005927232 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://seg

    聊一聊整車廠的那些事——售後配件業務

    大於 狀況 mil 協作 正文 現狀 ESS 大數 沒有 此文已由作者王文開授權網易雲社區發布。歡迎訪問網易雲社區，了解更多網易技術產品運營經驗。前言：本文主要介紹了整車廠售後配件業務的整體狀況和痛點，並且展示了網易有數是如何助力整車廠的售後部門，發現其業務問題、定位問題、

    簡單聊一聊直播開發需要掌握的一些基本知識

    現如今的直播行業如日中天，火爆程度以往如前，從2016年至今。其火爆程度依舊未減，原因就在於直播行業的多變化。在人們厭倦了一對多直播的枯燥無聊後，開發程式設計師們立刻根據一對多行業衍生出一對一的私密直播系統，它結合了一對多的優缺點，完美的把缺點化為優點，這也是它能夠受到廣大使用者喜愛的重要原因。那麼小編今天就

    聊一聊WEB前端安全那些事兒

    歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們瞭解前端的方方面面（不僅僅是程式碼）：https://segmentfault.com/blog... 隨著網際網路的發達，各種WEB應用也變得越來越複雜，滿足了使用者的各種需求，但是隨之而來的就是各種網路安

    聊一聊積分墻的那些事兒

    制造 指數 app下載 google 也有 收入 獲得 容易 什麽是 德普優化，專業的APP推廣積分墻平臺 什麽是積分墻？ “積分墻”目前已經發展為在一個應用內展示各種不定額任務（下載安裝試玩的相關應用、好評截圖審核、分享轉發獎勵等等），用戶完成相應任務就可以賺取對應金錢，

    簡單聊一聊JS中的迴圈引用及問題

    本文主要從 JS 中為什麼會出現迴圈引用，垃圾回收策略中引用計數為什麼有很大的問題，以及迴圈引用時的物件在使用 JSON.stringify 時為什麼會報錯，怎樣解決這個問題簡單談談自己的一些理解。 1. 什麼是迴圈引用 當物件 1 中的某個屬性指向物件 2，物件 2 中的某個屬性指向物件 1 就會出現迴圈引

    聊一聊那些線性時間複雜度的排序演算法

    實際上，基於比較和交換的排序演算法，它們的時間複雜度的下限就是O(nlog2n)。氣泡排序，插入排序等自不必多說，時間複雜度是O(n2)，即使強如快速排序，堆排序等也只是達到了O(nlog2n)的複雜度。那麼那些傳說中可以突破O(nlog2n)下限，達到線性時間複雜度O(n)的排序演算法到底是什麼樣的呢，接下

    聊一聊高併發高可用那些事 - Kafka篇

    > **目錄**  > **為什麼需要訊息佇列** 1.非同步 ：一個下單流程，你需要扣積分，扣優惠卷，發簡訊等，有些耗時又不需要

    聊一聊啥都不會的我自學Linux系統的歷程

    計算機專業 linux論壇 服務器 知識點 嵌入式 Linux大家都不陌生，我是在大三的時候開始接觸Linux，上課的時候一位給我們上課的老師閑聊的時候說，你們計算機專業的學生要好好去學Linux，對於你們以後發展或者是就業都很有幫助。 開始的時候是一種從眾心理，慢慢的學習中發現自己越來越

    聊一聊Vue實例與生命周期運行機制

    思維 mod images mic import mvvm 方法 add char Vue的實例是Vue框架的入口，擔任MVVM中的ViewModel角色，所有功能的實現都是圍繞其生命周期進行的，在生命周期的不同階段調用對應的鉤子函數可以實現組件數據管理和DOM渲染兩大重要

    很認真的聊一聊程序員的自我修養

    很大的 溝通 數據庫查詢 職業 xxx 話題 必備 小學 lol 首先要談的是，今天的話題所聊的程序員包含哪些人？ 在中國，寫程序，不僅僅是一種興趣，更多的時候，還是一種普通職業和謀生工具 大公司有厲害的程序員，優秀的架構師，但大量的小公司也有很多普通的程序員。在我這些

    聊一聊共享單車

    高峰 地鐵站 中學生 電商 吐槽 活動 存在 http ... 1.共享單車的模式用戶交押金，然後騎車，按照騎車時間進行計費。其實，嚴格意義上來講，這還並不屬於共享經濟，更像分時租賃。 2、共享單車的用戶人群 & 特征用戶人群：80後、90後的低頻打車人群，

    聊一聊分布式鎖的設計

    src set 可用性 slave 共享資源 get 處理過程 res 指定 起因 前段時間，看到redis作者發布的一篇文章《Is Redlock safe?》，Redlock是redis作者基於redis設計的分布式鎖的算法。文章起因是有一位分布式的專家寫了一篇文章《H

    聊一聊我的阿裏雲ECS雲主機

    工作者 資料 linux系統 tom ecs 進行 http 感覺 com javaweb學習有段時間了,期間也編寫了一些自己的小webapp應用,但是都是發布在我們自己的個人pc上的. 於是我在想：怎麽樣讓自己的項目可以發到公網上面去，讓朋友們能夠來訪問？ 　　我首先想到

    聊一聊 Android 6.0 的運行時權限

    con alert 打電話 target 告訴 分享 ttf alt toast 聊一聊 Android 6.0 的運行時權限 權限一刀切 棉花糖運行時權限 權限的分組 正常權限 正常權限列表 特殊權限 請求SYSTEM_ALERT_WINDOW 請求WRITE

    【轉載】聊一聊C#的Equals()和GetHashCode()方法

    table rule != tle 繼承 操作符 內存 png blog 首先先談一下Equals()這個方法： Equals()方法，來自於Object，是我們經常需要重寫的方法。此方法的默認實現大概是這樣的： public virtual bool Equals(obj

    聊一聊Javasript繼承

    兩個 || this指向 type屬性 中國 什麽 aso ldo markdown ??前前後後已經快寫了2年左右javaScript,剛開始只是簡單用於一些表單驗證和操作dom節點，並沒有深入的使用，隨著漸漸的深入，開始不想去寫重復的代碼（懶的開始），從而寫簡單的繼承，

    （五）聊一聊深Copy與淺Copy

    otto list int print 技術分享 作用 code height 工廠 一、關於淺copy與深copy 首先說明一下： 在python中，賦值其實就是對象的引用，變量就是對象的一個標簽，如果把內存對象比喻成一個個房間，那麽變量就是門牌號。 深copy與淺

    聊一聊2D地圖的迷霧效果

    png char 一段 行數據 編程經驗 lan get 第一個 色值 在經歷了17年諸般變動後，現在到了2018年。懷舊是因為之前幾年發生太多，好與不好都已過去，17年迎來新的開始，所以也就有了後來些許感慨，有機會再說說這些行業感受了。今天先讓我們專註於川最新解決的實際項