Форма анимации в JavaScript - PullRequest
       31

Форма анимации в JavaScript

10 голосов
/ 02 февраля 2010

Есть ли способ сделать анимацию формы в javascript?Может быть, с помощью canvas ...

Ответы [ 5 ]

7 голосов
/ 01 июня 2011

Форму анимации движения, как во Flash, найти сложнее, чем анимацию движения и простую интерполяцию атрибутов (например, в JSTweener, Tween.lib, animate () JQuery, transition () d3, animate () RaphaelJS и т. Д.). Эти библиотеки, некоторые из которых приведены в других ответах, не выполняют анимацию формы.

Сначала вы должны знать, хотите ли вы рисовать с помощью SVG или canvas и какую библиотеку вы будете использовать. Затем вам нужен интерполятор, функция, которая вычислит переход между двумя заданными фигурами, который может написать правильный путь в SVG или canvas. Я написал реализацию для SVG в D3.js, чтобы сделать некоторые анимированные переходы между множеством различных форм (используя суперлиформу Гиелиса ), если кому-то еще это нужно. Вы можете найти пример здесь

4 голосов
/ 02 февраля 2010

Если вы будете выполнять графику на элементе HTML 5 canvas, вы можете проверить библиотеку Processing.js . Существует библиотека анимации , но вы, вероятно, найдете ее полезной для многих других вещей .

Processing.js использует JavaScript для рисования формирует и манипулирует изображениями на HTML 5 Canvas элемент. Код легкий, простой в освоении и делает идеальный инструмент для визуализации данные, создание пользовательских интерфейсов и разработка веб-игр.

Для анимации движения вы можете взглянуть на следующее:

2 голосов
/ 21 июня 2011

Некоторые анимированные примеры объединяют анимацию движения с помощью RaphaelJS.Посмотрите на нижние: http://raphaeljs.com/animation.html

1 голос
/ 20 августа 2011

Я использую tween.js (http://learningthreejs.com/) отличная библиотека, которая будет что-то анимировать. Если вы уже используете jQuery, я бы также порекомендовал изучить его функцию анимации.

1 голос
/ 02 февраля 2010

Для подростков в Javascript используйте http://coderepos.org/share/wiki/JSTweener

...