Question

请考虑以下代码段：

jQuery(function ()
{
    drawLogo(); 
});

function drawLogo()
{
    var paper = Raphael('logo', 100, 100);//creates canvas width=height=100px
    var rect = paper.rect(1,1,98,98, 10);//chessboard background
    rect.attr("fill","#efd5a4");
    var circle1 = paper.circle(20,20,12);
    var circle2 = paper.circle(50,20,12);
    var circle3 = paper.circle(80,20,12);
    var circle4 = paper.circle(20,50,12);
    var circle5 = paper.circle(50,50,12);
    var circle6 = paper.circle(80,50,12);
    var circle7 = paper.circle(20,80,12);
    var circle8 = paper.circle(50,80,12);
    var circle9 = paper.circle(80,80,12);
    paper.path("M35,0 L35,100");
    paper.path("M65,0 L65,100");
    paper.path("M0,35 L100,35");
    paper.path("M0,65 L100,65");

    circle1.animate({scale:"0"}, 2000);
    //setTimeout(circle1.animate({scale:"1"}, 2000), 2000);

}

我想要实现的动画是两部分链，第一部分是100％到0％的垂直比例动画，第二部分是0％到100％的垂直比例动画。上面的代码在纵向和横向都向下缩放，因此它是不正确的。

我查看了Raphael的文档，但是无法得到它，特别是因为我看不到正确的语法......像jQuery那样的任何好的API参考？

另外，如果我进行了以下更改，那么Firefox会显示错误，说明递归过多：

transform(circle1);
function transform(item)
{
    item.animate({scale:"0"}, 2000, transform(item));
}

我知道这很糟糕，但获得无限“动画循环”的正确方法是什么？

编辑：我将代码修改为以下

transform([circle1, circle3, circle5, circle7, circle9]);
function transform(elements)
{
    for(var e in elements)
    {
        e.animate({scale:"0"}, 2000);
    }
}

希望这至少可以为5个圆圈运行动画的第一部分，但不幸的是，它只会出现错误，说e.animate（）不是函数。可能原因是当从阵列中检索到元素时，它“丢失了它的类型”？（就像在Java中从普通的旧ArrayList获取元素时一样，你必须明确地向下转换，否则一切都只是类型对象。）

睡前第二次编辑 至少以下工作一次！

var elements = [circle1, circle3, circle5, circle7, circle9];
for(var i = 0; i < elements.length; i++)
    transform(elements[i]);
function transform(e)
{
    e.animate({scale: 0},2000, function(){this.animate({scale:1},
    2000, transform(this));});  
}

成就部分：一个接一个地连接两个缩放动画，五个圆圈; 失败的部分：仍然不是无限循环，仍然不仅是垂直标度。

Answer 1

似乎无法在一个方向上缩放圆圈。而是使用椭圆。 scale属性采用类似“1 0”的字符串，这意味着x（水平）的比例为100％，y（垂直）的比例为0％。请参阅attr-scale

所以你的动画可以通过

ellipse.animate({"50%": {scale: "1 0"}, "100%": {scale: "1 1"}}, 2000);

请参阅animate

这意味着在50％的动画中，椭圆应垂直缩放0％，100％动画缩放至100％。

调用函数时，将立即对其进行评估。您的变换在将其传递给动画之前再次调用transform（item）。相反，你应该将它包装在一个函数中并传递它。

这是完整的来源

jQuery(function ()
{
    drawLogo();
});

function drawLogo()
{
    var paper = Raphael('logo', 100, 100);//creates canvas width=height=100px
    var rect = paper.rect(1,1,98,98, 10);//chessboard background
    rect.attr("fill","#efd5a4");
    var ellipse1 = paper.ellipse(20,20,12, 12);
    var ellipse2 = paper.ellipse(50,20,12, 12);
    var ellipse3 = paper.ellipse(80,20,12, 12);
    var ellipse4 = paper.ellipse(20,50,12, 12);
    var ellipse5 = paper.ellipse(50,50,12, 12);
    var ellipse6 = paper.ellipse(80,50,12, 12);
    var ellipse7 = paper.ellipse(20,80,12, 12);
    var ellipse8 = paper.ellipse(50,80,12, 12);
    var ellipse9 = paper.ellipse(80,80,12, 12);
    paper.path("M35,0 L35,100");
    paper.path("M65,0 L65,100");
    paper.path("M0,35 L100,35");
    paper.path("M0,65 L100,65");

    var elements = [ellipse1, ellipse3, ellipse5, ellipse7, ellipse9];
    for(var i = 0; i < elements.length; i++)
        transform(elements[i]); 

}

function transform(e)
{
    e.animate({
                  "50%": {scale: "1 0"},
                  "100%": {scale: "1 1", callback: function() {transform(e);}}
              }, 2000);
}

如何与Raphael垂直扩展？

1 个答案: