TP Notes: SVG 動畫

SVG 的動畫相當有趣也相當靈活，甚至可以互動，感覺上已經超越單純的動畫了
  
跟動畫相關的指令有 set, animate, animateTransform, animateMotion 
  
# set
  
首先先來一個 set 的範例

```
attributeName="屬性"
begin="開始的時機"
to="要改的值"
  
```
begin 可以用 1s(1秒) , 100ms (0.1秒) , 或各種 event，
當時機為 **時間** 時，代表的是該物件出現後開始計算時間
  
詳細的資料可以看[這裡](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin)
  
```
$mmcode(r1)  
```

<div class="mmresult r1">  
<div id="a120201_svg1">
<svg height="70">
<defs>
<g id="a120201_g1"> 
<rect id="a120201_rect1" width="50" height="50" x="10" y="10" fill="#f00">
  <set attributeName="x" to="20" begin="1s"/>
  <set attributeName="x" to="30" begin="2s"/>
  <set attributeName="x" to="40" begin="3s"/>
  <set attributeName="x" to="50" begin="4s"/>
  <set attributeName="x" to="60" begin="5s"/>
  <set attributeName="x" to="70" begin="6s"/>
  <set attributeName="x" to="80" begin="7s"/>
  <set attributeName="x" to="90" begin="8s"/>
</rect>
</g>
</defs>
<use xlink:href="#a120201_g1"/>
</svg>
</div>
<div id="a120201_svg2">
</div>
<br>
<button id="a120201_b1" style="font-size:1em;background-color:#aff">GO</button>
<script>
$(function() 
{ 
  $("#a120201_b1").on("click",function()
  {
    let i; 
    let hh="";
    for (i=0;i<30;i++)
    {
      hh+='<set attributeName="x" to="'+(i*10+20)+'" begin="'+((i+1)*50)+'ms"/>';
    }
    $("#a120201_rect1").html(hh);
    $("#a120201_svg1").css("display","none");
    $("#a120201_svg2").html('<svg width="100%" height="70">'
                            +$("#a120201_g1").html()+'</svg>');
  });
})
</script>
</div>

# animate

```
attributeName="屬性"
begin="開始的時機"
end="結束的時機"
from="開始的值"，(可以用 values 取代)
to="結束的值"，(可以用 values 取代)
by="相對from的值"，例如 from="30", to="50" 最後的值是 50 , 如果用 by="50" , 最後的值是 80
values="要改變的值" ，可以用分號區挌，指定多個值，例如: "10;50;10"
keyTimes="運行時間比"，用分號區格，為 0 到 1 的數值，用來指定每一個 values 運行時間 
keySplines="貝式曲線的時間"，四個值，和 css 的 Cubic Bezier 很像，必須設定 calcMode="spline" 才有作用
calcMode="模式"，discrete, linear (預設) , paced, spline  
dur="時間"  
max="時間"，動畫執行到這個時間後停止
repeatCount="重覆次數"，indefinite 為不斷重覆
restart="觸發 begin 後的動作"，always(預設)，whenNotActive(啟動狀態不重新開始)，never(不重新啟動)
fill="end 觸發後的狀態"，freeze(凍結在目前狀態)，remove(回到初始狀態)
accumulate="累加"，none(預設)，sum(累加), 在累加狀態時，動畫 repeat 不會回到初始狀態
  
```
  
先來一個簡單的範例，values 和 keyTimes 的數量必須一樣，keyTimes 的時間比由 0 到 1 ，數值必須越來越大
  
紅色方塊沒有設定 keyTimes ，時間比例和數值是平均分布，
等同 keyTimes="0;0.33;0.67;1"<br>
紫色方塊設定 calcMode="discrete"，沒有動畫直接跳過去<br>
綠色方塊設定 keyTimes="0;0.6;0.9;1" ，一開始走很慢，後面跑很快<br>
橘色方塊設定 calcMode="paced" , 行走速度不受分段影響<br>
藍色方塊設定了 keySplines ，要記得加上 calcMode="spline" 
  
