在YUI 3畫廊：SVG的擴展，創建SVG的哇！ Yahoo!用戶界面博客（YUIBlog）

在YUI 3畫廊：SVG的擴展，創建SVG的哇！

2010年10月18日，11:18上午由Vincent強壯，在發展中， YUI 3圖庫 | 2評論

介紹

SVG（可伸縮矢量圖形）提供了一個互動，動畫2D圖形的聲明語法：形狀，圖像和文字。 SVG支持的HTML 5規範的一部分，和SVG是由所有主要瀏覽器，包括微軟的Internet Explorer中執行第9版。

SVG-wow.org什麼可以用SVG今天所做的網站展示。本網站上的演示創建了SVG的開放式會議，其中SVG的哇！會議已經好幾年的傳統。 SVG的哇！會議由院長傑克遜開始，然後在與自己的合作，然後通過繼續埃里克Dahlstrom 。 Erik和我已經collorated的會議上為2009年和2010年的版本的會議。

在過去的兩年中，越來越多地用於演示AJAX框架，其功能應用到SVG，而不是（或除了）的HTML。 YUI的網站上，同時使用最廣泛使用的框架YUI的2和YUI 3 。

我將開始與快速SVG概述，然後討論，YUI的支持，我已經添加到了YUI 3畫廊的擴展，使其工作與SVG類型的演示。（現在這些擴展YUI的BSD許可證的條款下自由使用。）

SVG的概述

如HTML，SVG是W3C規範。它提供了一個用於描述基本形狀（矩形，圓，線，多邊形，橢圓，折線），任意形狀（可以是線條，二次或三次Bezier曲線路徑段所述），文字和圖像的語法。

下面的圖像是一個屏幕捕獲SVG-wow.org備用樣式表的例子，並顯示在播放一些SVG的特點：豐富的渲染（陰影效果，漸變，圖案）和簡單的和複雜的形狀。

因為SVG圖像幾何和渲染屬性的定義，它有可能使他們在任何決議。因此，SVG圖像可以縮放到任意大小，同時保持高的渲染質量，例如，在打印時（沒有更多的鋸齒邊緣）。

以下放大視圖中顯示相同的SVG圖像顯示，但呈現在一個更高的分辨率，同時保持高品質。

就像HTML，SVG支持互動：鼠標或鍵盤交互的圖形對象添加事件監聽器，它是可能的。當然，SVG的支持，這使得它易於操作的圖形對象的不同屬性，例如其幾何形狀或渲染風格，文檔對象模型。

是SVG規範的很多先進的渲染風格（描邊，填充，圖案，漸變），濾鏡效果（模糊，陰影，色彩矩陣），CSS樣式，先進的文本功能（如路徑上的文本）和聲明動畫。您可以檢查出在這個職位的參考，更了解SVG格式的功能。

SVG和HTML

有了HTML5 ，SVG可以在HTML文檔內聯事不宜遲。瀏覽器開始支持該功能（例如，火狐4 ）。其時，所有主流瀏覽器支持XHTML中內聯SVG的，它提供了相同的功能。在XHTML中的SVG只是需要正確聲明命名空間。

 <html xmlns="http://www.w3.org/1999/xhtml"> <HEAD> ....  </ HEAD> <BODY> <H1>內嵌的SVG </ H1> <SVG的xmlns =“http://www.w3.org/2000/svg”版本=“1.1”的xmlns：XLINK => .w3.org/1999/xlink“寬度=”100％“身高”100％“ID =”backgroundSVG“> < - 這裡SVG內容 - > </ SVG> </ BODY> </ HTML>

所有此頁面上的代碼示例使用這種方式在XHTML中的內聯SVG的。

SVG和YUI

SVG支持聲明性動畫。例如，你可以這樣一個半徑<circle>元素的動畫：

 <circle cx="50" cy="100" r="40">
     <animate attributeName="r" values="40,60,20,40" dur="1.5s" />
 </圈>

