在这里,我有一系列使用Raphael的动画:
然而,用我的代码,步骤4-5是启动的,而步骤2-3仍然是动画。如何确保步骤4和步骤5在1-3动画完成后启动?我尝试在我的第二个函数( setTimeout )上使用ball2,但没有成功。
JSFiddle视图或这里:
Raphael("bounce", 640, 480, function () {
var r = this,
p = r.path("M0,77.255c0,0,269.393,37.431,412.96,247.653 c0,0,95.883-149.719,226.632-153.309").attr({stroke: "#666", opacity: 0, "stroke-width": 1}),
len = p.getTotalLength(),
e = r.circle(0, 0, 7).attr({stroke: "none", fill: "#000", opacity:0}).onAnimation(function () {
var t = this.attr("transform");
});
f = r.circle(0, 0, 7).attr({stroke: "none", fill: "#000",opacity:0}).onAnimation(function () {
var t = this.attr("transform");
});
r.customAttributes.along = function (v) {
var point = p.getPointAtLength(v * len);
return {
transform: "t" + [point.x, point.y] + "r" + point.alpha
};
};
e.attr({along: 0});
f.attr({along: 0});
var rotateAlongThePath = true;
function fadecurve(ca,ba,aa,ab){
ca.animate({opacity:1},500);
setTimeout(function(){fadeball(ba,aa,ab);
},1000);
}
function fadeball(ba,aa,ab) {
ba.animate({opacity:1},400);
setTimeout(function(){run(ba, aa,ab);
},1000);
}
function run(ba,aa,ab) {
ba.animate({along: aa}, ab, ">", function () {
ba.attr({along: aa});
});
}
function startbounce() {
fadecurve(p,e,.9,400),
setTimeout(function(){fadeball(f,.8,400);
},1000);
}
startbounce();
}); 发布于 2012-04-26 19:12:25
根据Raphael的文档,动画方法采用回调方法作为第四个参数。该方法可用于启动序列中的下一个动画(或在第三个动画之后)。
function fadecurve(ca,ba,aa,ab){
ca.animate({opacity:1},500,,function(){fadeball(ba,aa,ab);});
}例如。
https://stackoverflow.com/questions/10339554
复制相似问题