```
$mmcode(r2)
```
  
<div class="mmresult r2">
<svg width="300" height="300">
<rect fill="#f00" x="10" y="10" width="40" height="40">
  <animate attributeName="x" values="10;50;200;10" begin="0s" dur="2s" repeatCount="indefinite" />
</rect>
<rect fill="#a0f" x="10" y="60" width="40" height="40">
  <animate attributeName="x" values="10;50;200;10" begin="0s" dur="2s" calcMode="discrete" repeatCount="indefinite" />
</rect>
<rect fill="#0a0" x="10" y="110" width="40" height="40">
  <animate attributeName="x" values="10;50;200;10" begin="0s" dur="2s" keyTimes="0;0.6;0.9;1" repeatCount="indefinite" />
</rect>
<rect fill="#fa0" x="10" y="160" width="40" height="40">
  <animate attributeName="x" values="10;50;200;10" begin="0s" dur="2s" keyTimes="0;0.6;0.9;1" calcMode="paced" repeatCount="indefinite" />
</rect>
<rect fill="#00f" x="10" y="210" width="40" height="40">
  <animate attributeName="x" values="10;200;10" begin="0s" dur="2s" keyTimes="0;0.5;1" keySplines="0.5 0 0.5 1;0 0.5 0.75 0" calcMode="spline" repeatCount="indefinite" />
</rect>
</svg>
</div>
  
# begin , end
  
svg 動畫中的 begin 和 end 很有意思，可以做到基本的互動，讓動晝不再只是動畫，<br>
可以用 `<a xlink:href="#id">click</a>` 來觸發 begin ，也可以從 html 去觸發，方法如下：<br>
詳細 API 可以參考[這裡](https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimationElement)
  
```
  document.getElementById('animate ID').beginElement();
  
```

begin 和 end 的值如下:
  
```
  
時間(1s,100ms)       時間到開始執行
id.[event]          例如 id.click ，當 id 被點擊時觸發，可以用 id.click+1s 表示點擊後過1秒
id.begin            當 id 動畫開始時
id.end              當 id 動畫結束時
id.repeat(n)        當 id 動畫重覆 n 次後，(經實測，在 iphone 及 safari 無作用)
  
[event 列表]
  
focus, blur, focusin, focusout, activate, auxclick, 
click, dblclick, mousedown, mouseenter, mouseleave, 
mousemove, mouseout, mouseover, mouseup, 
wheel, beforeinput, input, keydown, keyup, 
compositionstart, compositionupdate, compositionend, 
load, unload, abort, error, select, resize, scroll,
  
```

來看一個範例  
  
```
$mmcode(r3)
```
  
<div class="mmresult r3">
<style>
.a120203_s1
{
  font-size:20px;
  dominant-baseline:hanging;
}
</style>
<button onclick="document.getElementById('a120203_a1').beginElement();" style="font-size:1.5em;">HTML 的點我開始</button><br><br>
                                                                   
<svg width="300" height="200">
<a xlink:href="#a120203_a1">
  <rect x=8 y=18 width=84 height=22 fill="#ff0"/>
  <text x="10" y="20" class="a120203_s1">點我開始</text>
</a>
<g id="a120203_end1">
  <rect x=98 y=18 width=84 height=22 fill="#0ff"/>
  <text x="100" y="20" class="a120203_s1">點我停止</text>
</g>
<g id="a120203_c1" stroke-width="1" fill="#000">
  <text x="250" y="76">方塊一</text>
  <text x="250" y="126">方塊二</text>
  <animate attributeName="stroke" values="#000;#f00;#fa0;#00f" dur="2s" repeatCount="indefinite" begin="a120203_c1.mouseover" end="a120203_c1.mouseout" fill="freeze"/>