<animate>標籤從SMIL規範是借來的，連同其他動畫元素，它提供了一個非常強大的動畫引擎，為SVG。

不幸的是，直到最近，瀏覽器支持SVG動畫稀疏。它比過去兩年有所改善，但微軟已經明確不會支持聲明在IE 9 SVG動畫。

因此，大多數對SVG-wow.org網站，演示使用，而不是聲明動畫腳本動畫。一方面，這是不幸的，因為聲明的動畫比腳本動畫更有效。上檔，腳本動畫可以非常靈活，他們很好地工作在各個實現。

一個很好的腳本動畫解決方案的需求是什麼驅使上使用YUI的SVG-WOW演示。然而，演示還使用其他YUI的功能，尤其是裝載機和節點模塊。

動畫使用YUI的SVG

在演示SVG-WOW使用YUI創建彈性的鼓聲，變形形狀或旋轉文本和形狀，例如。使用SVG的銳需要幾個YUI的擴展，一會兒就好了，我將描述這些。


旋轉文本和形狀	變形形狀

彈鼓聲

下面舉例說明如何銳就派上用場了簡單的動畫和操作SVG圖形。

動畫SVG `transform`屬性

所有的SVG圖形元素有一個transform屬性。該屬性指定一個二維仿射變換的元素，它可以用來縮放，傾斜，旋轉或翻譯。

SVG-wow.org YUI的擴展允許對SVG動畫transform這樣的屬性：

阿尼姆=新Y.Animate（{
    節點：'＃circleA“
    從：
        變換：{TX：0，TY：0，SX，SY：2}
     }，
     ：{
        變換：{TX：20，TY：20，SX：1，SY：1}
     }，
     transformTemplate：“翻譯（＃TX，TY＃）（＃SX，SY＃）規模”，
    持續時間：1
 }）;

變換動畫測試。

你會注意到，在“組件”（如變換值定義tx或ty ）相結合，形成一個價值，使用transformTemplate動畫配置對象上找到。

模板是一個靈活的機制，建設改造的價值，而單獨的組件可以很容易地計算動畫值。這是一個例子，YUI動畫模型允許更大的靈活性（和更多的表現力）比SVG的SMIL的動畫元素（ animateTransform ）。為了創造上述動畫，相當於SMIL的聲明本來：

 <circle ...>
     <animateTransform的attributeName =“變換”類型=“翻譯”
                       =“0,0”=“20,20”DUR =“scaleAnim.begin =”1“開始”/>
     <animateTransform ID =“scaleAnim”的attributeName =“變換”類型=“規模”
                       =“2,2”=“1,1”DUR =“1”開始“無限期”/>
 </圈>

注意上面的片段需要的多個animateTransform元素必須同步： begin的第一個動畫的屬性設置為scaleAnim.begin同步開始的兩個動畫。 YUI動畫引擎的一個不錯的功能是可以共享，適用於多種元素的屬性，動畫的時間（即開始，結束及持續時間）。

YUI的擴展為動畫SVG的變換被廣泛使用，如在相機和動畫歌詞的例子。前者使用YUI的延伸，而後者則使用YUI的擴展。

動畫幾何

基本幾何

使用YUI動畫SVG的幾何是很簡單的。下面的例子動畫一個<rect>元素的寬度，高度和圓角半徑：

阿尼姆=新Y.Animate（{
    節點：“＃直腸，
    從：
        寬度：200，
        身高：100，
         RX：5
         RY：5
     }，
     ：{
        寬度：300，
        身高：100，
         RX：10
         RY：10;
     }，
    時間：2，
    寬鬆：Y.Easing.elasticOut
 }）;

看到形狀動畫測試。

稍後討論，銳罩下的一些變化做這項工作。但是，從開發商的角度來看，這個動畫作品相同的方式，為任何其他HTML屬性或CSS屬性的動畫。

`<path>`的`d`屬性

一個幾何屬性是有點特殊d d屬性<path>元素。 <path>元素用於任意複雜的幾何形狀。一個<path>可以描述任何形狀。其d屬性描述其幾何路徑線段可以是直線，圓弧，二次或三次Bezier曲線（有幾個命令，但他們都映射到Bezier曲線）。

