css - 我正在尝试使用 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'
});