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

Мне интересно делать еще одну флеш-анимацию в любом случае или комбинацию HTML5/JQuery.

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

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

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

Спасибо

Ответ 1

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

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

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

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

Ответ 2

Там небольшая демонстрация о написании анимированного starfield с использованием html5 и javascript. Проверьте код javascript в на этой странице.

Ответ 3

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

Вы можете проверить описание Boids изобретателем Крисом Рейнольдсом: Chris Reynolds - Boids
Вот script на github, который может вам помочь: https://github.com/nuterian/Flocking
Вот демо: http://nuterian.github.io/Flocking/

Ответ 4

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

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

Ответ 5

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

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

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

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

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

Я надеюсь, что это помогло вам увидеть эти новые технологии.