Почати прослуховування П. І. Чайковський - Марш [Балет на дві актах «Лускунчик», Соч. 71, Акт I (1892)]
Виконує: London Symphony Orchestra (LSO), André Previn
Це свого роду відповідь статті на Хабрахабр «Анімаційний PNG в Firefox, Opera і WebKit? Легко! «, На яку я зараз випадково вийшов за посиланням в іншій статті« APNG (анімований PNG) в Google Chrome, Safari і IE «.
Тож почнемо
PNG + CSS3
Браузери FF, Chrome, Safari підтримують анімацію на CSS3 і навіть «вчорашні» збірки цих браузери, які при цьому не підтримують APNG. Але ось IE і Opera поки що не підтримують дані можливості CSS3, вони побачать просто картинку.
Для реалізації нам буде потрібно 2 PNG файлу і можливості CSS3. Звичайно, ця реалізація не підходить для всіх анімацій, але дуже багато завдань вирішить і буде важити досить мало.
І так, в першу чергу розіб'ємо нашу анімацію на складові. В даному випадку у нас два об'єкти: планета і Вогняний Лисеня. І збережемо їх двома окремими файлами PNG. Звичайно в Вашому випадку може знадобитися три або чотири картинки, а може і одна. Залежно від завдання. Так само зверніть увагу, що необхідно заздалегідь визначитися з розміром кадру і зберігати картинки саме за розмірами кадру, якщо буде потрібно, то залишити порожнечі.
Насамперед створимо блок і помістимо в нього нашу картинку, яка повинна крутитися.
І додамо стилі
Ось і все, так легко і так просто.
- Повністю на CSS3, що дає легке управління за допомогою стилів, в тому числі і наприклад: hover. Кілька прикладів дивись нижче (посилання нижче).
- Так само не треба постійно перекомпіліровать картинку, якщо наприклад не влаштовує швидкість. Що на порядок зручніше APNG і GIF, і навіть Flash.
- Є повною складової DOM-дерева документа, що дає повний доступ для JS, а отже можливості обмежуються тільки фантазією.
- Дуже маленький розмір. В цілому, не буде мій оптимізований приклад (як PNG не оптимізовані через всякі pngout, так і HTML з CSS не стиснуті) важить всього 38 кб, що в 15 разів менше, при досягнення того ж ефекту. Якщо оптимізувати PNG, викинути всякі хедери та інше з документа, то вага буде трохи менше і можливо вага всього цього дива буде кілобайт 25.
- Загалом зручності, одні зручності.
- На жаль великий жирний мінус - підтримується малою кількістю браузерів. Але це тимчасово.
Ця тема мені дуже цікава, тому що давно хотів впритул зайнятися анімацією SVG. Ось зараз і приступимо до початку невеликого вивчення.
Як зробити SVG я вже писав в одній зі своїх записів. Там все детально описано, з одним лише винятком - треба буде зробити два шари. Для цього треба зайти Менеджер об'єктів (Object Manager) і створити другий шар (New Layer), і потім розділити картинку по верствам, приблизно так само, як і в прикладі з PNG, тільки кожен файл буде - окремим шаром. Так само можна створити і більше шарів для більшої кількості фреймів.
Тепер в створеному тезі задаємо анімацію. У SVG є кілька видів анімації, одна з них animateTransform. яка нам і потрібна в даному прикладі. Більш докладно про анімацію описано в специфікації SVG на сайті w3.org.
У моєму випадку це виглядає так:
Що ж я тут понаписував?
- Ну перш за все оголосив про анімацію трансформації (каламбур слів якийсь) - animateTransform.
- У ньому оголосив яку саме трансформацію я використовував - type = "rotate».
- Далі, як у випадку і з CSS3, оголосив з якого положення починати і чим закінчувати - from = "0 64 62" to = "360 64 62",
де: перше число це кут повороту, друге і третє це координати по осі X і Y. координати центру. - Далі я поставив час анімації в 5 секунд - dur = »5s».
- І оголосив число повторів анімації рівній нескінченності - repeatCount = »indefinite».
Таким чином можна задати практично будь-яку анімацію.
Тепер нам залишилося зробити оптимізацію і стиснути файл, ну і вставити в потрібне місце на сторінці.
Приклад на окремій сторінці або сам SVGz файл з анімацією.
Плюси приблизно ті ж що і в з використанням CSS і PNG і навіть більше:
- Чи не підтримується IE, для нього потрібні милиці.
Зрозуміло, як я сказав вище, ця анімація підходить не для всього, але дуже багато завдань які вирішували GIF і FLASH вирішити можна, навіть можливо зробити банер, але для цього доведеться попітніти. Хоча ... так само доведеться попітніти і для створення якісної gif або flash анімації. І нарівні з вже наявним проектом від адоби - Adobe Edge, скоро з'явиться багато програм полегшують життя. Ну і звичайно свої патерни (зразки, шаблони) у веб-розробників. А головне доведеться позбутися від префіксів в CSS для браузерів. Все це в сумісництво з APNG дозволить перейти на більш динамічний дизайн, дизайн дає фору flash технологій. Але це все в майбутньому, а зараз можна користуватися тим що є вже зараз - CSS3 і SVG, ну або canvas, якщо буде зручніше.