Как создать анимационную последовательность, используя RaphaelJS

Question

Как создать анимационную последовательность, используя RaphaelJS

1

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

Nathan Drake 03 фев. 2012, в 05:36

Источник

0

RaphaelJS выводит векторные рисунки в SVG / VML в зависимости от браузера, это не имеет ничего общего с API-интерфейсом canvas, который имеет совершенно иной подход к рисованию. Рафаэль использует библиотеку 'eve' для обработки событий, но поддерживает только события мыши и касания: см. Ссылку
Goldfrapper 03 фев. 2012, в 10:13

Теги:

javascript

html5

animation

jcanvas

raphael

1 ответ

Ещё вопросы

RaphaelJS выводит векторные рисунки в SVG / VML в зависимости от браузера, это не имеет ничего общего с API-интерфейсом canvas, который имеет совершенно иной подход к рисованию. Рафаэль использует библиотеку 'eve' для обработки событий, но поддерживает только события мыши и касания: см. Ссылку

osnoz · Answer 1 · 2013-07-17T10-29-00.000Z

Во-первых, как указано, вы не используете HTML5 Canvas, raphael фактически использует SVG. Создание анимации с помощью raphaelJS на самом деле довольно просто. Вы можете просто адаптировать строку ниже к вашим потребностям.

raphaelObject.animate({ attribute: value } , time , easing );

Объект raphaelObject - это то, что вы пытаетесь оживить, например, форму, которую вы сделали ранее

атрибут - это то, что вы анимируете, например, цвет

ценность - это то, что вы меняете, например, "красный",

время - это продолжительность анимации (миллисекунды)

Ослабление описывает природу анимации, чтобы начать с использования "<>", который выполняет простую анимацию, как вы могли бы ожидать. Ослабление "отскока" заставляет анимацию хорошо, отскок. Примеры различных смягчений здесь: http://raphaeljs.com/easing.html

Вот пример, где мы анимируем объект "значок", поворачивая его на 90 градусов и меняя его цвет на красный. Анимация займет 300 миллисекунд и будет иметь эффектный эффект отскока.

    icon.stop().animate({
            transform: "r90",
            fill: "red"
        }, 300 , 'bounce' );