今天繼續(xù)微信圖文互動svg基礎(chǔ)知識，內(nèi)容來源自《硬核運營》實踐
keytimes屬性
keytimes 是對values值的時間分配比粉捻。
例如：下面這個矩形位移動畫呻待，總時間3s。去程時間4* 0.8=3.2s闷袒，回程時間4* 0.2=0.8s序目。
<!--keyTimes屬性-->
<!--keyTimes屬性臂痕，默認(rèn)第一個值是0，最后一個值是1-->
<svg width="100%" height="100">
<rect x="20" y="20" fill="#ec6969" width="100" height="60">
<animate attributeName="x" values="20;150;20" dur="3s" keyTimes="0;.8;1">
</animate>
</rect>
</svg>
keyTimes列表的語義取決于calcMode（插值模式）
| 插值模式（calcMode） | 含義 | keyTimes屬性設(shè)置 |
|---|---|---|
| linear (默認(rèn)值) | 每個時間段內(nèi)均勻變化 | keyTimes列表第一個時間值為0猿涨，最后一個時間值為1 |
| spline | 配合keySplines屬性握童，設(shè)置緩動函數(shù)效果 | keyTimes列表第一個時間值為0，最后一個時間值為1 |
| discrete【離散】 | 沒有中間過渡叛赚，在對應(yīng)時刻呈現(xiàn)對應(yīng)效果 | keyTimes列表第一個時間值為0 |
| paced | 根據(jù)values數(shù)值均勻變化 | 無視keyTimes屬性 |
總結(jié)：默認(rèn)情況下澡绩，keyTimes列表第一個時間值為0片效，最后一個時間值為1 。
opacity 不透明度屬性
<!--opacity 不透明度-->
<svg width="100%" height="100">
<circle cx="50" cy="50" r="50" fill="red" opacity="1">
<!--默認(rèn)圖形的opacity=1英古，即圖形是顯示的-->
<animate attributeName="opacity" values="1;0;1" dur="3s" begin="1s" repeatcount="indefinite">
</animate>
</circle>
</svg>
opacity ="1" 不透明度最大淀衣，也就是可見的。
opacity="0" 召调，不透明度最信蚯拧（透明度最大），不可見唠叛。
多邊形
01 封閉多邊形屬性 polygon
poly就是很多的意思只嚣，gon 就是角度的意思。
<!--封閉多邊形polygon-->
<svg width="100%" height="100">
<polygon points="50,50 100,50 100,100 50,100" fill="#888888" stroke="red" stroke-width="1">
<animate attributeName="points" values="50,50 100,50 100,100 50,100;50,50 100,50 120,100 30,100" dur="2s" fill="freeze" >
</animate>
</polygon>
</svg>
points="50,50 100,50 100,100 50,100"是4邊形的4個坐標(biāo)（50,50）（50,100）（100,100）（50,100）
從坐標(biāo)可以看出來艺沼，初始圖形是一個正方形册舞。
坐標(biāo)格式
同一組不同的坐標(biāo)用空格隔開。兩組坐標(biāo)用分號隔開障般。例如：初始坐標(biāo)和動畫后坐標(biāo)就是用分號隔開调鲸。
02 折線多邊形 polyline
polygon和polyline最大的區(qū)別就是，前者是封閉的圖形挽荡，而后者是點的連線路徑藐石，是不封閉的。
如果polyline要形成封閉的圖形定拟，需要起點坐標(biāo)和終點坐標(biāo)一樣于微。就跟用筆畫一個正方形一樣,筆尖從起點出發(fā)，最后回到起點青自，這樣才是一個封閉的圖形株依。
<!--折線多邊形polyline-->
polyline折線,是不封閉的。
<svg width="150" height="150">
<polyline points="50,50 100,50 100,100 50,100" fill="none" stroke="red" stroke-width="1">
</polyline>
</svg>
起點坐標(biāo)和終點坐標(biāo)一樣延窜，才能形成封閉圖形
<svg width="150" height="150">
<polyline points="50,50 100,50 100,100 50,100 50,50" fill="none" stroke="red" stroke-width="1">
</polyline>
</svg>
描邊屬性 stroke
首先學(xué)習(xí)幾個單詞
dash 破折號
array 數(shù)組
offset 偏移量
所以恋腕，dasharrey 虛線（虛線就是很多破折號）
①實線描邊
<svg width="300" height="150">
<rect x="50" y="50" width="100" height="60" fill="#888888" stroke="green" stroke-width="1">
<animate attributeName="stroke-width" values="3;5;1" dur="2s" fill="freeze" >
</animate>
</rect>
</svg>
描述：正方形的描邊寬度動畫，初始描邊寬度stroke-width="1",在2秒內(nèi)需曾，從3->5->1
② 虛線描邊 storke-dasharrey
stroke-dassarray="值1 值2" 我們知道虛線由【實線段】和【空隙】構(gòu)成吗坚。值1就是實線段的長度祈远，值2就是空隙長度呆万。
<svg width="300" height="150">
<rect x="50" y="50" width="100" height="60" fill="#888888" stroke="red" stroke-width="2" stroke-dasharray="15 20">
<animate attributeName="stroke-dasharray" values="15 20;20 35" dur="1s" repeatcount="indefinite">
</animate>
</rect>
</svg>
描述：1s內(nèi)，虛線描邊的實線段長度 15->20,空隙 20->25變化车份。
stroke-dashoffset 虛線描邊的偏移量
如何理解這個偏移量呢谋减？
<!--默認(rèn)沒有偏移量，即storke-dassoffset="0"-->
<svg width="300" height="150">
<rect x="50" y="50" width="100" height="50" fill="#888888" stroke="red" stroke-width="2" stroke-dasharray="100 400" >
</rect>
</svg>
注意：這個矩形周長是300扫沼，所以 虛線間隔≥300出爹，就只能看到一條線庄吼。可以利用這個實現(xiàn)描邊動畫严就，后面講总寻。
上圖來源：https://blog.csdn.net/sillies_3/article/details/90607648
偏移量為正
偏移量為正，從偏移量為0的位置開始梢为，向反方向偏移（逆時針）渐行。
<svg width="300" height="150">
<rect x="50" y="50" width="100" height="50" fill="#888888" stroke="red" stroke-width="2" stroke-dasharray="100 300" stroke-dashoffset="0">
<animate attributeName="stroke-dashoffset" values="0;100" dur="3s" fill="freeze" repeatcount="1" >
</animate>
</rect>
</svg>
偏移量為負
偏移量為負，從偏移量為0的位置開始铸董，正方向偏移（順時針）
<svg width="300" height="150">
<rect x="50" y="50" width="100" height="50" fill="#888888" stroke="red" stroke-width="2" stroke-dasharray="100 300" stroke-dashoffset="0">
<animate attributeName="stroke-dashoffset" values="0;-100" dur="3s" fill="freeze" repeatcount="1" >
</animate>
</rect>
</svg>
總結(jié)：偏移量數(shù)值的正負祟印，和偏移方向剛好相反。
描述：這是一個寬100粟害，高50的長方形蕴忆。虛線長度是300，
虛線描邊動畫
這個有點深度悲幅，學(xué)好了可以非常牛皮套鹅。關(guān)鍵在于路徑的表達，如果你用路徑表示一個房子汰具，那么用描邊動畫就會形成用筆畫房子的動畫芋哭。
實線長度=間隔長度=路徑長度=偏移量，這個描邊動畫的臨界條件郁副。
簡單點說减牺，就是虛線中的實線段貫穿全程，而看不見空隙存谎。
虛線描邊動態(tài)效果
<!--虛線動態(tài)描邊效果-->
<svg width="300" height="150">
<rect x="50" y="50" width="100" height="50" fill-opacity="0" stroke="red" stroke-width="2" stroke-dasharray="300 300" stroke-dashoffset="0">
<animate attributeName="stroke-dashoffset" values="300;0" dur="3s" repeatcount="1">
</animate>
</rect>
</svg>
我們按照矩形路徑拔疚，描邊就會如圖所示。
所以既荚，如果用代碼寫出心形路徑稚失，就會繪畫出一個心型，再加上表白詞恰聘。絕對是一個表白利器句各。不說了，為了擺脫單身晴叨，我要去學(xué)習(xí)了凿宾。
未完待續(xù)
