Question

我正在使用raphaeljs做一个动画，有一个元素必须放在不同的地方和不同的时间，我在另一个地方使用回调制作的问题，代码是广泛的，有一种方式改善？

 var c = Raphael("canvas", 500, 500);
    var p = c.path("m 40.008929,132.36161 0,128.5625 148.562501,0 0,-128.5625 -148.562501,0 z").attr({
        fill: '#33CCFF',
        stroke: '#000000',
        'stroke-width': 5
    });

    p.animate({
        path: "m 62.866072,140.93304 0,128.5625 148.562498,0 0,-128.5625 -148.562498,0 z"
    }, 2000, function () {

        p.animate({
            path: "m 77.151786,166.64733 0,128.5625 148.562494,0 0,-128.5625 -148.562494,0 z"
        }, 800, function () {

            p.animate({
                path: "m 71.4375,340.93304 0,128.5625 148.56249,0 0,-128.5625 -148.56249,0 z"
            }, 400, function () {

                p.animate({
                    path: "m 40.008929,132.36161 0,128.5625 148.562501,0 0,-128.5625 -148.562501,0 z"
                }, 1000);

            });

        });
    });

jsfiddle

Answer 1

您可以使用路径创建数组，使用时间创建另一个数组。

然后创建一个函数，使用下一个路径和下一个路径调用p.animate，并使用与回调相同的函数。

类似的东西：

var times = [2000,800,400,1000];
var paths = ["m 62.866072,140.93304 0,128.5625 148.562498,0 0,-128.5625 -148.562498,0 z",
             "m 77.151786,166.64733 0,128.5625 148.562494,0 0,-128.5625 -148.562494,0 z", 
             "m 71.4375,340.93304 0,128.5625 148.56249,0 0,-128.5625 -148.56249,0 z",
             "m 40.008929,132.36161 0,128.5625 148.562501,0 0,-128.5625 -148.562501,0 z" ];
var current=0;

function nextStep(){
    if (current>paths.length)
       return;
    p.animate({
        path: paths[current]
    }, times[current++],nextStep);


}

首先通过直接调用来启动它：

nextStep();

即使动画有很多不同的动作，您的代码也会保持简单，并且数据更容易阅读，因为所有路径都在一起。

封装Animate回调的最佳方法是什么？

1 个答案: