2

使用 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，但是如果有人对如何分解虚线脚本和代码所采取的步骤有任何见解，那对我来说将是非常有益的。

我关于堆栈溢出的第一篇文章（是的，是时候了）希望我足够具体！

4

2 回答 2

2

我自己从未使用过 Raphael，但这是我找到的解决方案：

您的第一个动画在 4（4000 毫秒）秒内运行，您可以在此块中看到：

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

下一步是确定渲染圆圈的块，在这里你给它 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% 同步的）版本。

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 渲染工具。

希望这可以帮助！

于 2012-11-24T14:47:18.190 回答
1

@adamRenny的回答很简洁，很简单的修改（他打败了我，他提交的时候我还在写我的答案）。但它似乎不涉及真正的排队。必须手动计算时间以完全同步动画。但是，我在下面的回答将彻底改变代码。可能需要也可能不需要。

首先要做的是将虚线路径分成几条线（在你的情况下分成3个单独的线段）并在队列中为它们设置动画。可能可以将单个（组合）路径排队，但我还没有尝试过。

为了简化这个过程，我提取了所有路径坐标，因为它们也被圆圈使用。这样我们就可以循环绘制所有元素。

var canvas = Raphael('canvas_container', 322, 273),
    // here are the coordinates
    points = [ [110,265], [110,7], [7,151], [300,151] ],
    mCircle = canvas.circle(points[0][0],points[0][1],10).attr({stroke: "#999", "stroke-width": 4}),
    path = [],
    circles = [];

// draw the dots and (starting point of) lines
// note the lines are of 0 length so it's invisible, we only mark its starting point
for (var i = 0; i < points.length - 1; i++) {
    circles[i] = canvas.circle(points[i][0],points[i][1],7).attr({stroke: "none", fill: "#666"});
    path[i] = canvas.path('M'+points[i][0]+' '+points[i][1]).attr({
        stroke: '#828282',
        'stroke-dasharray': "--",
        'stroke-linecap': "butt",
        'stroke-width': 1,
        'fill-opacity': 0
    });

请注意，循环计数是points.length - 1因为最后一个坐标仅由移动圆使用，我们此时不在那里绘制任何东西。

然后我创建一个工厂函数来生成每组动画

// function to generate each set of animation
var fn = function(index) {
    var cPath = path[index], cCircle = circles[index],
        x1 = points[index][0], 
        x2 = points[index+1][0], 
        y1 = points[index][1], 
        y2 = points[index+1][1];

    return function(cb) {
        cPath.animate({path:'M'+x1+' '+y1+' L'+x2+' '+y2},500,'easeOut');
        mCircle.animate({cx:x2,cy:y2},500,'easeOut');
        cCircle.attr({fill: "#fff", r: 12}).animate({fill: "#77bf00", r: 8}, 500, cb);
    };
};

 

最难的部分来了。管理动画队列。您实际上可以使用其他库，例如 jQuery Deferred。然而，经过数小时的绝望，我决定编写自己的（非常简单的）队列系统。

// my custom Queue class
var Queue = function() {
    this.actionCount = 0;
    this.actions = [];

    var self = this;
    self._cb = function() {
        if (++self.actionCount != self.actions.length) self.run();
    };
};
Queue.prototype.run = function() {
    this.actions[this.actionCount](this._cb);
};
Queue.prototype.add = function(fn) {
    this.actions.push(fn);
};

在循环中，我们可以将每组生成的动画注册到队列中。并在循环完成后运行队列

for (var i = 0; i < points.length - 1; i++) {
    circles[i] = canvas.circle(points[i][0],points[i][1],7).attr({stroke: "none", fill: "#666"});
    path[i] = canvas.path(/*...*/);

    queue.add(fn(i));
}
queue.run();

这是jsFiddle

 

注意事项

  • 虚线路径动画被缓和：p
  • 添加更多动画点就像将它们添加到points数组中一样简单，其余部分自动完成 - jsFiddle
  • 您应该能够从fn函数调整动画
  • 队列类非常简单，没有任何检查和未经测试的生产。我创建它的唯一目的是回答这个线程。适用标准预防措施
  • 这是我第一次接触拉斐尔，欢迎指正
  • 该循环没有通过 JSLint，因为我调用了一个创建另一个函数的工厂函数。这在循环中似乎是一件坏事
  • 因为我在回答之前创建了 jsFiddle，所以这里的代码比 jsFiddle 更好地注释
于 2012-11-24T15:04:20.850 回答