Параметры анимации HTML5 Canvas/CSS3/jQuery
Я заинтересован в создании более флеш-анимации или в сочетании с HTML5/JQuery.
Одна из идей, которая плавает вокруг, - летающие птицы, анимация персонажей и анимационные последовательности, похожие на анимацию. Я являюсь разработчиком Flash по фону, так что все это является второй натурой через систему анимации движения на основе временной шкалы Flash, поэтому мне интересно, что возможно с новыми развивающимися технологиями, такими как HTML5 Canvas, CSS3 и jQuery? Насколько они хороши в анимации? Что является хорошей отправной точкой для чтения?
Например, летящие птицы на http://www.thewildernessdowntown.com/ удивительны, они кажутся трехмерными, с переменным направлением, скоростью, вращением, взмахом, скоростью. Во Flash можно добиться этого с относительной легкостью, создавая анимации в виде фрагментов фильмов, создавая их на сцене и перемещая их в tweenlite на различных скоростях или даже в PV3D, но я почти не представляю, как это будет достигнуто на холсте,
Итак, вкратце, идеи о том, как было достигнуто выше, хороший материал для чтения по этому типу анимации вне флеш-памяти и любые общие советы, которые вы могли бы получить, будут высоко оценены.
Спасибо
5 ответов
У вас есть три варианта анимации в "HTML5": Canvas, SVG и CSS Animations (а также старая добрая анимация Javascript). Какой из них вы используете, зависит от того, что вы пытаетесь выполнить, и от того, какие браузеры вы хотите, чтобы они запускались.
Например, если вы пытаетесь настроить таргетинг на мобильные устройства, CSS-анимации - это ваш единственный выбор, потому что Canvas слишком медленный в целом, а в Android не было SVG до появления сот. Также куча возможностей SVG еще не включена на iOS (например, анимированные текстовые дорожки).
Вот мое введение в CSS-анимацию, а также введение в наш инструмент Sencha Animator, который находится в альфа-версии.
Для настольных компьютеров Canvas довольно хорош - хотя он действительно отлично работает только в Chrome 10 и IE9 - Safari может быть немного медленным, особенно из-за того, что количество анимированных элементов увеличивается, а в IE7/8 его нет (и я не тестировал FF4 пока нет).
Есть небольшая демонстрация о написании анимированных звездных полей с использованием html5 и javascript. Проверьте код JavaScript на этой странице.
Анимация птиц выполняется с помощью алгоритма Boids. Boids уникален тем, что имеет стайное / ройное / школьное поведение, подобное тому, что птицы и рыбы делают лучше всего.
Вы можете проверить описание Boids изобретателя Криса Рейнольдса: Крис Рейнольдс - Boids
Вот скрипт на github, который может вам помочь: https://github.com/nuterian/Flocking
Вот демонстрация: http://nuterian.github.io/Flocking/
Вы можете проверить http://processingjs.org/, который использует canvas для 2d и 3d визуализаций. Я сделал небольшую визуализацию с processingjs, и довольно легко получить хорошие результаты.
Преимущество использования processingjs заключается в том, что ваша анимация будет работать не только в браузере, но и в собственных инструментах обработки.
В 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.
Я надеюсь, что это помогло вам увидеть сквозь эти появляющиеся технологии.