Как масштабировать по вертикали с Рафаэлем? - PullRequest
Новая
       3

Как масштабировать по вертикали с Рафаэлем?

0 голосов
/ 26 декабря 2010

Обратите внимание на следующий фрагмент кода: 

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%. Приведенный выше код масштабируется как по вертикали, так и по горизонтали, поэтому он некорректен.

Я проверил документацию Рафаэля, но не смог ее получить, в частности потому, что не вижу правильного синтаксиса ... Какая-нибудь хорошая ссылка на API, как у jQuery?

Кроме того, если я внесу следующее изменение, 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, вы должны явно понижать или все будет просто типа объекта.)

2-е редактирование перед сном По крайней мере, следующее работает за один раз! 

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));});  
}

Достигнутые детали: две анимации масштабирования по очереди, на пять кругов; Неисправные детали: Все еще не бесконечный цикл, все еще не только вертикальный масштаб.

1 Ответ

1 голос
/ 28 декабря 2010
  1. Кажется, масштабирование круга только в одном направлении невозможно.Вместо этого используйте эллипс.Атрибут scale принимает строку типа «1 0», что означает масштаб 100% для x (по горизонтали) и 0% для y (по вертикали).См. attr-scale

Так что ваша анимация может быть достигнута 

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

см. 3-й метод (ключевые кадры) в animate

, что означает, что при 50% анимации эллипс должен быть масштабирован по вертикали на 0%, а при анимации 100% - до 100%.

  1. Когда вы вызываете функцию, она будетоценивается сразу.Ваши вызовы 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);
}
...