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會執行線性的運動。

首先咱們先下載一張圖，咱們選擇的是阿里巴巴的logo

 

這個時候咱們發現阿里巴巴的圖標背景不是透明的，因此咱們須要這樣操做來說這個圖標變成透明。

一、新建一個空白的塗層

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

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

以下：

 

四、這個是否咱們按住Ctrl+圖層，接着右擊選中區域，選擇新建空座路徑

容差值，這個能夠根據咱們的要求自我調節

五、導出到AI，選擇 文件--導出--路徑到illustrator

緊接着，咱們打開AI文件，以下：

這裏咱們能夠看到，內容是空白的，這個時候別急，咱們須要作的是選擇扣選工具，咱們就能夠看到路徑了

在是在這一步的時候才能夠進行圖像的大小

六、調節以後確認無誤，導出爲SVG,選擇存儲爲svg格式

 這樣SVG圖片製做完成了

 

最佳的SVG動畫方案代碼編寫與動畫實現

 好了，這個時候圖片的SVG代碼已經制做好了，這個時候咱們就要新建一個HTML代碼，將SVG代碼拷貝到HTML代碼裏面，代碼以下：

<div class="container">
    <svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg"  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代碼以下：

<script type="text/javascript">
    var obj = document.querySelector("path");
    var length = obj.getTotalLength();//1269.3662109375
    console.log(length);//1269.3662109375
</script>

 給圖片添加CSS3樣式，而且給svg中的path添加alibaba class

 .container {
            width: 400px;
            margin: 0 auto;
        }

        .alibaba {
            stroke-width: 1px;
            stroke: #ccc;
            animation: lineMove 3s ease-out infinite;
        }

        @keyframes lineMove {
            0% {
                stroke-dasharray: 0, 1269.3662109375;
            }
            50% {
                stroke-dasharray: 1269.3662109375, 1269.3662109375
                fill: rgba(0, 0, 0, 0);
                opacity: 1;
            }
            100% {
                stroke-dasharray: 1269.3662109375, 1269.3662109375;
                fill: rgba(239, 114, 32, .9);
                opacity: 0;
            }
        }

 運行的效果以下：

 

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