Параметры анимации HTML5 Canvas / CSS3 / jQuery

Question

Я заинтересован в создании более флеш-анимации, либо в сочетании с HTML5 / JQuery.

Одна из идей, которая витает вокруг, - летающие птицы, анимация персонажей и анимационные последовательности, похожие на анимацию. Я являюсь разработчиком Flash по фону, так что все это является второй натурой через систему анимации движения на основе временной шкалы Flash, поэтому мне интересно, что возможно с новыми развивающимися технологиями, такими как HTML5 Canvas, CSS3 и jQuery? Насколько они хороши в анимации? Что является хорошей отправной точкой для чтения?

Например, летящие птицы в http://www.thewildernessdowntown.com/ удивительны, они кажутся трехмерными, переменное направление, скорость, вращение, взмах, скорость. Во Flash можно добиться этого с относительной легкостью, создавая анимации в виде фрагментов фильмов, создавая их на сцене и перемещая их в tweenlite на разных скоростях или даже в PV3D, но я почти не представляю, как это будет достигнуто на холсте .

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

Спасибо

Answer 1

У вас есть три варианта анимации в «HTML5»: Canvas, SVG и CSS Animations (а также старая добрая анимация Javascript).Какой из них вы используете, зависит от того, что вы пытаетесь выполнить, и от того, какие браузеры вы хотите, чтобы они запускались.

Например, если вы пытаетесь настроить таргетинг на мобильные устройства, CSS-анимации - это ваш единственный выбор, потому что Canvas слишком медленный в целом, а в Android не было SVG до появления сот.Кроме того, куча возможностей SVG еще не включена в iOS (например, анимированные пути текста).

Вот мое вступительное представление к CSS-анимациям , а также введение в наш инструмент Sencha Animator, которыйв альфа.

Для настольных компьютеров Canvas довольно крутой - хотя он действительно работает превосходно только в Chrome 10 и IE9 - Safari может быть немного медленным, особенно если количество анимированных элементов поднимается и его нет вIE7 / 8 (а я еще не тестировал FF4).

Answer 2

Анимация птиц выполняется с использованием алгоритма Boids.Boids уникален тем, что имеет стайное / ройное / школьное поведение, подобное тому, что птицы и рыбы делают лучше всего.

• Возможно, вы захотите проверить описание Боидов изобретателя Криса Рейнольдса: Крис Рейнольдс - Боиды

• Вот скрипт на github, который может вам помочь: https://github.com/nuterian/Flocking

• Вот демонстрационная версия: http://nuterian.github.io/Flocking/

Answer 3

Есть небольшая демонстрация о написании анимированных звездных полей с использованием html5 и javascript. Проверьте код JavaScript в этой странице .

Answer 4

В thewildernessdowntonwn я думаю, что птицы были анимированы с помощью svg и некоторого javascript, чтобы убежать от мыши (потому что все знают, что мыши могут есть птиц :)).

Я думаю, что в этот "момент перехода" javascript / css3 может быть очень полезен для простой анимации, когда что-то появляется или движется в ту или иную сторону. Также немного сложно использовать анимацию, так как Mozilla и Opera поддерживают только переход css3 и никакой анимации на данный момент нет.

Подождите, все еще возможно сделать некоторую сложную анимацию, но вам вряд ли придется играть с переходным преобразованием и иногда с преобразованием источника. Вы можете получить там полезную информацию: http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/

Хорошая особенность svg в том, что она создана для анимации, более похожей на "традиционную флеш-анимацию", и ей можно управлять с помощью javascript и css3. Javascript становится все более и более мощным, поскольку все «современные браузеры» сражаются на тестах, как тест на sunspider. Таким образом, вы можете многое сделать с Javascript, я думаю, что это не займет много времени, пока редактор wysiwyg не выдаст чистый код css3 (я думаю, Adobe идет своим путем, верно?).

С другой стороны, есть такие технологии, называемые WebGL, которые позволяют вам использовать html5 canvas и некоторые серьезные javascript для написания 2D и 3D-приложений, которые позволяют вам делать удивительные вещи, которые могут использовать мощь GPU.

Надеюсь, это помогло вам увидеть эти появляющиеся технологии.

Answer 5

Вы можете проверить processingjs , который использует canvas для 2D и 3D визуализаций. Я сделал небольшую визуализацию с processingjs, и довольно легко получить хорошие результаты.

Преимущество использования processingjs заключается в том, что ваша анимация будет работать не только в браузере, но и в собственных инструментах обработки.