Re-animat png în firefox, opera și webkit este ușor!

Începeți să ascultați P. I. Ceaikovski - Marsh [Balet în două fapte "Spărgătorul de nuci", Op. 71, Legea I (1892)]
Realizat de: Symphony Orchestra din Londra (LSO), André Previn
Acesta este un fel de articol de răspuns despre "animatul PNG în Firefox, Opera și WebKit" al lui Habrahabra? Este ușor! ", Pe care l-am lăsat în mod accidental pe link într-un alt articol" APNG (animat PNG) în Google Chrome, Safari și IE ".

Și să începem

PNG + CSS3

Browser-urile FF, Chrome, Safari suportă animația pe CSS3 și chiar ansamblurile "ieri" ale acestor browsere, care nu acceptă APNG. Dar IE și Opera nu suportă încă aceste caracteristici ale CSS3, vor vedea doar o imagine.

Pentru implementare, avem nevoie de 2 fișiere PNG și capabilități CSS3. Desigur, această implementare nu este potrivită pentru toate animațiile, dar foarte multe sarcini vor rezolva și vor cântări destul de puțin.

Și, în primul rând, ne vom împărți animația în componente. În acest caz, avem două obiecte: planeta și Focul Fox. Și salvați-le cu două fișiere PNG separate. Desigur, în cazul tău, ai nevoie de trei sau patru poze, sau poate una. În funcție de sarcină. De asemenea, rețineți că este necesar să determinați în avans dimensiunea cadrului și să salvați imaginile exact în funcție de dimensiunea cadrului, dacă este necesar, apoi lăsați golurile.

Mai întâi de toate, creați un bloc și puneți în el imaginea noastră, care ar trebui să se rotească.

Și adăugați stiluri

Asta e totul, atât de simplu și de simplu.

• Complet în CSS3, care oferă un control ușor cu stiluri, incluzând de exemplu: hover. Pentru câteva exemple, vedeți mai jos (link-urile de mai jos).
• De asemenea, nu recompilați în mod constant imaginea, dacă, de exemplu, nu sunteți mulțumit de viteză. Care este un ordin de mărime mai convenabil APNG și GIF, și chiar Flash.
• Este componenta completă a documentului tree DOM, care oferă acces deplin la JS și, prin urmare, posibilitățile sunt limitate doar de imaginație.
• Dimensiune foarte mică. În total, exemplul meu nu este optimizat (ca PNG nu este optimizat prin orice PNGOUT și HTML cu CSS nu este comprimat) cantareste doar 38 KB, care este de 15 ori mai mică, realizând în același timp același efect. În cazul în care optimizarea PNG, arunca tot felul de antete, etc. din document, atunci greutatea va fi mai mică și, probabil, greutatea tot acest miracol este de 25 kilobytes.
• În general, comoditate, unele facilități.

• Din păcate, minusul mare de grăsime este susținut de un număr mic de browsere. Dar acest lucru este temporar.

Acest subiect este foarte interesant pentru mine, pentru că pentru mult timp am vrut să mă implic în animarea SVG. Acum, să începem studiul mic.

Cum să faci SVG pe care deja mi-am scris-o într-una din înregistrările mele. Totul este descris în detaliu, cu o singură excepție: va trebui să faceți două straturi. Pentru a face acest lucru, mergeți la Object Manager și creați un al doilea strat (New Layer), apoi împărțiți imaginea în straturi, la fel ca în exemplul PNG, numai fiecare fișier va fi un strat separat. De asemenea, puteți crea mai multe straturi pentru mai multe cadre.

Acum, în eticheta creată, am setat animația. În SVG există mai multe tipuri de animație, una dintre ele fiind animateTransform. de care avem nevoie în acest exemplu. Mai multe detalii despre animație sunt descrise în specificația SVG de pe site-ul w3.org.
În cazul meu, arată astfel:

Ce am scris aici?

1. Ei bine, mai întâi de toate a anunțat animația de transformare (un joc de un fel) - animateTransform.
2. În ea, am declarat ce fel de transformare am folosit - type = "rotate".
3. Mai mult, ca și în cazul CSS3, a anunțat din ce poziție să înceapă și cum să termine - de la "0 64 62" la "360 64 62",
   unde: primul număr este unghiul de rotație, al doilea și al treilea sunt coordonatele de-a lungul axelor X și Y. Coordonatele centrului.
4. Apoi, am stabilit timpul de animație la 5 secunde - dur = "5s".
5. Și a declarat numărul de repetări ale animației egale cu infinitul - repeatCount = »indefinite».

În acest fel, puteți specifica aproape orice animație.

Acum rămâne să optimizăm și să comprimăm fișierul, și să îl lipim în locul potrivit al paginii.

Un exemplu pe o pagină separată sau fișierul SVGz în sine cu animație.

Pro sunt aproape la fel ca în utilizarea CSS și PNG și chiar mai mult:

• Nu este susținută de IE, va necesita cârje.

Desigur, așa cum am spus mai sus, această animație nu este potrivită pentru tot, dar foarte multe sarcini care au rezolvat GIF și FLASH pot fi rezolvate, este chiar posibil să faci un banner, dar asta va trebui să transpire. Deși ... trebuie doar să transpirați și să creați o animație gif de calitate sau flash. Și, împreună cu proiectul deja existent de la Adobe - Adobe Edge, în curând vor exista multe programe care să ușureze viața. Și desigur modelele dvs. (mostre, șabloane) de la dezvoltatorii web. Și principalul lucru este să scapi de prefixele din CSS pentru browsere. Toate acestea, în combinație cu APNG, vor permite trecerea la un design mai dinamic, designul oferind tehnologii flash. Dar asta este totul în viitor, iar acum puteți folosi ceea ce există deja - CSS3 și SVG, bine, sau panza, dacă va fi mai convenabil.

dona