javascript - 使用 RaphaelJS 同步两个动画的计时

Question

使用 RaphaelJS，我改编了几个脚本来创建我想要组合的两个动画:

1. 首先，将虚线绘制到坐标 http://jsfiddle.net/jbirthler/CvhKx/2/

   var canvas = Raphael('canvas_container', 322, 273);
   var set = canvas.set(canvas.circle(110, 265, 7), canvas.circle(110, 7, 7), canvas.circle(7, 151, 7)).attr({
       stroke: "none",
       fill: "#666" });
   
   var pathstr = "M 109 255 l 0 -245 l -103 141 l 265 0";
   var path = dashline(canvas, pathstr, 4000, {
       stroke: '#828282',
       'stroke-dasharray': "--",
       'stroke-linecap': "butt",
       'stroke-width': 1,
       'fill-opacity': 0 }, 1000);
   
   function dashline(canvas, pathstr, duration, attr) {
   
       var guide_path = canvas.path(pathstr).attr({
           stroke: "none",
           fill: "none"
       });
       var path = canvas.path(guide_path.getSubpath(0, 1)).attr(attr);
       var total_length = guide_path.getTotalLength(guide_path);
       var start_time = new Date().getTime();
       var interval_length = 20;
   
       var interval_id = setInterval(function() {
           var elapsed_time = new Date().getTime() - start_time;
           var this_length = elapsed_time / duration * total_length;
           var subpathstr = guide_path.getSubpath(0, this_length);
           attr.path = subpathstr;
           path.animate(attr, interval_length);
       }, interval_length);
       return path;
   }​;​
   

   并且，当到达坐标 http://jsfiddle.net/jbirthler/KqjHh/1/ 时，缓动路径和动画圆圈

   var canvas = Raphael("holder", 322, 273);
   var set = canvas.set(canvas.circle(110, 265, 7),canvas.circle(110, 7, 7), canvas.circle(7, 151, 7)).attr({stroke:"none", fill: "#666"});
   var c = canvas.circle(110, 265, 10).attr({stroke: "#ddd", "stroke-width": 4});
   var fade = function (id) {
       return function () {
           set[id].attr({fill: "#fff", r: 12}).animate({fill: "#77bf00", r: 8}, 500);
       };
   };
   
   var run = animateCirc();
   
   function animateCirc() {
       var easex = ">",
           easey = ">";
       c.stop().animate({
           "0%":  {cy: 265, easing: easey, callback: fade(0)},
           "40%": {cy: 7, easing: easey, callback: fade(1)},
           "60%": {cy: 151, easing: easey, callback: fade(2)},
           "100%": {cy: 151, easing: easey, callback: fade(3)}
       }, 3000).animate({
           "0%":  {cx: 110, easing: easex},
           "40%": {cx: 110, easing: easex},
           "60%": {cx: 7, easing: easex},
           "100%": {cx: 300, easing: easex}
       }, 3000);
       return run;                
   };​
   

我想让圆圈在虚线路径到达其坐标时具有动画效果。如果我能得到使用缓动的虚线路径，那将是一个优点，但大多数情况下，我只是想将两者合而为一。

我能够比我自己编写的脚本更好地阅读 javascript，但如果有人对如何分解虚线脚本以及代码所采取的步骤有任何见解，那将非常有利于我。

我关于堆栈溢出的第一篇文章(是的，差不多是时候了)希望我足够具体!

Answer 1

我自己从未使用过 Raphael，但这是我发现的解决方案:

您的第一个动画在 4(4000 毫秒)秒内运行，您可以在此 block 中看到:

var path = dashline(canvas, pathstr, 4000, {
    stroke: '#828282',
    'stroke-dasharray': "--",
    'stroke-linecap': "butt",
    'stroke-width': 1,
    'fill-opacity': 0
}, 1000);

下一步是确定渲染圆圈的 block ，在这里您给它 3 秒的运行时间，这可以通过将最后一个参数更改为 4000 来解决。接下来，您会注意到百分比。这些应该涉及转换计算，将毫秒 (4000) 转换为每个动画点的百分比。

我观察了动画点，但结束代码看起来像这样:

function animateCirc() {
    var easex = ">",
        easey = ">";
    c.stop().animate({
        "0%":  {cy: 265, easing: easey, callback: fade(0)},
        "35%": {cy: 7, easing: easey, callback: fade(1)},
        "60%": {cy: 151, easing: easey, callback: fade(2)},
        "100%": {cy: 151, easing: easey, callback: fade(3)}
    }, 4000).animate({
        "0%":  {cx: 110, easing: easex},
        "35%": {cx: 110, easing: easex},
        "60%": {cx: 7, easing: easex},
        "100%": {cx: 300, easing: easex}
    }, 4000);
    return run;                
};

您可以看到更新后的(但不是100%同步)版本here .

var canvas = Raphael('canvas_container', 322, 273);
var set = canvas.set(canvas.circle(110, 265, 7), canvas.circle(110, 7, 7), canvas.circle(7, 151, 7)).attr({
    stroke: "none",
    fill: "#666"
});

var c = canvas.circle(110, 265, 10).attr({stroke: "#999", "stroke-width": 0});
var fade = function (id) {
    return function () {
        set[id].attr({fill: "#fff", r: 12}).animate({fill: "#77bf00", r: 8}, 500);
    };
};

var pathstr = "M 109 255 l 0 -245 l -103 141 l 265 0";
var path = dashline(canvas, pathstr, 4000, {
    stroke: '#828282',
    'stroke-dasharray': "--",
    'stroke-linecap': "butt",
    'stroke-width': 1,
    'fill-opacity': 0
}, 1000);

function dashline(canvas, pathstr, duration, attr) {
    var guide_path = canvas.path(pathstr).attr({
        stroke: "none",
        fill: "none"
    });
    var path = canvas.path(guide_path.getSubpath(0, 1)).attr(attr);
    var total_length = guide_path.getTotalLength(guide_path);
    var start_time = new Date().getTime();
    var interval_length = 20;

    var interval_id = setInterval(function() {
        var elapsed_time = new Date().getTime() - start_time;
        var this_length = elapsed_time / duration * total_length;
        var subpathstr = guide_path.getSubpath(0, this_length);
        attr.path = subpathstr;
        path.animate(attr, interval_length);

    }, interval_length);
    return path;
}
var run = animateCirc();

function animateCirc() {
    var easex = ">",
        easey = ">";
    c.stop().animate({
        "0%":  {cy: 265, easing: easey, callback: fade(0)},
        "35%": {cy: 7, easing: easey, callback: fade(1)},
        "60%": {cy: 151, easing: easey, callback: fade(2)},
        "100%": {cy: 151, easing: easey, callback: fade(3)}
    }, 4000).animate({
        "0%":  {cx: 110, easing: easex},
        "35%": {cx: 110, easing: easex},
        "60%": {cx: 7, easing: easex},
        "100%": {cx: 300, easing: easex}
    }, 4000);
    return run;                
};

​请注意，您实际上可以使用 Raphael、Easel、Kinetic 或任何类型的 Canvas/SVG 渲染工具。

希望这有帮助!