Как оживить вращение и трансформацию в Рафаэле - PullRequest
Новая
       2

Как оживить вращение и трансформацию в Рафаэле

1 голос
/ 02 июня 2011

Я пытаюсь сделать что-то, что мне показалось бы довольно простым. У меня есть объект, который я перемещаю поэтапно, то есть я получаю сообщения каждые, скажем, 100 миллисекунд, в которых говорится, что «ваш объект переместился на x пикселей вправо и y пикселей вниз». Приведенный ниже код имитирует это, перемещая этот объект по кругу, но учтите, что заранее неизвестно, куда объект направится на следующем шаге.

Во всяком случае, это довольно просто. Но теперь я хочу также сказать объекту, который на самом деле является набором подобъектов, что он вращается.

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

Вот код, который я использую, и вы можете посмотреть живое демо здесь . Как видите, квадрат вращается, как и ожидалось, но стрелка вращается неправильно. 

// c&p this into http://raphaeljs.com/playground.html

var WORLD_SIZE = 400,
    rect = paper.rect(WORLD_SIZE / 2 - 20, 0, 40, 40, 5).attr({ fill: 'red' }),
    pointer = paper.path("M 200 20 L 200 50"),
    debug = paper.text(25, 10, ""),
    obj = paper.set();

obj.push(rect, pointer);

var t = 0,
    step = 0.05;

setInterval(function () {
    var deg = Math.round(Raphael.deg(t));

    t += step;

    debug.attr({ text: deg + '°' });

    var dx = ((WORLD_SIZE - 40) / 2) * (Math.sin(t - step) - Math.sin(t)),
        dy = ((WORLD_SIZE - 40) / 2) * (Math.cos(t - step) - Math.cos(t));

    obj.animate({
        translation: dx + ' ' + dy,
        rotation: -deg
    }, 100);
}, 100);

Любая помощь приветствуется!

Ответы [ 2 ]

1 голос
/ 02 июля 2013

Если вы хотите сделать перевод и ротацию тоже, рафаэль obj должен быть таким 

 obj.animate({
     transform: "t" + [dx , dy] + "r" + (-deg)
 }, 100);
0 голосов
/ 02 июня 2011

Проверьте http://raphaeljs.com/animation.html

Посмотрите на вторую анимацию сверху справа.

Надеюсь, это поможет!

Вот код: 

(function () {
    var path1 = "M170,90c0-20 40,20 40,0c0-20 -40,20 -40,0z",
        path2 = "M270,90c0-20 40,20 40,0c0-20 -40,20 -40,0z";
    var t = r.path(path1).attr(dashed);
    r.path(path2).attr({fill: "none", stroke: "#666", "stroke-dasharray": "- ", rotation: 90});
    var el = r.path(path1).attr({fill: "none", stroke: "#fff", "stroke-width": 2}),
        elattrs = [{translation: "100 0", rotation: 90}, {translation: "-100 0", rotation: 0}],
        now = 0;
    r.arrow(240, 90).node.onclick = function () {
        el.animate(elattrs[now++], 1000);
        if (now == 2) {
            now = 0;
        }
};                })();
...