TP Notes

2020年11月18日星期三

CSS 狀態改變動畫

之前寫了一篇 [CSS 動畫](https://yhtpnotes.blogspot.com/2020/05/css.html) 時，忘了應該先寫這個狀態變化的動畫，大部份的應用都是用在滑鼠移到上面時的用動畫方式改變狀態，實際上，這個功能對於所有狀態變化都可以變成動畫
  
參數說明：

```
transition                  [動畫持續時間] [delay 多久開始] [timing-function]
transition-delay            [delay 多久開始]
transition-duration         [動畫持續時間]
transition-property         [指定改變的屬性]
transition-timing-function  [動畫 timing]
  
```
  
我個人偏好不使用 transition-property ，這樣可以更自由的使用這個功能
  
首先先來一個最簡單的範例:

在 **#a11181_div:hover** 裡頭加了 **transition: 1s** 後
，滑鼠移過去時，顏色會慢慢的變成黃色，同時長度從 100px 慢慢變成 200px，
當滑鼠移開時，因為在 **#a11181_div** 加上了 **transition: 0.2s;** 
，會以動畫方式很快的恢復原狀，如果沒有加上 **transition** ，狀態會瞬間改變，不會有動畫效果，另外還有加上 **transition-delay** , 所以會等 0.5 秒後才開始動畫 
  
而下面的 [SET] 和 [UNSET] 是利用 javascript 去做設定，結果一樣會以動畫顯示, 當用 javascript 設定時，是直接寫在元件上，所以 hover 改變 width 就沒作用了，而 [CSS SET] 和 [CSS UNSET] 的是直接修改本來的 CSS 設定，所以不影響 hover 。
  
```
$mmcode(r1)
```
<div class="mmresult r1">
<style id="a11181_css">
#a11181_div
{
  width: 100px;
  height: 100px;
  background-color:#f00;
  transition: 0.2s;
  transition-delay:0.5s;
  transition-timing-function: linear; 
}
#a11181_div:hover
{
  background-color:#ff0;
  width:200px;
  transition: 1s cubic-bezier(0.6, -0.6, 0.1, 1.6);
}
#a11181_set button
{
  font-size:1em;
}
</style>

<div id="a11181_div">
</div>
<br>
<div id="a11181_set">
<button id="a11181_bb">SET</button>
<button id="a11181_bb1">UNSET</button>
<button id="a11181_bb2">CSS SET</button>
<button id="a11181_bb3">CSS UNSET</button>
</div>
<script>
$("#a11181_bb").on("click",function()
{
  $("#a11181_div").css("width","300px");
});
$("#a11181_bb1").on("click",function()
{
  $("#a11181_div").css("width","");
});
$("#a11181_bb2").on("click",function()
{ 
  var rc=cssjson("#a11181_css"); 
  rc.set("#a11181_div",
  {
    width:"300px"
  });
});
$("#a11181_bb3").on("click",function()
{ 
  var rc=cssjson("#a11181_css"); 
  rc.set("#a11181_div",
  {
    width:"100px"
  });
});
</script>  
</div>

2020年11月14日星期六

戲說線段

線段有很多屬性，無意間看到有人利用這些屬性做動畫相當有意思，決定先來整理線段的屬性
  
# stroke-linecap

<div style="display:inline-block">
圖1：<br>polyline<br>
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100">
<polyline id="a11141_line1" points="30,50 100,30 170,70 30,70" stroke="#000" fill="#0000" />
</svg>
</div>

<div style="display:inline-block">
圖2：(預設)<br>stroke-linecap="butt"<br>
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100">
<polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=15 stroke-linecap="butt"/>
<use xlink:href="#a11141_line1"/>
</svg>
</div>

<div style="display:inline-block">
圖3：<br>stroke-linecap="round"<br>
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100">
<polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=15 stroke-linecap="round" />
<use xlink:href="#a11141_line1"/>
</svg>
</div>

<div style="display:inline-block">
圖4：<br>stroke-linecap="square"<br>
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100">
<polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=15 stroke-linecap="square" />
<use xlink:href="#a11141_line1"/>
</svg>
</div>

# stroke-linejoin

<div style="display:inline-block">
圖1：(預設)<br>stroke-linejoin="miter"<br>
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100">
<polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=15 stroke-linejoin="miter" />
<use xlink:href="#a11141_line1"/>
</svg>
</div>

<div style="display:inline-block">
圖2：<br>stroke-linejoin="round"<br>
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100">
<polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=15 stroke-linejoin="round" />
<use xlink:href="#a11141_line1"/>
</svg>
</div>

<div style="display:inline-block">
圖3：<br>stroke-linejoin="bevel"<br>
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100">
<polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=15 stroke-linejoin="bevel" />
<use xlink:href="#a11141_line1"/>
</svg>
</div>

<div style="display:inline-block">
圖4：(可能無作用)<br>stroke-linejoin="miter-clip"<br>
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100">
<polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=15 stroke-linejoin="miter-clip" />
<use xlink:href="#a11141_line1"/>
</svg>
</div>

<div style="display:inline-block">
圖5：(可能無作用)<br>stroke-linejoin="arcs"<br>
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100">
<polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=15 stroke-linejoin="arcs" />
<use xlink:href="#a11141_line1"/>
</svg>
</div>

# stroke-dasharray

這是一個陣列型態，奇數為要顯示的點數，偶數為不顯示的點數<br>
[10,20] 等於 [10,20,10,20,....] 換言之如果陣列是基數
[10,20,30] 等於 [10,20,30,10,20,30,....]

<div style="display:inline-block">
圖1：<br>stroke-dasharray="10"<br>
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100">
<polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=10 stroke-dasharray="10" />
<use xlink:href="#a11141_line1"/>
</svg>
</div>

<div style="display:inline-block">
圖2：<br>stroke-dasharray="10,20"<br>
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100">
<polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=10 stroke-dasharray="10,20" />
<use xlink:href="#a11141_line1"/>
</svg>
</div>

<div style="display:inline-block">
圖3：<br>stroke-dasharray="10,20,30"<br>
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100">
<polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=10 stroke-dasharray="10,20,30" />
<use xlink:href="#a11141_line1"/>
</svg>
</div>

# stroke-dashoffset

虛線起始的點數

<div style="display:inline-block">
圖1：<br>stroke-dashoffset="0"<br>
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100">
<polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=10 stroke-dasharray="20" stroke-dashoffset="0"/>
<use xlink:href="#a11141_line1" stroke-dasharray="20" stroke-dashoffset="0"/>
</svg>
</div>

<div style="display:inline-block">
圖2：<br>stroke-dashoffset="10"<br>
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100">
<polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=10 stroke-dasharray="20" stroke-dashoffset="10"/>
<use xlink:href="#a11141_line1" stroke-dasharray="20" stroke-dashoffset="10"/>
</svg>
</div>

<div style="display:inline-block">
圖3：<br>stroke-linecap="round"<br>
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100">
<polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=10 stroke-dasharray="20" stroke-dashoffset="0" stroke-linecap="round"/>
<use xlink:href="#a11141_line1" stroke-dasharray="20" stroke-dashoffset="0"/>
</svg>
</div>

<hr>

利用 stroke-dashoffset 來產生動畫
  
```
$mmcode(r1)
```
<div class="mmresult r1">
<style>
@keyframes a11142_k1
{
  100%
  {
    stroke-dashoffset:502.655;
  }
}
#a11142_circle
{
  animation:a11142_k1 3s infinite linear
}
</style>
  
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="200">
  
<circle id="a11142_circle" cx=100 cy=100 r=80 stroke="#fa0" fill="#0000" stroke-width=20 stroke-dasharray="20 80.53" stroke-dashoffset="0" stroke-linecap="round"/>

</svg>
</div>
  
搭配 path 可以做出相當有意思的動畫

```
$mmcode(r3)
```
<div class="mmresult r3">
<style>
@keyframes a11143_k1
{
  100%
  {
    stroke-dashoffset:464;
  }
}
#a11143_path
{
  animation:a11143_k1 3s infinite linear
}
</style>
  
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100">

</svg>
</div>

也可以用在滑鼠移動時的動態效果

```
$mmcode(r4)
```
<div class="mmresult r4">
<style>
#a11144_svg:hover #a11144_line1
{
    stroke-dashoffset:-125;
    transition:0.4s ease-in-out;
}
#a11144_svg:hover #a11144_line2
{
    stroke-dashoffset:-103;
    transition:0.4s ease-in-out;
}
#a11144_line1
{
  stroke-width:2;
  fill:none;
  stroke:#f00;
  stroke-dasharray:40 135;
  stroke-dashoffset:0;
  transition:1s ease-in-out;
}
#a11144_line2
{
  stroke-width:2;
  fill:none;
  stroke:#00f;
  stroke-dasharray:40 115;
  stroke-dashoffset:0;
  transition:1s ease-in-out;
}
</style>

</svg>
</div>

2020年11月13日星期五

Inline SVG

SVG 本身被視為圖檔，那麼能不能畫好一個 SVG 後，即時拿來用在 html 中的 img 或 background-image 呢 ? 方法還是有的，只是必須透過 javascript 才行
  
主要用的技巧是 **<font color="#00f">data:image/svg+xml;base64,[data]</font>** <br>
那麼如果不用 base64 呢 ? 也可以用 **<font color="#00f">data:image/svg+xml;charset=UTF-8,[data]</font>** 或 **<font color="#00f">data:image/svg+xml;utf8,[data]</font>** 而這個 **[data]** 必須用 escape 轉換
  
在實測過程中發現，平常使用 SVG 時並沒有加上完整檔頭，以致於花了些時間才找到圖片出不來的原因

SVG 檔頭宣告 : **<font color="#00f">xmlns="http://www.w3.org/2000/svg"</font>**
  
```
  <svg xmlns="http://www.w3.org/2000/svg"></svg>  
```
  
範例如下 :
  
```
$mmcode(r1)
```
  
<div class="mmresult r1">
<style>
#a1113a_iddiv
{
  width:300px;
  height:200px;
  background-image:url(bomb.png);
  background-size:50px;
}
</style>  
<svg id="a1113a_idsvg" xmlns="http://www.w3.org/2000/svg" style="background-color:#ff0" width=200 height=200>
<path d="M30,200 L100,0 L170,200 L0,70 L200,70Z" fill="#00f"/>
</svg>

$("#a1113a_idimg").attr("src",k8);
  $("#a1113a_idimg1").attr("src",kt);
  $("#a1113a_idsvg path").attr("fill","#e70");

kk=document.querySelector("#a1113a_idsvg").outerHTML;
  k8="data:image/svg+xml;base64,"+btoa(kk);

$("#a1113a_iddiv").css("background-image","url("+k8+")");
});
</script>

</div>

Translate

2020年11月18日 星期三