Re animált png a Firefox, Opera és a WebKit egyszerű!

Kezdeni hallgatni Csajkovszkij - Marsh [Balett két felvonásban „A diótörő” Op. 71, Act I (1892)]
Előadja: London Symphony Orchestra (LSO), André Previn
Ez egyfajta válasz a cikket Habrahabr „Animated PNG Firefox, az Opera és a WebKit? Egyszerű! „Ahhoz, hogy csak én hagyta véletlenül a linkre egy másik cikk” APNG (animált PNG) a Google Chrome, a Safari és az IE «.

És így kezdődik

PNG + CSS3

A böngészők FF, Chrome, Safari támogatja a CSS3 animáció és még a „tegnap” a szerelvény ezen böngészők, ami ebben az esetben nem támogatják APNG. De itt van IE és az Opera még nem támogatja ezeket a funkciókat CSS3, megjelenik a kép.

Megvalósítani, szükségünk van 2 PNG formátumú, és lehetőséget CSS3. Persze, ezért ez nem alkalmas minden animációk, de nagyon sok problémát, és úgy dönt, hogy mérjük eléggé kicsi.

És így, az első dolog, amit osztani animációs elemek. Ebben az esetben van két tárgyat: a bolygó és a Tűz róka. És mentse őket két különböző PNG. Természetesen a helyzet, lehet, hogy három vagy négy kép, és talán az egyik. Attól függően, hogy a feladatot. Csak vegye figyelembe, hogy meg kell előre meghatározni a keret méretét, és mentse a kép által kocka méretét, ha szükséges, hagyja üresen.

Az első lépés, hogy hozzon létre egy dobozt, és betettük a képet, hogy forog.

És stílusossá

Ez minden, így könnyen és nagyon egyszerű.

• Teljesen CSS3, amely lehetővé teszi a könnyű vezérlés stílusok, beleértve például a: hover. Számos példát lásd alább (referenciák alább).
• Csak nem kell folyamatosan újrafordítani a képet, ha nem elégedett ilyen sebességgel. Ami sokkal kényelmesebb és APNG GIF, akár Flash.
• Ez egy teljes eleme a DOM-fa egy dokumentum, amely teljes hozzáférést biztosít JS, és ennek következtében a lehetőségek korlátozottak, csak a képzelet.
• Nagyon kicsi méret. Összességében én például nem optimális (mint a PNG nincs optimalizálva semmilyen PNGOUT és HTML CSS nincs tömörítve) súlya mindössze 38 KB, amely 15-szer kisebb, míg ugyanolyan hatást. Ha optimalizálja PNG, dobja mindenféle fejlécek, stb a dokumentumot, akkor a súlya kisebb lesz és talán a súlya mindez csoda 25 kilobájt.
• Általánosságban, a kényelem, a kényelem egyedül.

• Sajnos a magas zsírtartalmú mínusz - támogatott a kisszámú böngészők. De ez csak átmeneti.

Ez a téma nagyon érdekes számomra, mert hosszú akartam megbirkózni SVG animáció. Most, és folytassa a tetején egy kis tanulmány.

Hogyan készítsünk SVG írtam egyik rekordokat. Minden részletesen, egy kivétellel - ez lesz szükség ahhoz, hogy a két réteget. Ehhez menj Object Manager (Object Manager), és hozzon létre egy második réteget (New Layer), majd ossza a képet rétegek, körülbelül ugyanannyi, mint a példában PNG, csak egy fájlt - külön réteget. Ön is létrehozhat, és több rétegben több kereteket.

Most, a létrehozott címke beállítása az animációt. Az SVG több féle animációs, egyikük animateTransform. hogy szükségünk van erre példa. További információ a animáció ismerteti az SVG specifikáció w3.org oldalon.
Az én esetemben, ez így néz ki:

Mit keresek én itt írtak?

1. Nos az első dolog, amit be az átalakulás az animáció (szójáték szó egyes) - animateTransform.
2. Kijelentette, hogy milyen átalakulás Már használt - type = »forgatni».
3. Továbbá, mint abban az esetben a CSS3, s bejelentette a kiinduló helyzetbe, és a célba - from = »0 64 62" to =» 360 64 62"
   ahol: az első szám a forgatási szöget, a második és a harmadik a koordináták a tengelyen az X és Y középponti koordináták.
4. Akkor megkérdeztem az animáció 5 másodperc - dur = »5s».
5. És bejelentette az ismétlések számát animációs egyenlő a végtelenbe - repeatCount = »határozatlan».

Így lehet beállítani szinte minden animáció.

Most kell tennünk optimalizálása és tömöríteni a fájlt, jól, és beillesztjük a kívánt helyre az oldalon.

Egy példa egy külön oldalon vagy maga a fájl SVGZ animáció.

Előnye körülbelül ugyanaz, mint a CSS és a PNG és még:

• Nem támogatja az IE, azok számára, ő szükséges mankó.

Természetesen, ahogy azt fentebb már említettük, ez az animáció nem alkalmas, hanem sok feladatot megoldani GIF és FLASH lehet megoldani, még az is lehet, hogy egy banner, de ez lesz a verejték. Bár ... csak meg kell izzadni, és hozzon létre kiváló minőségű gif vagy flash animáció. És egy par a meglévő projekt Adobe - Adobe Edge, hamarosan lesz egy csomó programot, hogy az élet könnyebb. És természetesen a minták (minták, sablonok) a web developer. És ami a legfontosabb lesz, hogy megszabaduljon az előtag a CSS böngészők. Mindez lehetővé teszi, hogy egyidejűleg APNG lépés, hogy egy dinamikusabb design, a tervezés ad esélye, hogy a flash technológia. De ez mind a jövőben, de most már tudjuk használni azt a tényt, hogy jelenleg - CSS3 és SVG, a vásznon is, vagy ha ez sokkal kényelmesebb.

adományoz