突襲HTML5之SVG 2D入門11 - 動畫

交互性
      SVG擁有良好的用戶交互性，例如：
1. SVG能響應大部分的DOM2事件。
2. SVG能通過cursor良好的捕捉用戶鼠標的移動。
3. 用戶可以很方便的通過設置svg元素的zoomAndPan屬性的值來實現縮放等效果。
4. 用戶可以很方便的把動畫和事件結合起來，完成一些復雜的效果。

      通過給SVG元素掛接事件，我們可以使用腳本語言方便的完成一些交互任務。SVG支持大部分的DOM2事件，例如：onfocusin, onfocusou, onclick, onmousedown, onmouseup, onmousemove, onmouseout, onload, onresize, onscroll等事件。除了這些，SVG還提供了獨有的動畫相關的事件，比如：onroom,onbegin,onend,onrepeat等。
      事件大家比較熟悉，就不多說了。 

動畫的方式
      SVG采用的是使用文本來定義圖形，這種文檔結構非常適合於創建動畫。要改變圖形的位置、大小和顏色，只需要調整相應的屬性就可以了。事實上，SVG有為各種事件處理而專門設計的屬性，甚至很多還是專門為動畫量身定做的。在SVG中，實現動畫可以有下面幾種方式：
1. 使用SVG的動畫元素。這個下面會重點介紹。
2. 使用腳本。采用DOM操作啟動和控制動畫，這個已經是一門成熟的技術了，后面有一個小例子。
3. SMIL(Synchronized Multimedia Integration Language)。這個有興趣的請參考：http://www.w3.org/TR/2008/REC-SMIL3-20081201/。

      下面的例子包含了SVG中幾種最基本的動畫：

 
          < 
          svg  
          width 
          ="8cm" 
           height 
          ="3cm" 
            viewBox 
          ="0 0 800 300" 
          
     xmlns 
          ="http://www.w3.org/2000/svg" 
           version 
          ="1.1" 
          > 
          
   
          < 
          desc 
          >基本動畫元素 
          </ 
          desc 
          > 
          
   
          < 
          rect  
          x 
          ="1" 
           y 
          ="1" 
           width 
          ="798" 
           height 
          ="298" 
           
        fill 
          ="none" 
           stroke 
          ="blue" 
           stroke-width 
          ="2" 
            
          /> 
          
   
          <!-- 
           矩形位置和大小的動畫  
          --> 
          
   
          < 
          rect  
          id 
          ="RectElement" 
           x 
          ="300" 
           y 
          ="100" 
           width 
          ="300" 
           height 
          ="100" 
          
        fill 
          ="rgb(255,255,0)" 
             
          > 
          
     
          < 
          animate  
          attributeName 
          ="x" 
           attributeType 
          ="XML" 
          
             begin 
          ="0s" 
           dur 
          ="9s" 
           fill 
          ="freeze" 
           from 
          ="300" 
           to 
          ="0" 
            
          /> 
          
     
          < 
          animate  
          attributeName 
          ="y" 
           attributeType 
          ="XML" 
          
             begin 
          ="0s" 
           dur 
          ="9s" 
           fill 
          ="freeze" 
           from 
          ="100" 
           to 
          ="0" 
            
          /> 
          
     
          < 
          animate  
          attributeName 
          ="width" 
           attributeType 
          ="XML" 
          
             begin 
          ="0s" 
           dur 
          ="9s" 
           fill 
          ="freeze" 
           from 
          ="300" 
           to 
          ="800" 
            
          /> 
          
     
          < 
          animate  
          attributeName 
          ="height" 
           attributeType 
          ="XML" 
          
             begin 
          ="0s" 
           dur 
          ="9s" 
           fill 
          ="freeze" 
           from 
          ="100" 
           to 
          ="300" 
            
          /> 
          
   
          </ 
          rect 
          > 
          
   
          <!-- 
           創建新的用戶坐標空間，所以text是從新的(0,0)開始，后續的變換都是針對新坐標系的  
          --> 
          
   
          < 
          g  
          transform 
          ="translate(100,100)" 
            
          > 
          
     
          <!-- 
           下面使用了set去動畫visibility，然后使用animateMotion,
 animate和animateTransform執行其他類型的動畫  
          --> 
          
     
          < 
          text  
          id 
          ="TextElement" 
           x 
          ="0" 
           y 
          ="0" 
          
          font-family 
          ="Verdana" 
           font-size 
          ="35.27" 
           visibility 
          ="hidden" 
             
          >  
          
      It's alive! 
          
       
          < 
          set  
          attributeName 
          ="visibility" 
           attributeType 
          ="CSS" 
           to 
          ="visible" 
          
           begin 
          ="3s" 
           dur 
          ="6s" 
           fill 
          ="freeze" 
            
          /> 
          
       
          < 
          animateMotion  
          path 
          ="M 0 0 L 100 100" 
           
           begin 
          ="3s" 
           dur 
          ="6s" 
           fill 
          ="freeze" 
            
          /> 
          
       
          < 
          animate  
          attributeName 
          ="fill" 
           attributeType 
          ="CSS" 
          
           from 
          ="rgb(0,0,255)" 
           to 
          ="rgb(128,0,0)" 
          
           begin 
          ="3s" 
           dur 
          ="6s" 
           fill 
          ="freeze" 
            
          /> 
          
       
          < 
          animateTransform  
          attributeName 
          ="transform" 
           attributeType 
          ="XML" 
          
           type 
          ="rotate" 
           from 
          ="-30" 
           to 
          ="0" 
          
           begin 
          ="3s" 
           dur 
          ="6s" 
           fill 
          ="freeze" 
            
          /> 
          
       
          < 
          animateTransform  
          attributeName 
          ="transform" 
           attributeType 
          ="XML" 
          
           type 
          ="scale" 
           from 
          ="1" 
           to 
          ="3" 
           additive 
          ="sum" 
          
           begin 
          ="3s" 
           dur 
          ="6s" 
           fill 
          ="freeze" 
            
          /> 
          
     
          </ 
          text 
          > 
          
   
          </ 
          g 
          > 
          
 
          </ 
          svg 
          > 
         

      把這段代碼放到html文檔的body中運行一下就可以知道動畫的效果。
