網頁自定義進度條動畫(Process Bar Animate)【二】

上一篇講解了jquery progress-bars-svg-image套件，這一篇就是要正式來講用css動畫和jquery套件結合的自定義進度條動畫(不支援IE)。

首先根據jquery progress-bars-svg-image的邏輯下去寫，用一個div包兩個svg，並且做圖層、相對定位跟絕對定位。
(svg可以自己設計或是去網路上找免費的svg來用，自己設計的我會把svg的程式碼再做些微修改，比如拿掉裡面的class跟style之類的。記得viewbox那些不要拿掉)

group >> 包覆進度條的div class，設為相對定位
top >> 上方跑動畫的svg，設為絕對定位以及將圖層設到上面
bottom >> 下方固定的svg
fill >>填滿svg的屬性
clip-path:inset(0% 100% 0% 0%) >> 把上方svg固定在最左邊
可以調整100%為其他%數來先看效果

<style>
.group{
  position:relative;
}
.group .top{
  z-index:2;
  position:absolute;
  clip-path:inset(0% 100% 0% 0%);
  fill:#f3adc4;
}

.group .bottom{
  fill:#5e5c5c;
}
</style>

<div class="group">
	<svg class="top">
		...
	</svg>
	<svg class="bottom">
		...
	</svg>
</div>

接下來做一個css自定義動畫效果@keyframes，我將它取名為percent，先把top的inset100%改成87%，然後animation呼叫剛剛定義好的percent，後面的2s是這個動畫跑的時間，如果要一直重複這個動畫的話，就在後面加上infinite，但我們是要做一個觸發事件再重做動畫，所以先不放。這個動畫很簡單，就是從左(100%)到右(87%)，動畫結束之後停在87%。

<style>
	@keyframes percent {
  		from { 
        clip-path: inset(0% 100% 0% 0%);
        }
  		to { 
        clip-path: inset(0% 87% 0% 0%);
        }
	}
    .group .top{
     clip-path: inset(0% 87% 0% 0%);
  		...
     animation: percent 2s;
	}
</style>

再來我們要加上jquery套件-jquerykeyframes，來簡單說一下我們需要用的部分。

$.keyframe.define >> 設定動畫的json，除了多一個name來定義該keyframe的名稱外，基本上與css的keyframe相同

$('...').playKeyframe >> 播放動畫的事件，需含有播放自定義動畫的名稱(name)、動畫時間(duration)、速度曲線(timingFunction)、動畫完成後事件/回饋(complete)

由於想要網頁剛載入就會做一次動畫，因此先將數值放入之後，馬上呼叫動畫。
(記得把css改回沒有animation的狀態)

<script>
	$.keyframe.define([{
      name: 'a',
      from: {
        'clip-path': 'inset(0% 100% 0% 0%)'
      },
      to: {
        'clip-path': 'inset(0% 67% 0% 0%)'
      }
    }, {
      name: 'b',
      from: {
        'clip-path': 'inset(0% 100% 0% 0%)'
      },
      to: {
        'clip-path': 'inset(0% 85% 0% 0%)'
      }
    }]);

	$('.top').playKeyframe({
   	name: 'a',
   	duration: "3s",
   	timingFunction: 'linear',
   	complete: console.log('over')
	});
</script>

接下來就是呼叫播放動畫事件的簡單方法-使用按鈕，還可以用按鈕切換動畫效果。在button中加入自定義屬性value，並將自定義動畫的名稱填進去，在jquery按鈕事件做呼叫。

<button class="btn" value="a">name:a</button>
<button class="btn" value="b">name:b</button>

<script>
	$.keyframe.define([{
      name: 'a',
		...
    }, {
      name: 'b',
		...
    }]);

	$('.top').playKeyframe({
   		...
	});
   $('.btn').click(function(){
  	var value = $(this).attr('value');
            $('.top').playKeyframe({
            name: value,
            duration: "3s",
            timingFunction: 'linear',
            complete: console.log('over')
          });
});
</script>

這樣子就完成了我們的自定義進度條動畫了!如果想做svg圓餅圖的進度條動畫的話，有很多jquery套件可以拿來用，也可以用這個原理去做修改喔!一樣附上codepen給大家做參考。

Written by 樂水