Започнете слушане на Чайковски - Марш [балет в две действия "Лешникотрошачката" на ОП. 71, Закон I (1892)]
В изпълнение на: Симфоничен оркестър на Лондон (LSO), Андре Превен
Това е един вид отговор на статията Habrahabr "Анимирани PNG в Firefox, Opera и WebKit? Лесно! "На което аз сега оставил случайно на линка в друга статия" APNG (анимирани PNG) в Google Chrome, Safari и IE «.

И така, започваме

PNG + CSS3

Браузъри FF, Chrome, Safari поддържа CSS3 анимация и дори "вчера" събирането на тези браузъри, който в този случай не поддържат APNG. Но ето IE и Opera все още не са в подкрепа на тези функции, CSS3, те виждат една картина.

За да се приложи, се нуждаем от 2 PNG файл и възможности CSS3. Разбира се, това изпълнение не е подходящ за всички анимации, но много много проблеми и решава да тежи достатъчно малък.

И така, първото нещо, ние разделяме нашите анимационни компоненти. В този случай, ние имаме два обекта: на планетата и Fire Fox. И да ги запишете като две отделни PNG файлове. Разбира се, във вашия случай, може да отнеме три или четири снимки и може би един. В зависимост от задачата. Просто имайте предвид, че трябва предварително да се определи размера на рамката и запазване на изображението е с размер на кадъра, ако е необходимо, оставете празно.

Първата стъпка е да създадете кутия и я постави в нашия имидж, да се върти.

И добави стил

Това е всичко, толкова лесно и толкова просто.

• Изцяло на CSS3, което позволява лесно управление с стилове, включително например: висене. Няколко примери виж по-долу (препратки по-долу).
• Просто не е нужно непрекъснато да прекомпилирате на снимката, ако не е доволен от такава скорост. Което е много по-удобно и APNG GIF, дори Flash.
• Това е пълна компонент на DOM дървото на документ, който дава пълен достъп до JS, и следователно възможностите са ограничени само от въображението.
• Много малък размер. Като цяло ми например не е оптимизирана (като PNG не е оптимизирана от всеки PNGOUT и HTML с CSS не е компресиран) тежи само 38 KB, което е 15 пъти по-малко, като същевременно се постигне същия ефект. Ако се оптимизира PNG, хвърлят всички видове заглавия и т.н. от документа, а след това теглото ще бъде по-малък и може би теглото на цялото това чудо е 25 килобайта.
• Като цяло, комфорт, удобство сам.

• За съжаление, богата на мазнини минус - подкрепена от малък брой браузъри. Но това е временно.

Тази тема е много интересно за мен, защото отдавна исках да се пребори с SVG анимация. Сега и да пристъпи към върха на едно малко проучване.

Как да си направим SVG писах в един от записите си. Всичко е описано подробно, с едно изключение - това ще бъде необходимо да се направят два слоя. За да направите това, отидете на обекта Manager (Управление на обекти) и да се създаде втори слой (New Layer), а след това се разделят изображението в слоя, почти същото като в примера на PNG, само един файл - отделен слой. Можете също да създавате и повече слоя за повече кадри.

Сега, в създадената маркерите анимацията. В SVG има няколко вида анимация, една от тях animateTransform. че имаме нужда за този пример. За повече информация за анимация е описан в спецификацията на SVG на w3.org сайт.
В моя случай, това изглежда така:

Какво съм аз тук е написано?

1. Ами първото нещо, което обяви, трансформацията на анимация (игра на думи думата някои) на - animateTransform.
2. Той допуснал каква трансформация Ползвал съм - тип = »върти».
3. Освен това, както е в случая с на CSS3, той обяви със стартова позиция и на финала - от = 0 »64 62", за да = »360 64 62"
   при което: първото число е ъгълът на въртене, втори и трети координати е по ос X и Y. център координати.
4. Тогава попитах анимацията на 5 секунди - цялото семейство, достатъчни = »5s».
5. И обяви броя на повторенията на анимация, равна на безкрайност - repeatCount = »неопределен».

По този начин, можете да настроите почти всяка анимация.

Сега ние трябва да направим оптимизация и компресира файла, както и се вмъква в желаното място на страницата.

Един пример на отделна страница самия файл или SVGz анимация.

Плюсове почти същото като при използването на CSS и PNG, а дори и повече:

• Дали не се поддържа от IE, за тези, които той изисква патерици.

Разбира се, както казах по-горе, тази анимация не е подходящ за всички, но много от задачите се решават GIF и FLASH може да бъде решен, дори е възможно да се направи банер, но това ще трябва да се поти. Въпреки, че ... просто трябва да се поти и да се създаде високо качество GIF или флаш анимация. И на едно ниво с съществуващия проект от Adobe - Adobe Edge, скоро няма да има много програми, да направи живота по-лесен. И разбира се техните модели (проби, шаблони) от уеб разработчик. И най-важното, ще трябва да се отървете от префикса в CSS за браузъри. Всичко това ще позволи едновременно с APNG преместване в по-динамичен дизайн, проектиране дава шансове за флаш технология. Но всичко е в бъдеще, но сега можем да използваме факта, че в момента има - CSS3 и SVG, платното добре, или, ако това е по-удобно.

Дарете