SVG動畫

時間 2019-11-22

標籤 svg 動畫简体版

原文原文鏈接

提及動畫我是十分感興趣的，大家呢？哈
下面說說SVG動畫是如何實現的。css

svg路徑描邊動畫

實現原理：
該動畫的實現原理是根據stroke-dasharray和stroke-dashoffset來實現的，那這兩個屬性是幹什麼的呢？再次簡單的說一下，想具體瞭解的自行百度0.0
stroke-dasharray屬性是用來設置虛線的，有兩個值，分別是每段虛線的長度和虛線點的間隔長度。
stroke-dashoffset設置的是虛線的起始位置偏移。html

將stroke-dasharray和stroke-dashoffset都設置爲線條的總長度，目的是將該虛線各線段間的空白間隔放到可視區域，而將線條放到可視區域以外。
而後咱們經過動畫一點點減少stroke-dashoffset來使線條平移顯現出來，最終呈現出路徑描邊的效果。web

實現方法：
通常咱們是將stroke-dasharray設置爲線條的總長度，而後將stroke-daashoffset也設置爲線條的總長度。
而後利用animation和@keyframes添加動畫，動畫中將stroke-dashoffset其值最終變爲0便可。dom

其餘：
通常咱們將stroke-dashoarray和stroke-dashoffset設置爲線條總長度，有時咱們不能精準知道線條總長度，因此該值設置稍大一些也沒問題，僅僅是動畫時間變短一些便可。
若是咱們非要獲取線條的精準總長度，咱們經過path.getTotalLength()獲取便可，其中path是繪製該線條path的dom。svg

小demo:wordpress

html代碼：動畫

<svg width="500" height="500">
        <path d="M 50 200 Q 100 100 200 200 T 400 200" class="ani"></path>
    </svg>

css代碼：spa

svg {
        border: 1px solid #ddd;
    }
    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }
    .ani {
        stroke: red;
        fill: transparent;
        stroke-width: 2px;
        stroke-dasharray: 500;
        stroke-dashoffset: 500;
        animation: dash 3s linear forwards;
        -webkit-animation: dash 3s linear  forwards;  
    }

SVG SMIL animation動畫

SMIL是什麼？
SMIL是Synchronized Multimedia Integration Language（同步多媒體集成語言）的縮寫，而SVG能夠基於這種語言實現動畫。code

SVG使用SMIL能夠作什麼？
主要是如下兩點：orm

實現平移旋轉等
沿着運動路徑運動

如何使用？
SMIL上有不少標籤，咱們選擇合適的標籤，在其上添加須要的屬性，便可實現svg動畫效果，而不須要css和js代碼，因而可知此方法的簡單。如下介紹一些SMIL動畫標籤（那些屬性經過看demo例子應該很容易理解）：

set
實現特定時間後改變某個屬性，但沒法實現連續的動畫

<svg width="500" height="500"> 
            <text x="100" y="200" style="font-size: 2em">
                SIML
                <set attributeName="x"  to="300" begin="3s"></set>
            </text>
    </svg>

animate
實現單屬性的動畫過渡效果

<svg width="500" height="500"> 
        <g>
            <text x="100" y="200" style="font-size: 2em;font-weight: bold;">
                SIML
                <animate attributeName="x" from="100" to="400" dur="3s" repeatCount="indefinite"></animate>
            </text>
        </g>
    </svg>

animateColor
實現顏色的動畫，但使用animate便可實現該功能，因此已被廢棄。
animateTransform
實現單屬性的transform的變換動畫效果（若是設置多個animateTransform則只有最後一個生效，其餘被覆蓋）

<svg width="500" height="500"> 
        <g>
            <text x="200" y="200" style="font-size: 2em;font-weight: bold;">
                SIML
                <animateTransform attributeName="transform" begin="0s" dur="3s" type="rotate" from="0" to="45" repeatCount="indefinite"></animateTransform>
            </text>
        </g>
     </svg>

animateMotion
實現svg圖形沿着特定路徑運動

<svg width="500" height="500"> 
        <g>
            <text x="0" y="0" style="font-size: 2em;font-weight: bold; stroke: red;">
                人
               <animateMotion  path="M 50 200 Q 100 100 200 200 T 400 200" begin="0s" dur="3s" repeatCount="indefinite" rotate="auto"></animateMotion>
            </text>
            <path d="M 50 200 Q 100 100 200 200 T 400 200" style="stroke-width: 2px; fill: none"></path>
        </g>
     </svg>

animate的組合動畫 animateTransform是不能自由組合的，會產生覆蓋（後面的覆蓋前面的），而animate的動畫效果是能夠組合疊加的。

<svg width="500" height="500"> 
        <g>
            <text x="100" y="200" style="font-size: 3em;font-weight: bold;fill:none;">
                SIML
                <animate attributeName="x" from="100" to="400" begin="0s" dur="3s" repeatCount="indefinite"></animate>
                <animate attributeName="opacity" from="0" to="1" begin="0s" dur="3s" repeatCount="indefinite"></animate>
                <animate attributeName="stroke" from="#000" to="red" begin="0s" dur="3s" repeatCount="indefinite"></animate>                
            </text>
        </g>
    </svg>