</g>
<rect fill="#f00" x="10" y="50" width="40" height="40">
  <animate id="a120203_a1" attributeName="x" values="10;200;10" begin="indefinite;a120203_a1.repeat(3)" end="a120203_end1.click" dur="2s" repeatCount="indefinite" />
  <set attributeName="fill" to="#0f0" begin="a120203_a1.repeat(1)"/>
  <set attributeName="fill" to="#ff0" begin="a120203_a1.repeat(2)"/>
  <set attributeName="fill" to="#f00" begin="a120203_a1.repeat(3)"/>
</rect>
<rect fill="#00f" x="10" y="100" width="40" height="40">
  <animate attributeName="x" values="10;200;10" begin="a120203_a1.end+600ms" end="a120203_end1.click" dur="2s" repeatCount="indefinite" />
</rect>
</svg>  
  
</div>  
  
# accumulate
  
這個累加的設定，我還沒想到應用的地方，範例如下 :
  
每次 repeat 顏色都會改變，有加 accumulate="sum" 的方塊，在 repeat 時並沒有回到初始狀態，
而是以當前位置為原點，by=10 跑到 by=50 (以第一次 repeat 來說，會從 x=60 開始)
  
這個範例在 chrome 和 firefox 的結果又有點不同，我覺得 firefox 比較正確
  
```
$mmcode(r4)
```
  
<div class="mmresult r4">
<svg width="300" height="200">
<text x=10 y=20>accumulate="none"</text>
<rect fill="#f00" x="10" y="30" width="40" height="40">
  <animate id="a120204_a1" attributeName="x" values="10;50" begin="0s;a120204_a1.repeat(3)" dur="2s" repeatCount="indefinite" ></animate>
  <set attributeName="fill" to="#0f0" begin="a120204_a1.repeat(1)"></set>
  <set attributeName="fill" to="#fa0" begin="a120204_a1.repeat(2)"></set>
  <set attributeName="fill" to="#f00" begin="a120204_a1.repeat(3)"></set>
</rect>
<text x=10 y=110>accumulate="sum"</text>
<rect fill="#f00" x="10" y="120" width="40" height="40">
  <animate id="a120204_a2" attributeName="x" values="10;50" begin="0s;a120204_a2.repeat(3)"  dur="2s" repeatCount="indefinite" accumulate="sum"></animate>
  <set attributeName="fill" to="#0f0" begin="a120204_a2.repeat(1)"></set>
  <set attributeName="fill" to="#fa0" begin="a120204_a2.repeat(2)"></set>
  <set attributeName="fill" to="#f00" begin="a120204_a2.repeat(3)"></set>
</rect>
</svg>  
</div>

# animateTransform  
  
除了本來 animate 的參數外，還多了幾個
  
```
type="transform 的種類"  
additive="取代或累加"，replace(預設), sum(效果累加)   
  
```

範例如下 :
  
```
$mmcode(r5)
```
<div class="mmresult r5">
圖1： 設定 transform scale 從 1 到 2<br>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa">
  <rect x="40" y="40" width="40" height="40" fill="#f00">
    <animateTransform attributeName="transform" type="scale" values="1;2" dur="2s" begin="0s" repeatCount="indefinite"/>
  </rect>
</svg><br><br>
圖2： 設定 transform scale 從 1 到 2 ，並且 translate 移動方塊中心點，這個時候必須加上 <font color="#00f">additive="sum"</font> ，兩個 transform 的設定才會累加<br>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa">
  <rect x="40" y="40" width="40" height="40" fill="#f00">
    <animateTransform attributeName="transform" type="translate" values="0,0;-60,-60" dur="2s" begin="0s" repeatCount="indefinite" additive="sum"/>
    <animateTransform attributeName="transform" type="scale" values="1;2" dur="2s" begin="0s" repeatCount="indefinite" additive="sum"/>
  </rect>
</svg>
</div>

# animateMotion
  
這個功能相當有趣，可以規劃一條路徑，讓物件跟著路徑跑，除了本來 animate 的參數外，還多了一些參數
  
