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

Question

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

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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