動畫d d屬性，也需要一個位擴展YUI的動畫引擎，但d d屬性與擴展，可以像其他任何動畫，如下所示。

阿尼姆=新Y.Animate（{
    節點：＃pathA“，
     ：{D：的“M 0 0 C 50 0 100 50 100 100°C 50 100 0 50 0 0 Z”}，
     ：{D：的“M 0 0 C 100 0 100 0 100 100 C 0 100 0 100 0 0 Z”}，
    持續時間1秒，
    寬鬆：Y.Easing.bounceBack
 }）;

看到的路徑動畫的測試顯示，除其他事項外，交叉變形，隨著時間的推移，一個复選標記，代表在下面的圖像。

甘地引號演示使用這種動畫技術d變形形狀屬性到甘地的身影。

動畫SVG的其他屬性

當然，YUI的動畫不僅限於幾何屬性。任何SVG的屬性可以設置動畫。例如，下面的動畫動畫水平的模糊濾鏡模糊半徑。

 / / SVG的片段
 <過濾器......
     <feGaussianBlur ID =“blurFilter的”stdDeviation =“10”......  />
 </過濾器>

 / / JavaScript動畫
阿尼姆=新Y.Animate（{
    節點：'＃blurFilter“
     ：{stdDeviation：[0，20]}，
     ：{stdDeviation：[0，0]}
 }）;

過濾器的動畫測試。下面的圖像顯示動畫如何可以使用高斯模糊按鈕狀態之間的過渡。

這種類型的效果是用來在快速模糊效果演示，演示，即使不使用（僅在支持該功能的瀏覽器上運行的費用，如前面所述）YUI動畫，但聲明的SMIL動畫元素。

動畫CSS屬性

如HTML，SVG元素的屬性和CSS屬性。 SVG有一些特定的CSS屬性。這些屬性可以是動畫，有時創造出驚人的效果。例如， stroke-dashoffset財產可以用來模擬繪製一個形狀。

 / / SVG的片段
 <rect id="rectA" WIDTH="100" height="50" stroke-dasharray="300 300" stroke-dashoffset="300" />

 / / JavaScript的
阿尼姆=新Y.Animate（{
    節點：“＃直腸”
     ：{'中風dashoffset“的：0}，
    時間：0.25
 }）;

中風動畫測試。

graffitis演示使用這種技術（即使沒有YUI的動畫），使相機演示（這與YUI的動畫時間）。

YUI和SVG：引擎蓋下

SVG-wow.org網站同時使用YUI 2和YUI 3和SVG特定的擴展。本文的以下部分，重點對YUI 3擴展。

擴展需要：

銳與SVG的DOM的具體工作
為實施差異帳戶
添加新的屬性類型，如SVG的轉換支持
增加額外的動畫定時和同步功能

為SVG DOM的具體會計

如前所述，SVG的屬性，可以聲明性元素，如<animate>動畫。為了支持SVG的動畫模型，SVG屬性值保持動畫和基值。例如，屬性上r r <circle>元素是定義SVGAnimatedLength如下：

接口SVGAnimatedLength {
   ReadOnly屬性SVGLength baseVal;
   ReadOnly屬性SVGLength animVal;
 };

因此，即使在不支持聲明性動畫的實現，我們需要達到的baseVal讀取屬性的值：

 VAR圈=（'＃myCircle'）;
右值= baseVal.value。circle.getAttribute（'R'）;

擴展需要考慮允許的SVG屬性的不同尋常的價值模型動畫引擎。值得慶幸的是，YUI 3的動畫行為的概念。行為本質屬性的具體掛鉤，這是很容易的添加處理SVG屬性值的支持。例如， SVGAnimatedLength屬性像這樣處理：

 VAR lengthBehavior = {
    功能設置：（ANIM，ATT，過去了，時間，樂趣）{
         / / SVG的具體處理
     }，

    得到：功能（ANIM，ATTR）{
         / / SVG的具體處理
     }
 };

 / /處理<circle>“高級屬性
 Y.Animate.behaviors.r = lengthBehavior;

有更多的擴展如其他SVG屬性值的transform屬性，色彩屬性值（如fill ， stroke或stop-color ），如前面提到的屬性stdDeviation 。

需要幾個類似的調整，在例如Y.Node.prototype.toString方法，再次為SVG的帳戶baseVal （這個時間className節點屬性）。另一個例子是在Node模塊的默認節點二傳手。

會計瀏覽器的差異

而此前的擴展，因為HTML和SVG之間的規格差異，以下是必需的，因為瀏覽器之間的執行差異。

SVG有一個稱為屬性的呈現屬性的特殊類別。還支持CSS樣式（所有瀏覽器都支持）的實現，這些演示屬性是真的只是另一種方式指定與低一個CSS屬性的特殊性。從SVG規範：

演示文稿的屬性，從而將參加，如果他們被替換相應的CSS樣式作者樣式表開始在與特異性零的規則放置在CSS2的級聯。在一般情況下，呈現屬性，這意味著有優先級低於其他CSS樣式作者樣式表或“風格”的屬性中指定的規則。

不幸的是，一些瀏覽器不執行正確的規範和window.getComputedStyle不總是設置SVG CSS屬性的所有可能的來源帳戶：CSS選擇器，樣式屬性和呈現屬性。

銳來到救援感謝的Node模塊，它可以延伸到隱藏這些瀏覽器的差異。可擴展的Y.DOM.CUSTOM_STYLES Y.Node.prototype.getComputedStyle Y.DOM.CUSTOM_STYLES提供一個統一的方式來讀取SVG樣式屬性。

延長`Y.DOM`

YUI包裝所有通過DOM訪問Node接口。因此，一些特定的SVG的DOM方法，如， getBBox （用來計算一個SVG元素的邊界），是不是對包裝對象的訪問。

為了使事情變得更容易為SVG方案的的默認Y.DOM模塊（擴展Node使用）被添加到任何公開的SVG DOM功能或添加方便的方法，操作內容時，通常需要：

firstElement/lastElement/prevElement/nextElement/removeAllChildren （不SVG的具體）
getMatrix/setMatrix 。提供一種簡單的方法來操縱SVG元素上的轉換，與標準的SVG DOM的東西非常困難
getBBox/getViewportBBox提供簡單的方法來訪問元素的坐標系統，或在視口空間的邊界框。

loadContent 。一種實用工具插入一個DOM片段描述使用一個JavaScript對象的文字。例如：

 myNode.loadContent（{
    標籤：'G'，
     “紅”，填寫：
    行程：“無”，
    孩子：[{
        標籤：“矩形”，
         X：10，
         Y：10，
        寬度：200，
        身高：300
     {
        標籤：“圈”，
         R：10，
         CX：105
         CY：155
     {
        標籤：“形象”，
         XLINK：HREF：“圖像/ photo.png”
        寬度：200，
        高度：'300px'
     }，prevSibling）;

為使不同的DOM調用（如的的速記createElementNS ， setAttributeNS和appendChild ）來創建g G的元素及其子元素之前插入prevSibling下myNode 。該實用程序處理的屬性和元素的命名空間。

定時和同步增加的動畫引擎

許多，如果不是大多數，涉及動畫需要多個舞蹈動畫實例。通常情況下，幾個動畫需要創造一個理想的效果，動畫的開始或結束的互相依賴，有時一個時間偏移：動畫需要同步。

例如，如果你有一組形狀需要一前一後消失在，你將需要為每個元素創建一個漸變動畫，然後鏈與偏移輕微的開始時間。

 VAR鏈= Y.all（'＃鏈圈“），
     firstAnim，previousAnim;

 chained.each（功能（圈）{
    阿尼姆=新Y.Animate（{
        節點：圓，
         ：{'補'：'白'}，
         ：{'補'：'灰色'}，
        時間：0.25
     }）;
     （previousAnim！未定義）{
         / / Synchrnoize ANIM開始，不要灰心喪氣，後一開始是0.15秒
         / /以前的圓的動畫（previousAnim）。
         previousAnim.onBegin（ANIM，0.15）;
     }否則{
         firstAnim = ANIM;
     }
     previousAnim = ANIM;
 }）;

 / /啟動後，點擊界的第一個動畫1S。
 / /注意，這是一個擴展的默認YUI run方法不
 / /時間偏移。
 chained.on（'點擊'，函數（）{
     firstAnim.run（1）;
 }）;

看到時間偏移測試。

該方法onBegin可以很容易地同步兩個動畫的開始，一個可選的偏移時間。其實， onBegin也可以調用與偏移時間的函數。同樣， onEnd擴展使得它容易同步動畫結束。

默認情況下，YUI的動畫事件提供了一種方法同步。 onBegin和onEnd方法更簡潔表達的同步（一個簡潔的類似的例子所示）。

此外，它有時需要與事件同步動畫，再與偏移時間。 beginOn和endOn擴展允許我們表達。例如：

 anim.beginOn（Y.one（“＃鍵”），“點擊”，0.5）;

ID“按鈕”的元素被點擊後，將開始動畫0.5秒。這是一個簡短的手：

 y.one（“＃鍵”）。上（'點擊'，函數（）{
     setTimeout的（500 / *毫秒* /，函數（）{anim.run（）;}）;
 }）;

動畫類的最後一個擴展的能力，使一個動畫對象的，適用其第一幀的狀態，然後才真正開始。這通常需要創建動畫效果，涉及多個動畫開始在不同的時間偏移。

阿尼姆=新Y.Animate（{
    節點：Y.one（“＃鍵”），
    從：{R：30“，填充不透明度”：0，顏色：“深紅色”}，
     ：{R：80“，填充不透明度”：1，顏色：'金牌'}，
    時間：0.25
 }）;

 / /下面將設置目標對象上的理想狀態之前
 / /啟動動畫。
 anim.applyStartFrame（）;
 anim.run（2）;

圖片洗牌演示用動畫偏移一疊圖片或圖片放在棧中的傳播效果。

結論

工作的SVG和銳，和特別是銳3，已被非常愉快的體驗：很多YUI的功能適用於SVG的權利出的方塊和YUI的可擴展架構它可能要工作圍繞偶爾問題和添加所需的功能。

當然，增加銳的SVG標準的支持將是有益的，特別是使YUI的工作，獨立的SVG文檔和Node類包裝的SVG元素沒有解決方法。

也有一些改進，將是有益的。例如，它會幫助，如果動畫可以針對多個元素。同樣，支持多個值（如<animate> SVG例如元素）將有助於建立更為複雜的特效。

SVG-wow.org上演示了書面銳3.1和3.2移植到這個博客的目的。 3.2 過渡相繼出台，使本地CSS過渡，如果在瀏覽器中使用。 YUI動畫引擎，它有可能利用同樣的SMIL動畫（在寫這篇文章時，Opera，Firefox和WebKit的）也應取得的性能改進。

SVG-wow.org網站上的SVG擴展名是作為YUI 3畫廊模塊，可為那些想享受與YUI和SVG工作的樂趣。

參考文獻

SVG的哇！
SVG規範
SVG的教程
Adobe的SVG的區（有點過時，但仍具有很好的例子）
carto.net例子
KevLinDev

共享和擴展：書籤del.icio.us Digg它！ | reddit！

2評論

SVG的哇的確！
大寫的例子，代碼是使用...非常酷！
謝謝。
評論由迪倫Oudyk - 10月19日，2010 ＃
尼斯後，有趣的文章....
_________
海倫。
評論由建築工地曼徹斯特 - 6月19日，2011年＃

很抱歉，評論已被封閉，在這個時候。

支持WordPress的關於雅虎虛擬主機。

Yahoo!用戶界面博客（YUIBlog）