```
path="和 path 的 d 相同"
rotate="角度"，auto(隨著路線自動轉)|auto-reverse(隨著路線自動轉再加 180 度)
keyPoints="設定中間點"，為 0 到 1 的值，搭配 keyTimes 來調整每一段的速度，要記得設定 calcMode 才有作用  
```
  
除了參數外，在 animateMotion 中可以使用 mpath 來取代參數 path , 這樣可以利用 xlink:href 來使用別處定義好的路徑

先來一個範例：
  
紅球用參數 path 來設定路徑，藍色方塊和綠三角使用 mpath 來串接 #a12026_p1 這條路徑，
綠三角有設定 keyPoints 和 keyTimes，讓路徑不同區段有不同速度
  
```
$mmcode(r6)
```
  
<div class="mmresult r6">
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
<g stroke="#000" fill="none">
<path id="a120206_p1" d="M30,30 Q30 300 230,30z"/>
<circle cx="0" cy="0" r="10" fill="#f006">
  <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" path="M30,30 Q30 300 230,30z"/>
</circle>
<rect x="-30" y="0" width="60" height="20" fill="#00f6">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
  <mpath xlink:href="#a120206_p1"/>
</animateMotion>
</rect>
<path d="M0,0 L10,30 L-10,30z" fill="#0f06">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto-reverse" keyPoints="0;0.65;1" keyTimes="0;0.9;1" calcMode="linear">
  <mpath xlink:href="#a120206_p1"/>
</animateMotion>
</path>
</g>
</svg>
</div>  
  
那麼最後就用一個SVG的時鐘做為這一篇的結束

```
$mmcode(r7)  
```
<div class="mmresult r7">
<style>
#a120207_g1
{
  stroke:#00f
}
#a120207_d1
{
  stroke:#f00
}
</style>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns:ev="http://www.w3.org/2001/xml-events" stroke="#000">
<circle id="a120207_o1" cx=150 cy=150 r=140 fill="none" stroke="#000" stroke-width="2"/>
<g id="a120207_g3">
<g id="a120207_g2">
<g id="a120207_g1">
<line x1=10 y1=150 x2=40 y2=150 stroke-width="3"/>
<defs>
<line id="a120207_d1" x1=10 y1=150 x2=20 y2=150/>
</defs>
<use xlink:href="#a120207_d1" transform="rotate(6,150,150)"/>
<use xlink:href="#a120207_d1" transform="rotate(12,150,150)"/>
<use xlink:href="#a120207_d1" transform="rotate(18,150,150)"/>
<use xlink:href="#a120207_d1" transform="rotate(24,150,150)"/>
</g>
<use xlink:href="#a120207_g1" transform="rotate(30,150,150)"/>
<use xlink:href="#a120207_g1" transform="rotate(60,150,150)"/>
</g>
<use xlink:href="#a120207_g2" transform="rotate(90,150,150)"/>
</g>
<use xlink:href="#a120207_g3" transform="rotate(180,150,150)"/>
<line id="a120207_hh" x1=150 y1=150 x2=150 y2=80 stroke-width="10">
  <animateTransform attributeName="transform" type="rotate" values="0,150,150;360,150,150" dur="1440s" repeatCount="indefinite"/>
</line>
<line id="a120207_mm" x1=150 y1=150 x2=150 y2=50 stroke-width="6">
  <animateTransform attributeName="transform" type="rotate" values="0,150,150;360,150,150" dur="120s" repeatCount="indefinite"/>
</line>
<line id="a120207_ss" x1=150 y1=150 x2=150 y2=30 stroke-width="2" stroke="#f00">
  <animateTransform attributeName="transform" type="rotate" values="0,150,150;360,150,150" dur="2s" repeatCount="indefinite"/>
</line>
<circle id="o2" cx=150 cy=150 r=8/>
</svg>
  
</div>

TP Notes

2020年12月2日星期三

SVG 動畫

沒有留言:

張貼留言

2020年12月2日 星期三

SVG 動畫

沒有留言:

張貼留言

2020年12月2日星期三