SVG互動動畫製作

前面我們已經說過了要怎樣製作css3動畫，但是svg動畫一直都沒有時間研究過，正好趁現在有一點時間靜下心來研究一下。

一般來說，常見前端動畫實現方案分為三種，css3動畫，html動畫（svg動畫），js動畫或者我們可以稱之為canvas動畫

這裡主要我們是要講解的是svg動畫的實現方法。

svg動畫的型別

常見的svg動畫有三種實現方式

第一種，通過原生的svg來實現，但是這種方法的實現效率較低，而且很多較為精確的動作比較難實現

第二種，通過常見的svg動畫庫來實現，比如svg.js，snap.js之類的來實現，可以實現比較靈活的互動，複雜的線性動畫也是很難實現的

第三種，是結合ps,ai,css3來實現有，這種方法互動需要自己實現，相對會比較繁瑣，但是優勢就是可以實現一些複雜的線性動畫,而且也要求你的知識面要廣闊一些

最佳的svg動畫方案製作

這個動畫方案的實施，需要我們準備好，這些東西，

ps,ai，基礎的svg基礎

我們要達到的效果是：

阿里巴巴的logo svg會執行線性的運動。

這個時候我們發現阿里巴巴的圖示背景不是透明的，所以我們需要這樣操作來講這個圖示變成透明。

1、新建乙個空白的塗層

2、使用快速選擇工具將要保留的內容選擇出來，記得要，調整邊緣。

3、copy選中的區域，將內容貼上到空白的塗層上面

如下：

4、這個是否我們按住ctrl+圖層，接著右擊選中區域，選擇新建空座路徑

容差值，這個可以根據我們的要求自我調節

5、匯出到ai，選擇檔案--匯出--路徑到illustrator

緊接著，我們開啟ai檔案，如下：

這裡我們可以看到，內容是空白的，這個時候別急，我們需要做的是選擇扣選工具，我們就可以看到路徑了

在是在這一步的時候才可以進行影象的大小

6、調節之後確認無誤，匯出為svg,選擇儲存為svg格式

這樣svg製作完成了

最佳的svg動畫方案**編寫與動畫實現

好了，這個時候的svg**已經製作好了，這個時候我們就要新建乙個html**，將svg**拷貝到html**裡面，**如下：

div

class

="container"

svg

version

="1.1"

id="圖層_1"

xmlns

=""x="0px"

y="0px"

width

="284.929px"

height

="143.542px"

viewbox

="0 0 284.929 143.542"

enable-background

="new 0 0 284.929 143.542"

xml:space

="preserve"

path

fill-rule

="evenodd"

clip-rule

="evenodd"

fill

="none"

d="m130.224,71.699c-1.119,0-2.238,0-3.357,0

c-0.224-1.567-0.448-3.134-0.672-4.701c-4.7,2.462-9.402,4.925-14.102,7.387c-12.896,5.328-29.525,3.09-43.65,1.343

c0,5.148,0,10.297,0,15.445c-10.34,2.544-23.941,10.769-24.175,23.504c10.591,20.382,60.005,4.57,77.899,2.015

c0,0.224,0,0.448,0,0.672c-0.448,0-0.896,0-1.343,0c-18.776,14.243-93.198,33.523-100.731-3.358

c15.876,93.371,33.556,77.8,41.58,67.669c20.558-25.953,93.976-74.961,147.068-57.082c49.84,16.786,7.64,61.106-8.058,81.257

c-4.61,5.917-16.906,14.347-12.76,24.176c41.213,4.064,75.658-17.662,106.775-27.533c-0.224,0.448-0.448,0.896-0.672,1.343

c-29.935,11.595-56.382,29.979-90.658,39.621c-11.694,3.29-34.207,6.583-38.278-5.372c-8.923-26.204,62.138-65.446,52.38-88.644

c-4.779-11.076-21.725-12.767-33.577-16.788c-1.12,0.895-2.239,1.791-3.358,2.686c0,0.224,0,0.448,0,0.671

c2.238,1.791,4.477,3.582,6.715,5.372c0,0.224,0,0.448,0,0.672c-30.254,1.578-56.749,14.34-82.6,21.489

c1.381,4.517,3.486,7.65,2.015,11.417c-3.581,3.357-7.164,6.716-10.745,10.073c13.009,10.827,40.156-3.109,47.679-8.059

c-1.343-1.343-2.686-2.686-4.029-4.029c0.896,0,1.791,0,2.687,0c3.186,1.525,5.217,2.786,6.715,6.044

c129.329,67.221,129.776,69.46,130.224,71.699z"

svg>

div>

這個時候我們還需要獲取整個路徑的直線長度，方便css對路徑的計算。

js**如下：

給新增css3樣式，並且給svg中的path新增alibaba class

.container .alibaba @keyframes linemove 50% 100% }

執行的效果如下：

好了，大功告成了，是不是很神奇

SVG互動動畫製作

VR互動動畫短片《拾夢老人》的開發經歷

超實用！7 個優秀的 UI 互動動畫技巧

svg波浪動畫

SVG互動動畫製作

VR互動動畫短片《拾夢老人》的開發經歷

超實用！7 個優秀的 UI 互動動畫技巧

svg波浪動畫

相關推薦