Во-первых, как уже отмечалось, вы не используете HTML5 Canvas, а Raphael фактически использует SVG. Создание анимации с помощью RaphaelJS на самом деле довольно просто. Вы можете просто адаптировать линию ниже к вашим потребностям.
raphaelObject.animate({ attribute: value } , time , easing );
RaphaelObject - это то, что вы пытаетесь оживить, например. форма, которую вы сделали ранее
атрибут - это то, что вы анимируете, например. цвет
значение - это то, что вы меняете, например. "Красный"
время - сколько времени должна занимать анимация (миллисекунды)
easing описывает природу анимации, для начала используйте «<>», которая выполняет простую анимацию, как вы могли ожидать. Ослабление «отскока» приводит к хорошему анимации, отказов. Примеры различных смягчений здесь: http://raphaeljs.com/easing.html
Вот пример, где мы анимируем значок объекта, поворачивая его на 90 градусов и меняя его цвет на красный. Анимация займет 300 миллисекунд и будет иметь эффект отскока.
icon.stop().animate({
transform: "r90",
fill: "red"
}, 300 , 'bounce' );