使用jQuery在SVG路径上设置动画的自定义计时
我正在使用@phrogz编写的库http://phrogz.net/SVG/animation_on_a_curve.html 我做了一些更改,因此我可以放置自己的SVG路径,而不是bezier点, 因此,我的代码如下所示:使用jQuery在SVG路径上设置动画的自定义计时,jquery,animation,svg,Jquery,Animation,Svg,我正在使用@phrogz编写的库http://phrogz.net/SVG/animation_on_a_curve.html 我做了一些更改,因此我可以放置自己的SVG路径,而不是bezier点, 因此,我的代码如下所示: function CurveAnimator(from) { this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); this.path.setAttribute
function CurveAnimator(from) {
this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
this.path.setAttribute('d',from);
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;
};
以及:
在这里,我想对路径的不同部分进行自定义计时,我想对某些部分进行更快的计时,对其他部分进行更慢的计时,
这里是我可以为整个动画设置持续时间的地方:
curve.animate(25,
我在考虑将路径分成更小的路径,以便调整每个部分的时间,
如对此有任何建议,将不胜感激
谢谢
curve.animate(25,