動畫元素的公共屬性

第一類：指定目標元素和屬性
  xlink:href

      這個應該是很熟悉了，指向執行動畫的元素。這個元素的必須是在當前的SVG文檔片段中定義的。如果沒有指定這個屬性的話，動畫會應用到自己的父元素上。
  attributeName = "<attributeName>"
      這個屬性指定了應用動畫的屬性。如果該屬性有namespace的話(不要忘了，SVG本質是XML文檔)，這個namespace也要加上。例如下面的例子中分別給xlink起了不同的別名，這里animate指定屬性的時候就帶了namespace：

 
          < 
          svg  
          version 
          ="1.1" 
           xmlns 
          ="http://www.w3.org/2000/svg" 
          
     xmlns:xlink 
          ="http://www.w3.org/1999/xlink" 
          > 
          
   
          < 
          title 
          >Demonstration of the resolution of namespaces for animation 
          </ 
          title 
          > 
          
   
          < 
          g  
          xmlns:a 
          ="http://www.w3.org/1999/xlink" 
          > 
          
     
          < 
          animate  
          attributeName 
          ="a:href" 
           xlink:href 
          ="#foo" 
           dur 
          ="2s" 
           to 
          ="two.png" 
           fill 
          ="freeze" 
          /> 
          
   
          </ 
          g 
          > 
          
   
          < 
          g  
          xmlns:b 
          ="http://www.w3.org/1999/xlink" 
           xmlns:xlink 
          ="http://example.net/bar" 
          > 
          
     
          < 
          image  
          xml:id 
          ="foo" 
           b:href 
          ="one.png" 
           x 
          ="35" 
           y 
          ="50" 
           width 
          ="410" 
           height 
          ="160" 
          /> 
          
   
          </ 
          g 
          > 
          
 
          </ 
          svg 
          > 
         

  attributeType = "CSS | XML | auto(默認值)"
      這個屬性指定了屬性取值的命名空間，這幾個值的含義如下：
CSS：代表attributeName指定的屬性是CSS屬性。
XML：代表attributeName指定的屬性是XML默認命名空間下的屬性(注意svg文檔本質上是xml文檔)。
auto：代表先在CSS屬性中查找attributeName指定的屬性，如果沒找到，則在默認的XML命名空間下尋找該屬性。
 
第二類：控制動畫時間的屬性
      下列屬性都是動畫時間屬性；它們控制了動畫執行的時間線，包括如何開始和結束動畫，是否重復執行動畫，是否保存動畫的結束狀態等。
  begin = "begin-value-list"
      該屬性定義了動畫的開始時間。可以是分號分開的一系列時間值。也可以是一些其他觸發動畫開始的值。比如事件，快捷鍵等。
  dur = Clock-value | "media" | "indefinite"
      定義了動畫的持續時間。可以設置為以時鍾格式顯示的值。也可以設置為下列兩個值：
