我們經常可以在一些頁面看到看起來很酷的線條動畫，有些可以用css實現，有些css就無能為力了，今天來研究另一種實現方式，svg
如果對svg是什麼還不了解的話，可以先去看看svg的基礎教程；
一般對於複雜的線條，不提倡自己去手動畫，而應該借助illustrator之類的繪圖軟體生成後儲存位svg檔案
svg做線條動畫的主要方式使用stroke-dasharray,stroke-dashoffset來實現；
stroke-dasharray：它是乙個和數列，數與數之間用逗號或者空白隔開，指定短劃線和缺口的長度。如果提供了奇數個值，則這個值的數列重複一次，從而變成偶數個值。因此，5,3,2等同於5,3,2,5,3,2；
stroke-dashoffset：標識的是整個路徑的偏移值；
具體大家可以拖動下面input感受下，動畫效果我們可以通過js，css3 animation 及svg本身來實現，自己大膽摸索吧；
虛線長度
虛線間隔
整體偏移
自己新開發了乙個小程式，求關注，求分享
Web動畫 SVG 線條動畫入門
通常我們說的 web 動畫，包含了三大類。個人認為 3 種動畫各有優劣，實際應用中根據掌握情況作出取捨，本文討論的是我認為 svg 中在實際專案中非常有應用價值 svg 線條動畫。svg 線條動畫，在一些特定的場合下可以解決使用 css 無法完成的動畫。尤其是在進度條方面，看看最近專案裡的乙個小需求...
轉場動畫中的私有type，非常炫酷
animation.type cube 翻轉，立方體的翻轉效果 animation.type suckeffect 額這個效果就是右下角變小然後整張圖移到左上角消失 animation.type oglflip 繞中心翻轉 animation.type rippleeffect 文字抖動了一下 an...
android 利用屬性動畫實現酷炫的圓形選單
廢話不哆嗦,直接上 反正也差不多沒人看,就自己記錄下咯 package com.example.testroundmenu import android.animation.objectanimator import android.os.bundle import android.view.vie...