RE: Анимированный PNG в Firefox, Opera и WebKit? Легко!
Это своего рода ответ статье на Хабрахабре «Анимированный PNG в Firefox, Opera и WebKit? Легко!«, на которую я сейчас случайно вышел по ссылке в другой статье «APNG (анимированный PNG) в Google Chrome, Safari и IE«.
Читая статью, с каждой строкой текста у меня рождались всё новые и новые вредные советы. И сейчас я попробую их все отписать, что вспомню. Кстати, в комментариях к статье на хабре «Анимированный PNG в Firefox, Opera и WebKit? Легко!», некоторые из этих советов и предложений уже были озвучены. Так же, хотелось бы заметить, что комментариев там очень много и я не осилил — много буковок, так что возможно там были похожие мысли.
И так начнем
Замечательно, что браузеры будут поддерживать анимированные PNG. Но, как в комментариях к статье было сказано: «Мы не ищем лёгких путей». Поэтому я предлагаю рассмотреть более оптимальные варианты создания анимации картинок, которые будут максимально маленького веса и максимального качества. Для примера возьмем туже картинку, логотип «Огненного Лисёнка» в векторном формате, и поиздеваемся над ним. (скачать можно с нашего сайта или с википедии)
PNG + CSS3
Браузеры FF, Chrome, Safari поддерживают анимацию на CSS3 и даже «вчерашние» сборки этих браузеры, которые при этом не поддерживают APNG. Но вот IE и Opera пока что не поддерживают данные возможности CSS3, они увидят просто картинку.
Для реализации нам потребуется 2 PNG файла и возможности CSS3. Конечно, эта реализация не подходит для всех анимаций, но очень многие задачи решит и будет весить достаточно мало.
И так, первым делом разобьем нашу анимацию на составляющие. В данном случае у нас два объекта: планета и Огненный Лисёнок. И сохраним их двумя отдельными файлами PNG. Конечно в Вашем случае может потребоваться три или четыре картинки, а может и одна. В зависимости от задачи. Так же обратите внимание, что необходимо заранее определиться с размером кадра и сохранять картинки именно по размерам кадра, если потребуется, то оставить пустоты.
Первым делом создадим блок и поместим в него нашу картинку, которая должна крутиться.
<div>
<img src="image_for_rotate.png">
</div>И добавим стили
/* Тут мы фоном задаем статическую картинку */
div {
background: url("01.png") no-repeat scroll 0 0 transparent;
}
/* Объявляем анимацию */
img {
animation: mymove 5s linear infinite;
-moz-animation: mymove 5s linear infinite; /* Firefox */
-webkit-animation: mymove 5s linear infinite; /* Safari and Chrome */
}
/* Ну а тут задаем то, как это должно работать.
Очень схоже с работой в любом видеоредакторе или флэшредакторе */
@keyframes mymove {
from {transform:rotate(0deg)}
to {transform:rotate(360deg)}
}
/* Firefox */
@-moz-keyframes mymove {
from {-moz-transform:rotate(0deg)}
to {-moz-transform:rotate(360deg)}
}
/* Safari and Chrome */
@-webkit-keyframes mymove {
from {-webkit-transform:rotate(0deg)}
to {-webkit-transform:rotate(360deg)}
}Вот и все, так легко и так просто.
Посмотреть пример на отдельной странице.
Плюсов здесь много:
- Полностью на CSS3, что дает легкое управление с помощью стилей, в том числе и например :hover. Несколько примеров смотри ниже (ссылки ниже).
- Так же не надо постоянно перекомпилировать картинку, если например не устраивает скорость. Что на порядок удобнее APNG и GIF, и даже Flash.
- Является полной составляющей DOM-дерева документа, что дает полный доступ для JS, а следовательно возможности ограничиваются только фантазией.
- Очень маленький размер. В общей сложности, мой не оптимизированный пример (как PNG не оптимизировал через всякие pngout, так и HTML с CSS не сжаты) весит всего 38 кб, что в 15 раз меньше, при достижение того же эффекта. Если оптимизировать PNG, выкинуть всякие хедеры и прочее из документа, то вес будет поменьше и возможно вес всего этого чуда будет килобайт 25.
- В общем удобства, одни удобства.
Минусы:
- К сожалению большой жирный минус — поддерживается малым количеством браузеров. Но это временно.
Ну и ссылка на несколько примеров.
SVG
Эта тема мне очень интересна, т.к. давно хотел вплотную заняться анимацией SVG. Вот сейчас и приступим к началу небольшого изучения.
Как сделать SVG я уже писал в одной из своих записей. Там всё подробно описано, с одним лишь исключением — надо будет сделать два слоя. Для этого надо зайти Менеджер объектов (Object Manager) и создать второй слой (New Layer), и затем разделить картинку по слоям, примерно так же, как и в примере с PNG, только каждый файл будет — отдельным слоем. Так же можно создать и больше слоев для большего количества фрэймов.
Открываем сохраненный файл в редакторе в котором вы работаете (несжатый!). У Вас там должно быть два тэга/слоя/блока G (ну или сколько вы слоёв там сделали?). Переходим к нужному нам слою и добавляем новый тэг <animateTransform />. Его необходимо вставить внутри слоя который будем анимировать, т.е. гдето между <g></g>. Не забудьте, что в XML стандарте, а ведь SVG — это XML файл, необходимо ставить закрывающий слэш в одиночных/непарных тэгах.
Теперь в созданном теге задаем анимацию. В SVG есть несколько видов анимации, одна из них animateTransform, которая нам и нужна в данном примере. Более подробно об анимации описано в спецификации SVG на сайте w3.org.
В моём случае это выглядит так:
<animateTransform attributeName="transform" type="rotate"
from="0 64 62" to="360 64 62" dur="5s" repeatCount="indefinite" />Что же я тут понаписал?
- Ну первым делом объявил об анимации трансформации (каламбур слов какой-то) — animateTransform.
- В нем объявил какую именно трансформацию я использовал — type=»rotate».
- Дальше, как в случае и с CSS3, объявил с какого положения начинать и чем заканчивать — from=»0 64 62″ to=»360 64 62″,
где: первое число это угол поворота, второе и третье это координаты по оси X и Y, координаты центра. - Дальше я задал время анимации в 5 секунд — dur=»5s».
- И объявил число повторов анимации равной бесконечности — repeatCount=»indefinite».
Таким образом можно задать практически любую анимацию.
Теперь нам осталось сделать оптимизацию и сжать файл, ну и вставить в нужное место на странице.
<embed id="svg" type="image/svg+xml" src="animation.svgz" height="124" width="128">Плюсы примерно те же что и в с использованием CSS и PNG и даже больше:
- Поддерживают все современные браузеры. Даже браузеры вчерашнего дня, кроме IE6-8.
- Очень маленький размер файла. В моем примере размер составил всего 7.4 кб, что в 80(!!!) раз меньше. Да еще и масштабируемый. Если потребуется сделать его в 10 раз больше, то размер файла не изменится!!!
- Достаточно легко можно править анимацию и не только
- Масштабируемость. Можно делать любой размер без правки файла в графическом редакторе, достаточно просто прописать другие циферки в width и height, при этом качество не потеряется, это же вектор (масштабируемая графика).
- Легко подключается на страницу.
- Есть возможность получить доступ к каждому отдельному объекту в SVG файле через JS. Т.е. svg файл встраивается в DOM-дерево документа. Для этого рекомендуется использовать тег embed.
- Можно использовать в качестве фона. Да, да, тогда анимация тоже будет.
- Лучше не только gif и flash анимации, а даже лучше APNG! (ИМХО)
- Думаю еще можно перечислить что-то, но на данный момент не придумал.
Минусы:
- Не поддерживается IE, для него потребуются костыли.
Итог
Разумеется, как я сказал выше, эта анимация подходит не для всего, но очень многие задачи которые решали GIF и FLASH решить можно, даже возможно сделать баннер, но для этого придется попотеть. Хотя… так же придется попотеть и для создания качественной gif или flash анимации. И наравне с уже имеющимся проектом от адобе — Adobe Edge, скоро появится много программ облегчающих жизнь. Ну и конечно свои паттерны (образцы, шаблоны) у веб-разработчиков. А главное придется избавиться от префиксов в CSS для браузеров. Всё это в совместительстве с APNG позволит перейти на более динамичный дизайн, дизайн дающий фору flash технологиям. Но это всё в будущем, а сейчас можно пользоваться тем что есть уже сейчас — CSS3 и SVG, ну или canvas, если будет удобнее.