media：指定動畫的時間為內部多媒體元素的持續時間。
indefinite：指定動畫時間為無限。

      時鍾格式指的是下列這些合法的取值格式： 

             02:30:03    = 2 hours, 30 minutes and 3 seconds 
          
  50:00:10.25 = 50 hours, 10 seconds and 250 milliseconds 
          
  02:33   = 2 minutes and 33 seconds 
          
  00:10.5 = 10.5 seconds = 10 seconds and 500 milliseconds 
          
  3.2h    = 3.2 hours = 3 hours and 12 minutes 
          
  45min   = 45 minutes 
          
  30s     = 30 seconds 
          
  5ms     = 5 milliseconds 
          
  12.467  = 12 seconds and 467 milliseconds 
          
  00.5s = 500 milliseconds 
          
  00:00.005 = 5 milliseconds 
         

  end = "end-value-list"
      定義了動畫的結束時間。可以是分號分開的一系列值。
  min = Clock-value | "media"
  max = Clock-value | "media"
      設置了動畫持續時間的最大最小值。
  restart = "always" | "whenNotActive" | "never"
      設置了動畫能否隨時重新開始。always代表動畫可以隨時開始。whenNotActive代表只能在沒播放的時候重新開始，比如前一次播放結束了。never表示動畫不能重新開始。
  repeatCount = numeric value | "indefinite"
      設置了動畫重復的次數。 indefinite代表無限重復。
  repeatDur = Clock-value | "indefinite"
      設置重復的總的動畫時間。indefinite代表無限重復。
  fill = "freeze" | "remove(默認值)"
      設置了動畫結束后元素的狀態。freeze表示動畫結束后元素停留在動畫的最后狀態。remove代表動畫結束以后元素回到動畫前的狀態，這個是默認值。

第三類：定義動畫值的屬性
      這些屬性定義了被執行動畫的屬性的取值情況。其實是定義了關鍵幀和插值的一些算法。
  calcMode = "discrete | linear(默認值) | paced | spline"
      定義了動畫插值的方式：discrete:離散的，不插值；linear：線性插值；paced：步長插值；spline:樣條插值。默認是linear(線性插值)，但是如果屬性不支持線性插值，則會采用discrete插值方式。
  values = "<list>"
      定義了以分號分隔的動畫關鍵幀的值列表。支持向量值。
  keyTimes = "<list>"
      定義了以分號分隔的動畫關鍵幀的時間列表。這個和values是一一對應的。這個值是受插值算法影響的，如果是線性(linear)和樣條插值(spline)，則keyTimes的第一個值必須是0，最后一個值必須是1。對於離散(discrete)的不插值的方式，keyTimes的第一個值必須是0。對於步長插值方式，很顯然是不需要keyTimes。而且如果動畫的持續時間設置為indefinite，則忽略keyTimes。
  keySplines = "<list>"
      這個屬性定義了樣條插值(貝塞爾插值)時的控制點，顯然只有在插值模式選擇為spline才起作用。這個列表中的值取值范圍是0到1。
  from = "<value>"
  to = "<value>"
  by = "<value>"
      定義動畫屬性的起始值，結束值和步長值。這里需要注意：如果values已經制定了相關的值，則任何的from/to/by值都會被忽略。
第四類：控制動畫是否是增量式的屬性
      有時候，如果相關的值設置的不是絕對值，而是增量值是非常有用的，使用additive屬性可以達到這個目的。
  additive = "replace(默認值) | sum"
      這個屬性控制了動畫是否是增量式的。sum表示動畫會較大相關的屬性值或者其他低優先級的動畫上。replace是默認值，表示動畫會覆蓋相關的屬性值或者其他低優先級的動畫。看一個小例子：

 
          < 
          rect  
          width 
          ="20px" 
           ... 
          > 
          
   
          < 
          animate  
          attributeName 
          ="width" 
           from 
          ="0px" 
           to 
          ="10px" 
           dur 
          ="10s" 
          
           additive 
          ="sum" 
          /> 
          
 
          </ 
          rect 
          > 
         

      這個例子演示了矩形width遞增的動畫效果。

      有時候，如果重復的動畫結果是疊加起來的，也非常有用，使用accumulate屬性可以達到這個目的。
  accumulate = "none(默認值) | sum"
      這個屬性控制了動畫效果是否是累積的。none是默認值，表示重復的動畫不累積。sum表示重復的動畫效果是累積的。對於單次執行的動畫，該屬性沒有意義。看個小例子：

 
          < 
          rect  
          width 
          ="20px" 
           ... 
          > 
          
   
          < 
          animate  
          attributeName 
          ="width" 
           from 
          ="0px" 
           to 
          ="10px" 
           dur 
          ="10s" 
          
           additive 
          ="sum" 
           accumulate 
          ="sum" 
           repeatCount 
          ="5" 
          /> 
          
 
          </ 
          rect 
          > 
         

      這個例子演示了矩形的長度在每次迭代中都在增加。

動畫元素小結
      SVG提供了下列動畫元素：
1. animate元素
      這個是最基本的動畫元素，可以直接為相關屬性提供不同時間點的值。
2. set元素
      這個是animate元素的簡寫形式，支持所有的屬性類型，尤其是當對非數字型的屬性(例如visibility)進行動畫時很方便。set元素是非增量的，相關的屬性對之無效。 to指定的動畫結束值類型一定要符合屬性的取值類型。
3. animateMotion元素
      路勁動畫元素。這個元素大多數屬性都和上面一樣，只有下面幾個稍微有點區別：
  calcMode = "discrete | linear | paced | spline"
      這個屬性的默認值不同，在該元素中默認的是paced。
  path = "<path-data>"
      動畫元素移動的路徑，格式與path元素的d屬性的值的格式是一致的。
  keyPoints = "<list-of-numbers>"
      這個屬性的值是一系列分號給開的浮點數值，每個值的取值范圍是0~1。這些值代表了keyTimes屬性指定的對應時間點移動的距離，這里距離具體是多少是由瀏覽器自己決定的。
  rotate = <number> | auto | auto-reverse"
      這個屬性指定了元素移動時旋轉的角度。默認值是0，數字代表旋轉的角度，auto表示隨着路勁的方向轉動物體。auto-reverse表示轉向與移動方向相反的方向。
      此外animateMotion元素的from,by,to,values的值都是坐標對組成的；x值與y值之間用逗號或空格分開，每個坐標對之間用分號隔開比如from="33,15"表示起點x坐標為33，y坐標為15。
指定運動路徑的方式有兩種：一種為直接給path屬性賦值，一種為使用mpath元素作為animateMotionde的子元素指定路徑。如果同時使用這兩種方式，則使用mpath元素優先級高。這兩種方式優先級都比values,from,by,to高。
      看一個小例子：

 
          <? 
          xml version="1.0" standalone="no" 
          ?> 
          
 
          <! 
          DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" 
          > 
          
 
          < 
          svg  
          width 
          ="5cm" 
           height 
          ="3cm" 
            viewBox 
          ="0 0 500 300" 
          
     xmlns 
          ="http://www.w3.org/2000/svg" 
           version 
          ="1.1" 
          
     xmlns:xlink 
          ="http://www.w3.org/1999/xlink" 
            
          > 
          
   
          < 
          rect  
          x 
          ="1" 
           y 
          ="1" 
           width 
          ="498" 
           height 
          ="298" 
          
        fill 
          ="none" 
           stroke 
          ="blue" 
           stroke-width 
          ="2" 
            
          /> 
          
 
          
   
          < 
          path  
          id 
          ="path1" 
           d 
          ="M100,250 C 100,50 400,50 400,250" 
          
        fill 
          ="none" 
           stroke 
          ="blue" 
           stroke-width 
          ="7.06" 
             
          /> 
          
   
          < 
          circle  
          cx 
          ="100" 
           cy 
          ="250" 
           r 
          ="17.64" 
           fill 
          ="blue" 
             
          /> 
          
   
          < 
          circle  
          cx 
          ="250" 
           cy 
          ="100" 
           r 
          ="17.64" 
           fill 
          ="blue" 
             
          /> 
          
   
          < 
          circle  
          cx 
          ="400" 
           cy 
          ="250" 
           r 
          ="17.64" 
           fill 
          ="blue" 
             
          /> 
          
   
          < 
          path  
          d 
          ="M-25,-12.5 L25,-12.5 L 0,-87.5 z" 
          
        fill 
          ="yellow" 
           stroke 
          ="red" 
           stroke-width 
          ="7.06" 
             
          > 
          
     
          < 
          animateMotion  
          dur 
          ="6s" 
           repeatCount 
          ="indefinite" 
           rotate 
          ="auto" 
            
          > 
          
        
          < 
          mpath  
          xlink:href 
          ="#path1" 
          /> 
          
     
          </ 
          animateMotion 
          > 
          
   
          </ 
          path 
          > 
          
 
          </ 
          svg 
          > 
         

4. animateColor元素
      顏色動畫元素。這是一個過時的元素，基本上所有功能都可以用animate代替，所以還是不要用了。

5. animateTransform元素
      變換動畫元素。看看特殊的一些屬性：
  type = "translate | scale | rotate | skewX | skewY"
      這個屬性指定了變換的類型，translate是默認值。
      from,by和to的值相應的都是對應變換的參數，這個還是與前面講的變換是一致的。values則是一組分號隔開的這樣的值系列。

支持動畫效果的元素和屬性
      基本上所有圖形元素(path,rect,ellipse,text,image...)，容器元素(svg, g, defs, use, switch, clipPath, mask...)都支持動畫。基本上大多數的屬性都支持動畫效果。詳細的說明請參看官方文檔。

使用DOM實現動畫
      SVG動畫也可以使用腳本完成，DOM的詳細內容后面會介紹，這里簡單看一個小例子：

 
          <? 
          xml version="1.0" standalone="no" 
          ?> 
          
 
          <! 
          DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" 
          > 
          
 
          < 
          svg  
          width 
          ="4cm" 
           height 
          ="2cm" 
           viewBox 
          ="0 0 400 200" 
          
     xmlns 
          ="http://www.w3.org/2000/svg" 
          
     onload 
          ="StartAnimation(evt)" 
           version 
          ="1.1" 
          > 
          
   
          < 
          script  
          type 
          ="application/ecmascript" 
          > 
          <! 
          [CDATA[
     
          var 
           timevalue  
          = 
            
          0 
          ;
     
          var 
           timer_increment  
          = 
            
          50 
          ;
     
          var 
           max_time  
          = 
            
          5000 
          ;
     
          var 
           text_element;
     
          function 
           StartAnimation(evt) {
      text_element  
          = 
           evt.target.ownerDocument.getElementById( 
          " 
          TextElement 
          " 
          );
      ShowAndGrowElement();
    }
     
          function 
           ShowAndGrowElement() {
      timevalue  
          = 
           timevalue  
          + 
           timer_increment;
       
          if 
           (timevalue  
          > 
           max_time)
         
          return 
          ;
       
          // 
           Scale the text string gradually until it is 20 times larger 
          
 
                scalefactor  
          = 
           (timevalue  
          * 
            
          20 
          .)  
          / 
           max_time;
      text_element.setAttribute( 
          " 
          transform 
          " 
          ,  
          " 
          scale( 
          " 
            
          + 
           scalefactor  
          + 
            
          " 
          ) 
          " 
          );
       
          // 
           Make the string more opaque 
          
 
                opacityfactor  
          = 
           timevalue  
          / 
           max_time;
      text_element.setAttribute( 
          " 
          opacity 
          " 
          , opacityfactor);
       
          // 
           Call ShowAndGrowElement again <timer_increment> milliseconds later. 
          
 
                setTimeout( 
          " 
          ShowAndGrowElement() 
          " 
          , timer_increment)
    }
    window.ShowAndGrowElement  
          = 
           ShowAndGrowElement
  ]] 
          > 
          </ 
          script 
          > 
          
   
          < 
          rect  
          x 
          ="1" 
           y 
          ="1" 
           width 
          ="398" 
           height 
          ="198" 
          
        fill 
          ="none" 
           stroke 
          ="blue" 
           stroke-width 
          ="2" 
          /> 
          
   
          < 
          g  
          transform 
          ="translate(50,150)" 
           fill 
          ="red" 
           font-size 
          ="7" 
          > 
          
     
          < 
          text  
          id 
          ="TextElement" 
          >SVG 
          </ 
          text 
          > 
          
   
          </ 
          g 
          > 
          
 
          </ 
          svg 
          > 
         

 

實用參考：
腳本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開發中心：https://developer.mozilla.org/en/SVG
熱門參考：http://www.chinasvg.com/
官方文檔：http://www.w3.org/TR/SVG11/

SVG動畫技術：http://msdn.microsoft.com/zh-cn/library/gg589525(v=vs.85).aspx