Shape tween в javascript

Ответ 1

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

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

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

• Tween.lib - Движение Twining для Processing.js
• Движение Twining для Processing.js

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

Ответ 5

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