Как устроена анимация в Рафаэле? - PullRequest
Новая
       29

Как устроена анимация в Рафаэле?

3 голосов
/ 26 ноября 2011

Я пытаюсь выполнить некоторую анимацию с помощью наборов в Рафаэле, но даже если анимация непрозрачности сработала, мне не удается переместить набор (или даже круг) вокруг холста.

Я обнаружил в Интернете, что перемещение набора должно выполняться с настройкой перевода, а не с позициями x, y (поскольку они могут различаться для каждого элемента в наборе, и только x и y могут быть недостаточны для перемещения некоторых элементов ), но это не работает для меня. Ничто не движется, хотя обратные вызовы анимации выполняются вовремя, как и ожидалось.

До этого момента лучший способ, которым я могу использовать следующий код, состоит в том, чтобы увидеть, как тикает время (в консоли) ... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Set, circle animation</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script>
    <script type="text/javascript">
        $(document).ready (function()
        {
            var canvas = Raphael ('canvas', 400, 300);
            window.tset = canvas.set()
                .push(
                    window.tap = canvas.circle (100, 100, 40)
                        .attr ({stroke: 'blue', fill: 'red'})
                );

            setTimeout (function()
            {
                console.log ('Starting tset animation #1.');
                window.tset.animate ({translation: '15,25'}, 1000, function()
                {
                    console.log ('Starting tap animation #1.');
                    window.tap.animate ({translation: '15,25'}, 1000, function()
                    {
                        console.log ('Starting tset animation #2.');
                        window.tset.animate ({translate: '15,25'}, 1000, function()
                        {
                            console.log ('Starting tap animation #2.');
                            window.tap.animate ({translate: '15,25'}, 1000, function()
                            {
                                console.log ('Starting tset animation #3.');
                                window.tset.animate ({translation: 'matrix(1, 0, 0, 1, 15, 25)'}, 1000, function()
                                {
                                    console.log ('Starting tap animation #3.');
                                    window.tap.animate ({translation: 'matrix(1, 0, 0, 1, 15, 25'}, 1000, function()
                                    {
                                        console.log ('Starting tset animation #4.');
                                        window.tset.animate ({transform: 'matrix(1, 0, 0, 1, 15, 25)'}, 1000, function()
                                        {
                                            console.log ('Starting tap animation #4.');
                                            window.tap.animate ({transform: 'matrix(1, 0, 0, 1, 15, 25)'}, 1000);
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            }, 1000)
        });
    </script>
</head>
<body>
    <div id="canvas"></div>
</body>
</html>

Ответы [ 2 ]

8 голосов
/ 02 декабря 2011

Чтобы переместить набор в Рафаэле, используйте: 

// move to (100,100) over 1 second

theSetNameGoesHere.animate({transform: "t100,100"}, 1000);
2 голосов
/ 01 декабря 2011

Я немного поиграл с этим (и отсканировал через источник), и похоже, что вам нужно указать преобразование в виде, подобном {transform:'M 1 .5 .5 1 15 25'}.Взгляните на эту скрипку , чтобы увидеть некоторые преобразования.

Кстати, преобразования не работают точно так, как я ожидал, и я не могу притворяться, что понимаю, почему ... Я довольно новичок в Рафаэле и SVG.В любом случае, я надеюсь, что это поможет вам двигаться в правильном направлении.

...