我正在嘗試使用RaphaelJS來翻譯或創建類似的代碼。

Question

我正在嘗試使用RaphaelJS來翻譯或創建類似的代碼。如果您查看代碼，您會看到我正在嘗試使用css和js創建一個動畫路徑。

http://plnkr.co/edit/FC2qiZumzgjKSJOs6Zm5?p=info

var spinner = function() { 
this.transition = function() { 
var path = document.querySelector('#spinner-wrapper .spinner #main-path'); 
path.style.transition = path.style.WebkitTransition = 'none'; 
path.style.strokeDasharray = '205.951'; 
path.style.strokeDashoffset = 430; 
path.getBoundingClientRect(); 
path.style.strokeDashoffset = '0'; 
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 3s linear'; 
}; 

this.startInterval = function(immediate,time) { 
if(immediate){ 
    setTimeout(transition,0); 
} 
this.interval = setInterval(function() { 
    transition(); 
}, time); 
return this.interval; 
}; 

this.start = function() { 
clearInterval(this.interval); 
startInterval(true,2700); 
}; 

this.stop = function() { 
clearInterval(this.interval); 
startInterval(false,0); 
}; 

return this; 
}; 

Answer 1

我使用jQuery和RaphaelJS。由於某些原因，它在IE瀏覽器中仍然不起作用。也許你可以弄清楚這一點。

http://jsfiddle.net/shojib/ceqs86go/

var paper = new Raphael('canvas'); 
var pathString = "M16.47,19.938c7-0.5,4.5-10.5-2-7c-7,3.5,1,13,7.5,10 c13.5-7-9.5-27-16-6.5c-4.5,16,22,17,26,2c4.5-15.5-15-22.5-25-11.5c-5.5,6.5-9,16-0.5,21.5c4,2.5,15,6,19,2.5 c-3-3.5-7.5-8-9.5-10.5"; 


var pattern2 = paper.path(pathString); 
pattern2.attr({fill: 'none',stroke: '#ffffff',"stroke-miterlimit": '10','stroke-opacity': '1'}); 

var pattern1 = paper.path(pathString); 
pattern1.attr({fill: 'none',stroke: '#CD5300',"stroke-miterlimit": '10','stroke-opacity': '1'}); 

$(pattern1.node).css({ 
'stroke-dasharray': '210.991px', 
'stroke-dashoffset': '430px' 
}); 

$(pattern1.node).animate({ 
'stroke-dashoffset': '0' 
},{ 
duration: 3000, 
easing: 'linear' 
});