Created by Jerry Wang, last modified on Aug 06, 2014 Go to start of metadata
建立一個新的BSP application和一個新的view, 将wiki末尾的html source code copy 進view.
建立兩個mime object，類型為javascript:
實作原理:
index.js裡以100毫秒為時間間隔定期執行一個匿名函數. 在這個函數裡，動态設定目前progress circle的class。
可以在chrome console裡觀察到該函數周期性的執行:
在html file裡，每個1%的進度都有一組對應的class。每個class通過transform 實作動畫效果。
可以在chrome 裡觀察到degree的變化:
ndex.js:
var $last = $(’.progress-radial’).last();
setInterval(function(){
var currentClass = $last.attr(‘class’).split(’ ')[1];
var currentPercentage = currentClass.substring(9,12);
var newPercentage = (parseInt(currentPercentage) + 1);
if (newPercentage > 100) {
newPercentage = 1;
}
var newClass = ‘progress-’ + newPercentage;
console.log("remove current class: " + currentClass);
console.log("add new class: " + newClass);
$last.removeClass(currentClass).addClass(newClass);
},100);
該例子來自:
http://www.html5tricks.com/css3-3d-circle-progress.html