html5如何寫動態(tài)圖形設(shè)計

這篇文章主要為大家展示了“html5如何寫動態(tài)圖形設(shè)計”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“html5如何寫動態(tài)圖形設(shè)計”這篇文章吧。

　　一、基本圖形元素

　　svg有一些預(yù)定義的形狀元素：矩形，圓形，橢圓，直線，折線，多邊形，路徑和文本。

　　Try SVG

　　二、樣式與效果

　　svg元素的樣式可以寫成標(biāo)簽的屬性，也可以寫在style里面。下面是一些主要的樣式屬性：

　　stroke： 筆觸顏色

　　stroke-width：筆觸寬度

　　stroke-opacity：筆觸的透明度

　　fill：填充色，即background

　　fill-opacity：填充色的透明度

　　transform：圖形變換，類似css3 transform

　　svg還支持很多濾鏡效果，能做漸變、陰影、模糊、圖像混合等等。不需要了解那么多，例如要畫幾個彩色圓圈，用circle 配合fill 即可。

　　注意：transform 默認以svg左上角為基點，而不是圓心或其他中心。左上角是svg坐標(biāo)系原點。了解transform和坐標(biāo)系統(tǒng)，可以參考 這里。

　　三、輔助元素

　　svg有幾個輔助元素：。它們不代表具體形狀，而是幫助進行圖形元素的分組管理、重復(fù)使用等。具體介紹可以參考 這里。

　　元素通常用來對相關(guān)圖形元素進行分組，以便統(tǒng)一操作，比如旋轉(zhuǎn)，縮放或者添加相關(guān)樣式等。

　　實現(xiàn)SVG現(xiàn)有圖形的重用，可以重用單個SVG圖形元素，也可以重用定義的組元素。

　　內(nèi)部定義的元素不會直接顯示，可以不用事先定義樣式，而是在使用實例化的時候再定義。

　　能夠創(chuàng)建自己的視窗，兼具的分組功能和初始不可見的特性。

　　對于上面提到的transform基點問題，可以通過嵌套標(biāo)簽并偏移的位置，進而重設(shè)基點。如下畫出幾個水平排列的圓圈，并設(shè)置不同的縮放尺寸

　　四、動畫的實現(xiàn)

　　svg的動畫效果是基于動畫標(biāo)簽元素實現(xiàn)的：

　　實現(xiàn)單屬性的過渡效果;

　　實現(xiàn)transform變換動畫效果;

　　實現(xiàn)路徑動畫效果。

　　svg的寫法很靈活，樣式可以寫成標(biāo)簽屬性也可以寫在style里面，動畫標(biāo)簽可以通過xlink指定元素，也可以寫在動畫元素的內(nèi)部。如下演示animateTransform的xlink寫法：

　　xlink:href="#animateObject"

　　attributeName="transform"

　　type="scale"

　　begin="0s"

　　dur="3s"

　　from="1"

　　to="2"

　　repeatCount="indefinite"

　　/>

　　上例的動畫是A到B的過渡，要形成順暢的循環(huán)，至少要定義三個關(guān)鍵點。animateTransform支持更多更靈活的屬性設(shè)置：

　　values：多個關(guān)鍵點的值，替代from和to，例如 values="0;1;0"

　　keyTimes：跟values對應(yīng)，各個點的時間點

　　calcMode：動畫快慢方式。discrete | linear | paced | spline

　　keySplines：設(shè)置運動的貝塞爾控制點，calcMode為spline時有效

　　五、代碼實例

　　circle畫圓，fill著色，用g標(biāo)簽包裹并定位，transform設(shè)置初始形變，animateTransform設(shè)置動畫?，F(xiàn)在來看代碼，相信不會再是一頭霧水了：

以上是“html5如何寫動態(tài)圖形設(shè)計”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！