Хотя CSS3 ещё не является стандартом W3C, последние версии браузеров имеют его частичную поддержку. Можно встретить примеры реализующие те или иные свойства CSS3. Но вместе с восторгом многих не покидает также чувство опасения. Связано это в первую очередь с тем, что нет чёткого понимания в поведении браузера при обработке этих свойств. Под катом собрана таблица в которой сравниваются поддерживаемые CSS3 свойства во всех основных браузерах. Кроме этого указывается версия браузера и префикс для кодирования. Шпаргалка в форме изображения, поэтому её удобно скачать к себе на компьютер или мобильное устройство для дальнейшего использования.
Рубрика «animation» - 6
CSS3 поддержка в браузерах
2012-10-05 в 12:27, admin, рубрики: -moz-, -xv-, animation, css, css3, Веб-разработкаЭффектная анимация разрушения (Pixel Dust)
2012-10-02 в 14:46, admin, рубрики: animation, canvas, game development, html5, javascript, метки: animation, Canvas, html5, javascript .gif "Эффектная анимация разрушения (Pixel Dust)"){kind=tracking}
В процессе развития нашей игры на HTML5, мы столкнулись с дилеммой: рисовать для каждого элемента эффект разрушения или попробовать сделать это программно на JavaScript (canvas). Если с первым способом всё понятно (проверенно работает, но много работы художнику), то со вторым у нас были сомнения относительно скорости рендера, ведь это 60FPS x 64 x 4 байта ~ 1 МБ/сек. на один элемент, а если их 40 на одном экране?
Видео последовательность в Drawable
2012-09-19 в 11:36, admin, рубрики: android, animation, drawable, java, анимация, велосипед, видео, Работа с видео, Разработка под android, метки: android, animation, drawable, java, анимация, велосипед, видео После поста о подходе Apple к кодированию видео в JPEG, решил рассказать о своем подобном «велосипеде» под Android.
В своем мобильном проекте решили мы сделать превьюшки оружия не статической картинкой, а видео. Подразумевалось, что художники нарисуют красивые анимации, может даже в 3д, но что-то не сложилось и нам выдали простейшие зацикленные 1-1.5 секундные ролики в разрешении 256х256. В iOS версию они встроились замечательно, а вот в Android пришлось повоевать с MediaPlayer и SurfaceView, но все-равно получились некоторые «корявости» — содержимое SurfaceView не перемещалось вслед за родительским View, была заметная пауза при воспроизведении, и пр.
Разумным решением было бы разбить анимации на кадры и оформить в xml для AnimationDrawable, но для 15 видов оружия это значило бы мусорку из 5000+ кадров по 10-15 кб каждый. Потому была сделана своя реализация AnimationDrawable, работающая с sprite sheet и относительно быстрый метод конверсии видео в такой формат.
Производительность: Flash vs JavaScript
2012-09-11 в 13:32, admin, рубрики: Action Script, animation, flash, Flash-платформа, javascript, speed test, производительность, метки: animation, flash, javascript, speed test, производительность Здравствуйте, я разработчик игр на Flash. Последнее время все больше стало появляться постов про флешокапец, и MustHave JavaScript (дальше JS). Вроде как за JS будущие, и за открытым вебом.
Я долго не рассматривал JS всерьез как платформу для разработки игр. Ведь это интерпретированный язык, и скорость JS оставляет желать лучшего. Но совсем недавно был портирован на JS мой любимый фреймворк для анимации TweenLite. Вместе с этим автор создал тестовый пример показывающий производительность актуальных JS фреймворков: здесь.
Мне стало очень интересно, так как TweenLite JS выдавал неплохие FPS. И тут я решил написать такой же пример для сравнения Flash и JS фреймворков.
Дальше мне стало интересно сравнить FPS этих примеров в разных браузерах, и на разных ОС.
Сам тест — это анимация передвижения, и изменения размеров картинок, при чем можно изменять их количество. Тестовый пример для Flash лежит здесь, исходники примера здесь.
Читать полностью »
JavaScript библиотека для работы покадровой анимацией
2012-08-14 в 12:01, admin, рубрики: animation, game development, Gamedev, javascript, метки: animation, Gamedev, javascript Здравствуйте, читатели.
Хочу предоставить Вашему вниманию новую JavaScript библиотеку для работы покадровой анимацией. Занимался флеш-разработкой, сейчас все больше и больше пишу на JavaScript-e (только не будем здесь разводить холивар на эту тему). После долгих поисков чего либо для работы с анимацией и таймлайном, решил написать свою библиотеку. Получилась лёгкой, но достаточно функциональной, решила те моменты, которые отсутствовали в JavaScript, но были очень полезны в AS3.0 (Flash) и были там стандартными методами.
Библиотека была названа JS_Mc (долго над названием не думал, по этому как то так), Mc от MovieClip -типа даных во Flash, в котором и присутствует таймлайн и различные методы по управления им. Работает в браузерах Chrome (22.0.1229.2 dev-m), Opera (11.61), Firefox (14.0.1), IE (8.0) — это те версии, которые установлены у меня, на них тестировал. Сама библиотека находиться здесь, там есть документация, демо и туториалы.
По одному из них
я пройдусь здесь и расскажу о основной функциональности.
Начинаем работу с JS_Mc
Как мы создавали вступительный ролик для игры Vector
2012-07-26 в 9:42, admin, рубрики: animation, game development, intro, анимация, Анимация и 3D графика, Блог компании Nekki, видео, ролик, метки: animation, intro, анимация, видео, роликСегодня мы хотим рассказать вам о создании интро-ролика для нашей игры про паркур Vector — покажем раскадровку, аниматик и расскажем прочие подробности этого увлекательного процесса.
Анимированная иконка загрузки на CSS3
2012-07-04 в 19:25, admin, рубрики: animation, css, css3, веб-дизайн, метки: animation, css3 
Идея взята у Dan Eden (demo), я лишь немного доработал способ.
Читать полностью »
Unity Character Animation GDC 2012 Feature Preview
2012-06-01 в 22:43, admin, рубрики: animation, game development, gamedevelopment, tools, unity3d, анимация, Анимация и 3D графика, игры, компьютерная графика, метки: animation, gamedevelopment, tools, unity3d, анимация, игры, компьютерная графика Пока идет процесс подготовки переводов следующей партии уроков от unity3dstudent, хочу поделиться новостью.
На прошедшем CDG для Unity3d была анонсирована новая система работы с анимацией и системой ввода.
Ознакомиться c ней можно посмотрев видео.
Читать полностью »
Машинки на чистом SVG
2012-04-27 в 19:15, admin, рубрики: animation, Firefox, Google Chrome, opera, svg, метки: animation, svgВ последнее время для меня большим вдохновением является SVG-анимация. С её момощью можно делать из простых элементов впечатляющие вещи. Например, сегодня я закончил делать демку про машинки и с радостью написал об этом себе в блог.
Нарушать правила хабра мне бы не хотелось, поэтому напишу пару слов о процессе. В спецификации SVG есть раздел про анимацию, в котором здорово описано как должны клиенты (например, браузеры) выполнять анимацию. В теории получается очень красиво, но пока не попробуешь сделать что-то своими руками — не поймешь.
Читать полностью »
Flipboard-анимация средствами CSS3 и JavaScript
2012-03-22 в 16:58, admin, рубрики: animation, css3, flipboard, javascript, Веб-разработка, Песочница, метки: animation, css3, flipboard, javascriptДобрый день. Наверняка многие видели приложение для iOS под названием Flipboard. При всех его достоинствах, лично меня оно в первую очередь порадовало своими забавными анимациями перелистывания. Родилась идея реализовать нечто подобное для своего сайта исключительно на Javascript и CSS3.
В данном случае я использовал CSS3 свойство transform: rotate3d(...), которое требует поддержки аппаратного ускорения графики и адекватно работает только в Chrome 16+, поэтому все нужyые свойства я ограничил префиксами -webkit-. В продакшене для пользователей с неподходящим параметрами я заменял анимацию на более простую.
Вот так выглядит готовый результат: