2012-07-16 145 views
0

有人可以请给我一个解决方案 我从phrogz.net这个库, ,你可以在这里看到(http://phrogz.net/SVG/animation_on_a_curve.html沿动画SVG路径一个div

function CurveAnimator(from,to,c1,c2){ 
    this.path = document.createElementNS('http://www.w3.org/2000/svg','path'); 
    if (!c1) c1 = from; 
    if (!c2) c2 = to; 
    this.path.setAttribute('d','M'+from.join(',')+'C'+c1.join(',')+' '+c2.join(',')+' '+to.join(',')); 
    this.updatePath(); 
    CurveAnimator.lastCreated = this; 
} 
CurveAnimator.prototype.animate = function(duration,callback,delay){ 
    var curveAnim = this; 
    // TODO: Use requestAnimationFrame if a delay isn't passed 
    if (!delay) delay = 1/40; 
    clearInterval(curveAnim.animTimer); 
    var startTime = new Date; 
    curveAnim.animTimer = setInterval(function(){ 
    var now = new Date; 
    var elapsed = (now-startTime)/1000; 
    var percent = elapsed/duration; 
    if (percent>=1){ 
     percent = 1; 
     clearInterval(curveAnim.animTimer); 
    } 
    var p1 = curveAnim.pointAt(percent-0.01), 
     p2 = curveAnim.pointAt(percent+0.01); 
    callback(curveAnim.pointAt(percent),Math.atan2(p2.y-p1.y,p2.x-p1.x)*180/Math.PI); 
    },delay*1000); 
}; 
CurveAnimator.prototype.stop = function(){ 
    clearInterval(this.animTimer); 
}; 
CurveAnimator.prototype.pointAt = function(percent){ 
    return this.path.getPointAtLength(this.len*percent); 
}; 
CurveAnimator.prototype.updatePath = function(){ 
    this.len = this.path.getTotalLength(); 
}; 
CurveAnimator.prototype.setStart = function(x,y){ 
    var M = this.path.pathSegList.getItem(0); 
    M.x = x; M.y = y; 
    this.updatePath(); 
    return this; 
}; 
CurveAnimator.prototype.setEnd = function(x,y){ 
    var C = this.path.pathSegList.getItem(1); 
    C.x = x; C.y = y; 
    this.updatePath(); 
    return this; 
}; 
CurveAnimator.prototype.setStartDirection = function(x,y){ 
    var C = this.path.pathSegList.getItem(1); 
    C.x1 = x; C.y1 = y; 
    this.updatePath(); 
    return this; 
}; 
CurveAnimator.prototype.setEndDirection = function(x,y){ 
    var C = this.path.pathSegList.getItem(1); 
    C.x2 = x; C.y2 = y; 
    this.updatePath(); 
    return this; 
}; 

,这里是我们如何使用它jQuery:

var ctx = document.querySelector('canvas').getContext('2d'); 
ctx.fillStyle = 'red'; 

var curve = new CurveAnimator([50, 300], [350, 300], [445, 39], [1, 106]); 

curve.animate(5, function(point, angle) { 
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
    ctx.fillRect(point.x-10, point.y-10, 20, 20); 
});​ 

它的伟大,但事情是我需要更多的曲线点,所以我想给它一个SVG路径。 我的问题是,我如何使用这个库与我自定义的SVG路径? 我的SVG路径是这样的:

<path class="fil0 str0" d="M-13.5003 40.5c0,0 198,-14.0003 332,106 134,120 326,275 387,296 61.0002,20.9999 162.647,49.157 207,110 234,321 367,-579 -89.9119,-451.912 -82.3825,22.9144 -117.088,216.912 -117.088,216.912"/> 

我看到的东西有关更改this.path.setAttribute到初始化,然后给它的SVG路径,但我不知道如何做到这一点,如何调用该函数之后。

回答

1

可以更换的构造,使其接受您的路径:

function CurveAnimator(path) { 
    this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); 
    this.path.setAttribute('d', path); 
    this.updatePath(); 
    CurveAnimator.lastCreated = this; 
} 

你会这样称呼它:

var ctx = document.querySelector('canvas').getContext('2d'); 
ctx.fillStyle = 'red'; 

var path = "M-13.5003 40.5c0,0 198,-14.0003 332,106 134,120 326,275 387,296 61.0002,20.9999 162.647,49.157 207,110 234,321 367,-579 -89.9119,-451.912 -82.3825,22.9144 -117.088,216.912 -117.088,216.912"; 
var curve = new CurveAnimator(path); 

curve.animate(5, function(point, angle) { 
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
ctx.fillRect(point.x-10, point.y-10, 20, 20); 
});​ 
+0

好吧,它不是那么晚!非常感谢。 – 2012-12-27 19:51:13

+2

我认为这对某个人会磕磕绊绊的问题很有帮助,但很高兴现在对您来说不算太晚! – 2012-12-27 23:54:18