Ещё один простой блог в интернете, одного из жителей Сызрани, который считает себя дизайнером, WEB-мастером и фотографом-любителем

просто блог

QR CODE для записиQR CODE для записи “RE: Анимированный PNG в Firefox, Opera и WebKit? Легко!”

RE: Анимированный PNG в Firefox, Opera и WebKit? Легко!

Начать прослушивание П. И. ЧайковскийМарш [Балет в двух актах «Щелкунчик», Соч. 71, Акт I (1892)]
Исполняет: London Symphony Orchestra (LSO), André Previn

Это своего рода ответ статье на Хабрахабре «Анимированный 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" />

Что же я тут понаписал?

  1. Ну первым делом объявил об анимации трансформации (каламбур слов какой-то) — animateTransform.
  2. В нем объявил какую именно трансформацию я использовал — type=»rotate».
  3. Дальше, как в случае и с CSS3, объявил с какого положения начинать и чем заканчивать — from=»0 64 62″ to=»360 64 62″,
    где: первое число это угол поворота, второе и третье это координаты по оси X и Y, координаты центра.
  4. Дальше я задал время анимации в 5 секунд — dur=»5s».
  5. И объявил число повторов анимации равной бесконечности — repeatCount=»indefinite».

Таким образом можно задать практически любую анимацию.

Теперь нам осталось сделать оптимизацию и сжать файл, ну и вставить в нужное место на странице.

<embed id="svg" type="image/svg+xml" src="animation.svgz" height="124" width="128">


Пример на отдельной странице или сам SVGz файл с анимацией.

Плюсы примерно те же что и в с использованием 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, если будет удобнее.

Оставить комментарий

В блоге включена ручная модерация комментариев. Нет смысла повторно отправлять комментарий.
Поля отмеченный звездочкой * обязательны к заполнению

Перед отправкой формы: