HTML5 → Mugeda, анимация на HTML5
Привет %username%!
Хочу поделится замечательным сервисом для создания анимации на платформе HTML5 под названием Mugeda. Сразу оговорюсь, сервис не мой, но пройти мимо и тем более не рассказать о нем я не мог.
Хочу поделится замечательным сервисом для создания анимации на платформе HTML5 под названием Mugeda. Сразу оговорюсь, сервис не мой, но пройти мимо и тем более не рассказать о нем я не мог.
Каскадные Таблицы Стилей → Создаем анимированные кнопки при помощи CSS3
В данной статье я хочу поделиться с вами некоторыми экспериментами по созданию анимированных кнопок при помощи CSS3. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и пр.
В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.
Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.
Обратите внимание, что анимация/переходы будут работать только в браузерах, которые поддерживают эти CSS3-свойства.
Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.
Каскадные Таблицы Стилей → Анимация меню при помощи CSS3
В данной статье я хотел бы показать вам некоторые приёмы создания эффектов при помощи CSS3 на примере меню. Идея заключается в простой композиции элементов: иконки, основного названия и вторичного названия, которое будет анимировано при наведении курсора, используя только CSS-переходы и CSS-анимацию. Мы рассмотрим несколько различных эффектов для элементов.
Анимация и 3D графика → Ненормальный композ или история как не стоит делать
Работа шла к концу и наконец то добрались до одного интересного шота. Даже не шота, а его части. И даже не части, а всего 1й секунды видео как просыпается робот.
Задача:
Субъективный взгляд глазами робота. Творческая группа выдала такую вот картинку как это должно быть:
(картинка переработана так как оригинал нельзя было выкладывать в интернет)
В начале было решено как то делать в 3D и анимировать. Но со временем начальство решила возложить задачу на композ. “- Композеры умные, они нарисуют!” сказали они. И я нарисовал…
Задача:
Субъективный взгляд глазами робота. Творческая группа выдала такую вот картинку как это должно быть:
(картинка переработана так как оригинал нельзя было выкладывать в интернет)
В начале было решено как то делать в 3D и анимировать. Но со временем начальство решила возложить задачу на композ. “- Композеры умные, они нарисуют!” сказали они. И я нарисовал…
Каскадные Таблицы Стилей → Спрайтовая анимация на CSS 3
Спрайтовая анимация — одна из тех вещей, которые при всей своей примитивности успешно работают и применяются в компьютерной графике и играх уже больше четверти века. Даже в трехмерных играх есть спрайты — например, билборды взрывов. Во многих браузерных и флеш-играх применяют именно спрайтовую анимацию, так как она очень проста и не требует высокой производительности — просто переключай кадры и все! А с появлением анимации в CSS 3 стало возможным использовать спрайты на своих страницах без яваскриптов.
Canvas → Анимация и Canvas из песочницы
Добрались руки мои до Canvas. Посматривал я на него давненько, очень уж он мне в качестве инструмента для графиков приглянулся. Да и неделя Canvas на Хабре поддержала интерес.
Но вместо скучных графиков стал я копать в сторону анимации. Получилось, что отрисовываем сцену каждый раз по-новой, соответственно всю информацию о текущих кадрах храним в JS. И решил я попробовать составить простой алгоритм, который позволял бы хранить анимации для объекта, их состояние и выбор по желанию пользователя.
Но вместо скучных графиков стал я копать в сторону анимации. Получилось, что отрисовываем сцену каждый раз по-новой, соответственно всю информацию о текущих кадрах храним в JS. И решил я попробовать составить простой алгоритм, который позволял бы хранить анимации для объекта, их состояние и выбор по желанию пользователя.
Каскадные Таблицы Стилей → CSS3 Animation в несколько кликов
Andy Clarke показал сообществу сайт-демонстрацию возможностей CSS3 Animation и анонсировал animatable.com с помощью которого демонстрация была сделана.
С помощью Animatable анимацию можно создавать в пару кликов. Интерфейс очень похож на видеоредактор. В данный момент проект в разработке.
Демонстрация Mad Animation работает на webkit-браузерах — Chrome, Safari, браузерах для мобильных платформ (Android, BlackBerry, Apple iOS, WebOS). Они увидят всю красоту CSS (нужно кликнуть по «watch»):
JavaScript → Продвинутые анимации с requestAnimationFrame
Если вы никогда не писали код для выполнения анимаций, то вы можете дальше не читать :)
Во всех ваших функциях анимаций вы используете повторяющийся таймер для применения изменений каждый несколько миллисекунд. Хорошие новости: производители браузеров решили «почему бы нам не дать вам API для этого потому, что мы, возможно, сможем оптимизировать некоторые моменты для вас». Итак, это основное API для создания анимаций на основе изменения DOM стилей, перерисовки canvas или WebGL
Браузеры могут оптимизировать анимации идущие одновременно, уменьшив число reflow и repaint до одного, что в свою очередь приведет к повышению точности анимации. Например анимации на JavaScript синхронизированные с CSS transitions или SVG SMIL. Плюс ко всему если выполняется анимация в табе, который невидим, браузеры не будут продолжать перерисовку, что приведет к меньшему использованию CPU, GPU, памяти и как следствие снизит расход батареи в мобильных устройствах.
Что такое requestAnimationFrame?
Во всех ваших функциях анимаций вы используете повторяющийся таймер для применения изменений каждый несколько миллисекунд. Хорошие новости: производители браузеров решили «почему бы нам не дать вам API для этого потому, что мы, возможно, сможем оптимизировать некоторые моменты для вас». Итак, это основное API для создания анимаций на основе изменения DOM стилей, перерисовки canvas или WebGL
Зачем я должен это использовать?
Браузеры могут оптимизировать анимации идущие одновременно, уменьшив число reflow и repaint до одного, что в свою очередь приведет к повышению точности анимации. Например анимации на JavaScript синхронизированные с CSS transitions или SVG SMIL. Плюс ко всему если выполняется анимация в табе, который невидим, браузеры не будут продолжать перерисовку, что приведет к меньшему использованию CPU, GPU, памяти и как следствие снизит расход батареи в мобильных устройствах.
Персональные блоги → Не спешите Flash хоронить — краткий обзор сфер применений Flash-технологии
После презентации одного очень интересного девайса и «скандальных» заявлений Стива Джобса в сети и на Хабре в частности начало формироваться мнение, что мол, Флэш своё отживает и скоро его заменит крутая перспективная технология HTML5\CSS3. С точки зрения веб-разработчика ситуация действительно кажется такой, но я хочу напомнить, о других областях применения Флэш, тех, с которыми программисты обычно не соприкасаются ежедневно по роду занятий.
CSS3 и HTML5 несомненно мощная штука. Для представления и форматирования информации.
Шагающие роботы из «Звёздных Войн» несомненно красивая штука, но это скорее из области «смотрите как я клёво научился молотком шурупы забивать». Разработчики обычно не занимаются анимацией, а аниматоры не любят и не хотят писать кучу кода, когда всё можно сделать быстрее и наглядно.
Тут за примерами ходить далеко не нужно, достаточно взглянуть на The FWA: Favorite Website Awards. Пока возможности CSS\Silverlight\whatever не позволят рисовать мышкой или пером на планшете, Flash ещё долго будет жить на имиджевых сайтах, где в первую очередь требуется «Вау-эффект», а не бизнес-логика и дружелюбный, быстрый интерфейс.
Веб
CSS3 и HTML5 несомненно мощная штука. Для представления и форматирования информации.
Шагающие роботы из «Звёздных Войн» несомненно красивая штука, но это скорее из области «смотрите как я клёво научился молотком шурупы забивать». Разработчики обычно не занимаются анимацией, а аниматоры не любят и не хотят писать кучу кода, когда всё можно сделать быстрее и наглядно.
Тут за примерами ходить далеко не нужно, достаточно взглянуть на The FWA: Favorite Website Awards. Пока возможности CSS\Silverlight\whatever не позволят рисовать мышкой или пером на планшете, Flash ещё долго будет жить на имиджевых сайтах, где в первую очередь требуется «Вау-эффект», а не бизнес-логика и дружелюбный, быстрый интерфейс.
jQuery → Анимация фонового изображения
Мне стало интересно, что можно сделать с использованием простой HTML-структуры (без избыточных тегов), а также простейшего кода. Изменение позиции фонового изображения будет лучшим решением для создания нужного эффекта (и я не первый, кому это пришло в голову, смотри пример в конце статьи).
jQuery является отличным решением для такого рода задач…
Демо || Статья
jQuery является отличным решением для такого рода задач…
Демо || Статья