Raphael - сохранить атрибуты элемента svg после анимации

Question

Я довольно новичок в Рафаэле, и я хочу создать небольшую змеиную игру, используя исключительно эту библиотеку. Я попытался проверить функцию animate, чтобы изменить значение cx/cy круга и повторить его (чтобы он продолжал бесконечно). Моя конечная цель состоит в том, чтобы иметь слушателя, чтобы при нажатии разных клавиш со стрелками направление анимации изменялось соответствующим образом, но движение продолжается. У меня есть следующий код:

var circle = paper.circle(50, 40, 10); 
circle.attr("fill", "#f00"); 
circle.attr("stroke", "#fff"); 

var snakeMove = Raphael.animation({cx: circle.attr("cx")+30}, 1000, function(){ 
    circle.attr("cx", (circle.attr("cx") + 30).toString()); 
}).repeat(Infinity); 
circle.animate(snakeMove); 

JsFiddle demonstration

Однако, после того, как анимация завершается, ОЕ значение сбрасывается на то, что это было первоначально. Как сделать повторяющееся изменение атрибута svg update с помощью Raphael? (или любое другое предложение библиотеки)

Answer 1

У меня возникнет соблазн начать разбивать анимацию на вашу собственную функцию, вместо того, чтобы использовать только «анимацию», поскольку это может быть довольно констриктивным.

Таким образом, вы можете просто использовать setInterval и увеличивать атрибут cx в анимации в функции setInterval, тогда вы можете делать то, что хотите. Например, это будет чередовать каждый раз, когда вы нажимаете на круг ...

var DIRECTION=1 
setInterval(moveFunc, 1000); 

function moveFunc() { 
    circle.animate({ cx: circle.attr('cx')+ 30*DIRECTION }, 1000) 
} 

circle.click(function() { DIRECTION *= -1 }) 

jsfiddle