Как создать анимационную последовательность, используя RaphaelJS - PullRequest
1 голос
/ 03 февраля 2012

так вот мой вопрос Я использую RaphaelJS для создания анимации на холсте HTML5, но я не совсем понимаю, как создавать анимационные события и как их запускать. Документация не очень полезна. Спасибо

1 Ответ

0 голосов
/ 17 июля 2013

Во-первых, как уже отмечалось, вы не используете 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' );
...