Ресурсы HTML5 Canvas / анимации

У меня есть веб-сайт ecard, и в настоящее время около половины контента состоит из анимации, созданной с помощью Flash. Обычно день святого валентина — довольно загруженное время для сайта, но в этом году я обнаружил, что при том же объеме трафика на сайт в этом году было отправлено менее одной четверти количества открыток по сравнению с прошлым годом.

Глядя на статистику посещений веб-сайтов, я вижу, что количество посетителей, использующих мобильные устройства, в этом году составило чуть меньше половины, что объясняет, почему объемы были ниже, поскольку флэш-память не работает на мобильных устройствах и планшетах.

Раньше я использовал много флэш-памяти с открытым исходным кодом, таких как levitated.net, bit-101.com и Wonderfl.net.

Теперь я понимаю, что мне нужно начать изучать анимацию HTML5, используя, например. холст.

Я задавался вопросом, может ли кто-нибудь знать о каких-либо полезных ресурсах, с которых можно начать?

Кроме того, кто-нибудь знает какие-либо хорошие библиотеки/фреймворки/контент с открытым исходным кодом, который можно использовать для создания интересных анимаций? Я нашел http://jsdo.it/, который выглядит хорошо.

Я готов потратить время на изучение вещей, но когда я использовал Flash и ActionScript, было здорово иметь возможность использовать код, написанный другими, в качестве отправной точки и адаптировать его к моим потребностям, поскольку ActionScript был световыми годами. впереди всего, что я могу сделать, поскольку я на самом деле не программист.

Любые советы очень ценятся.

Спасибо


javascript canvas html html5-animation
person Community    schedule 17.02.2014    source источник

Ответы (6)


arrow_upward
1
arrow_downward

Начните со следующих ресурсов:

Следующие графические библиотеки доступны для создания потрясающей графики и анимации:

  • Рафаэль
  • jsDraw2D
  • ДОДЗЁ
  • КинетикJS

Редакторы приветствуются!

person Kunj    schedule 17.02.2014

arrow_upward
0
arrow_downward

Здесь у вас есть несколько хороших библиотек html5 js:

person markcial    schedule 17.02.2014

arrow_upward
0
arrow_downward

Я рекомендую FabricJS, это действительно мощно!

person Fabien Ménager    schedule 17.02.2014

arrow_upward
0
arrow_downward

Если вы хотите начать с простого холста, тогда http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/ довольно хорошо описывает основы. http://diveintohtml5.info/canvas.html тоже хорош, он содержит более подробную информацию.

Затем, если вы хотите работать с библиотекой поверх нее, которая упрощает работу, я всегда рекомендую три библиотеки HTML Canvas:

  • KineticJS: зрелый, хороший API, может делать практически все, но может отображать только на Canvas.
  • Two.js: не такой зрелый (еще не поддерживает изображения и текст), но визуализировать независимо, что означает, что вы можете выбрать, хотите ли вы, чтобы ваше изображение или анимация были нарисованы в Canvas, SVG или WebGL.
  • Pixi.js: скорость, скорость, скорость. Он очень быстрый, но не такой зрелый, как KineticJS (но только в некоторых отношениях). Он может рисовать как на Canvas, так и на WebGL.

Все они довольно общего назначения, но Pixi.js был принят игровым сообществом больше, и на это есть веские причины.

Для сравнения других библиотек Canvas см.: https://docs.google.com/spreadsheet/ccc?key=0Aqj_mVmuz3Y8dHNhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=0

person 01AutoMonkey    schedule 17.02.2014

arrow_upward
0
arrow_downward

Как разработчик Flash в течение 10 лет, большинство из которых использует Actionscript 3. Я обнаружил, что Microsoft TypeScript и использование Phaser.io и PixiJS, по сути, позволяют мне продолжать развивать свой набор навыков.

С февраля мы портировали 4 флэш-игры на HTML5, и каждый раз босс говорит: «Не могу поверить, что это HTML, а не Flash».

Со своей стороны, я кодирую так же, с теми же шаблонами проектирования, что и во Flash, с теми же знаниями о списках отображения.

Visual Studio + TypeScript настолько приятны в работе, что я съеживаюсь, когда мне нужно запустить Eclipse. Наконец, мой TypeScript выводит очень чистый JS. Вы можете отказаться от проекта на полпути и продолжить вывод JS, поэтому выбор использования TypeScript остается только за мной... для моих нужд, для простоты использования и для моего здравомыслия.

person Clark    schedule 10.08.2014

arrow_upward
0
arrow_downward

Вы можете использовать любой инструмент, который компилируется в HTML5/JavaScript, включая Flash:

http://www.openfl.org

Если вам удобно работать в AS3.0/Flash, вы можете продолжать это делать :)

person d13    schedule 10.08.2014