Холст или PNG? (для анимации html5)


Я собираюсь разработать богатую html5 анимацию. Я уже проектировал компоненты в Illustrator, но теперь вопрос в том, как экспортировать эти компоненты? через объект Canvas? или через изображение(png)?.

Обратите внимание, что компоненты могут иметь некоторые изменения (например, цветок, который в какой-то момент получает крылья).

  1. Canvas позволит мне легко добавлять и удалять эти дополнения, но с изображением я должен сделать их абсолютными с помощью z-index..
  2. Изображение предотвратит копирование моих компонентов без разрешения (по крайней мере, оно не позволит никому использовать их как векторное изображение).. так что это действительно преимущество.

Спасибо!, ~ Алмог Баку


javascript canvas html html5-animation
person Almog Baku    schedule 30.05.2012    source источник
comment
Может быть, я ошибаюсь, и я что-то узнаю, но... Canvas и png действительно разные. Вы не можете делать анимацию с png.   -  person Jerome Cance    schedule 30.05.2012
comment
@ДжеромС. Эй, но в любом случае я планирую сделать свою анимацию с помощью javascript и css3.. так что это не так важно.   -  person Almog Baku    schedule 30.05.2012

Ответы (4)


arrow_upward
0
arrow_downward

Если вам нужно что-то быстрое, с большим количеством спрайтов и прямым взаимодействием, это не проблема: используйте холст.

Этот API очень похож на один из большинства 2D-графических API на других языках и обеспечивает «прямое» рисование и композицию.

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

person Denys Séguret    schedule 30.05.2012

arrow_upward
0
arrow_downward

поскольку Illustrator — это векторное приложение, возможно, вы захотите изучить формат SVG, который поддерживается большинством HTML5. браузеры.

Вы можете получить пакет Illustrator HTML5 SVG здесь и объяснение здесь.

person tnt-rox    schedule 09.06.2012

arrow_upward
0
arrow_downward

Ознакомьтесь с библиотекой Raphaeljs, если вы используете svg, это значительно упрощает управление svg из javascript.

person Stofke    schedule 26.01.2013

arrow_upward
0
arrow_downward


Я обнаружил, что самый простой и эффективный способ создания богатой анимации (короткометражного фильма) для Интернета – это using both JS and css animations/transictions..

Построение с помощью sass+compass делает его простым и мощным.

Почему? и о моем исследовании

На самом деле, один и тот же анимационный фильм я создавал два с половиной раза:
сначала я собрал весь фильм только с помощью jQuery (который был очень медленным, неуклюжим и сложным в сборке).
Затем я попробовал холст... но обнаружил, что очень сложно создать некоторые общие переходы, такие как слайд-ап и многое другое. Итак, я пытаюсь реализовать это с помощью некоторых распространенных библиотек холста.. и сдался через некоторое время (1/5 часть фильма).
Затем я решил реализовать его с нуля, используя compass + sass и CSS ANIMATIONS/ TRANSICTIONS, и я обнаружил, что это самый мощный, простой способ решения и быстрая разработка для решения этой проблемы.

Я реализовал каждый «слайд» в анимации css, обнаруженный классом css. и определить конец каждого слайда с помощью JS, который слушает событие анимации css.

person Almog Baku    schedule 07.03.2013