本文為《硬核運(yùn)營》svg部分的學(xué)習(xí)實(shí)踐

微信公眾平臺支持的動畫類型

攤開一張畫布

我們把SVG交互設(shè)計(jì)想象成作畫的過程，假設(shè)一個(gè)100*100像素的畫布。

<svg height="100" width="100">  
</svg>

圓形

<circle>...</circle>
繪制一個(gè)圓形督暂，只需要知道圓心坐標(biāo)和半徑。

circle 圓
cx圓心橫坐標(biāo)
cy 圓心縱坐標(biāo)
r 半徑
fill是填充色
stroke 描邊
stroke-width 描邊寬度

顏色可以有三種表達(dá)方式，例如紅色怎么表示预吆？
①顏色英文 例如：fill="red"
②16進(jìn)制 例如：fill="#ff0000"
③RGB 例如 ：fill="rgb(255,0,0)"

<svg height="100" width="100">
    <circle cx="50" cy="50" r="30" fill="#ec6969" stroke="green" stroke-width="2" >
    </circle>
</svg>

圓形

矩形

<rect>...</rect>

<!--rect   矩形元素-->
<svg width="100%" height="200">
    <rect x="10" y="10"  width="300" height="150"  style="stroke:green;stroke-width:5;fill:red" id="1.2">
    </rect>
</svg>

繪出一個(gè)矩形龙填，需要起始位置坐標(biāo)（x和y），和寬度（width）拐叉，高度（height）岩遗。

注意：當(dāng)width="100%"的時(shí)候，畫布是整個(gè)網(wǎng)頁的寬度凤瘦。

矩形

矩形的起點(diǎn)坐標(biāo)宿礁，就是矩形的左上角的坐標(biāo)。

ppt演示從左上角畫出一個(gè)矩形

矩形動畫

<!--矩形動畫-->
<svg width="250" height="250" id="1.3">
    <rect x="50" y="50" width="100" height="100" fill="gray">
        <animate attributeName="x" from="50" to="250" dur="3s"  repeatcount="2" fill="remove">
        </animate>
        <animate attributeName="y" from="50" to="250" dur="3s"  repeatcount="2" fill="remove">
        </animate>
    </rect>
</svg>

注意：x 蔬芥、y梆靖、width控汉、height可以單獨(dú)變化，也可以一起變化返吻。

<animate attributeName="x" from="50" to="250" dur="3s" repeatcount="2" fill="remove">

動畫元素<animate>...</animate>

attruibuteName 屬性名
from 初始值
to 終值
dur 持續(xù)時(shí)間
repeatcount 重復(fù)次數(shù)
①可以填入具體的數(shù)值姑子，例如2，就表示動畫重復(fù)2次
②可以填入“indefinite”,表示無限循環(huán)

fill=" "
①remove 動畫結(jié)束后保持在起始位置
②freeze 動畫結(jié)束后保持在終止位置

矩形動畫.gif

圓形動畫测僵，圓的半徑可以變化

<!--圓形動畫-->
<svg  width="500" height="500" id="1.5">
    <circle  cx="100" cy="100" r="50" fill="#ff0000">
        <animate attributeName="r" values="50;70;90" keyTimes="0;0.2;1" dur="4s">
        </animate>

    </circle>
</svg>

圓形動畫.gif

<animate attributeName="r" values="50;70;90" keyTimes="0;0.2;1" dur="4s">
</animate>

values="50;70;90" 圓的半徑 從50->70->90

格式
values="參數(shù)1;參數(shù)2;參數(shù)3......."
可以看出來可以定義動畫的多個(gè)關(guān)鍵幀街佑，而from 和to來只能定義參數(shù)的起始和結(jié)束。

keyTimes="0;0.2;1"
keytimes 在默認(rèn)的狀態(tài)下捍靠，第一個(gè)時(shí)間值為0沐旨，最后一個(gè)時(shí)間值為1。是values對應(yīng)的時(shí)間分配比

意思就是榨婆，半徑50->70動畫分配 4x0.2=0.8s的時(shí)間磁携，70->90，分配了4 x0.8=3.2s的時(shí)間纲辽。

餓了 颜武，明天再寫