Форма tween в javascript

есть ли способ сделать фигуру tween в javascript? Возможно, используя холст...

10
animation javascript jquery jquery-animate

5 ответов

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

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

для tweening, вы можете посмотреть на следующее:

4

Shape tween как во Flash труднее найти, чем Motion tween и простая интерполяция атрибутов (например, в JSTweener, Tween.lib, jQuery animate (), переход d3 (), raphaeljs animate () и т. д.). Эти библиотеки, некоторые из которых цитируются в других ответах, не формируют tweening.

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

6

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

2

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

1

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

1