html5如何寫動態圖形設計

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

　　一、基本圖形元素

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

　　Try SVG

　　二、樣式與效果

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

　　stroke： 筆觸顏色

　　stroke-width：筆觸寬度

　　stroke-opacity：筆觸的透明度

　　fill：填充色，即background

　　fill-opacity：填充色的透明度

　　transform：圖形變換，類似css3 transform

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

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

　　三、輔助元素

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

　　元素通常用來對相關圖形元素進行分組，以便統一操作，比如旋轉，縮放或者添加相關樣式等。

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

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

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

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

　　四、動畫的實現

　　svg的動畫效果是基于動畫標簽元素實現的：

　　實現單屬性的過渡效果;

　　實現transform變換動畫效果;

　　實現路徑動畫效果。

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

　　xlink:href="#animateObject"

　　attributeName="transform"

　　type="scale"

　　begin="0s"

　　dur="3s"

　　from="1"

　　to="2"

　　repeatCount="indefinite"

　　/>

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

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

　　keyTimes：跟values對應，各個點的時間點

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

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

　　五、代碼實例

　　circle畫圓，fill著色，用g標簽包裹并定位，transform設置初始形變，animateTransform設置動畫。現在來看代碼，相信不會再是一頭霧水了：

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