Ką CSS vaizdo animacijos modulis reiškia jūsų animuotiems WebP ir GIF

W3C paskelbė pirmąjį viešąjį CSS vaizdo animacijos modulio 1 lygio darbo projektą – specifikaciją, siūlančią priemones animuotų vaizdų, tokių kaip GIF, animuotas WebP ir animuotas AVIF, atvaizdavimo valdymui. Svetainių kūrėjams ir dizaineriams, naudojantiems WebPS animuotiems vaizdams kurti ir eksportuoti, šio projekto supratimas yra raktas į jūsų darbų paruošimą ateičiai ir užtikrinimą, kad jūsų animacijos atrodytų puikiai visose naršyklėse.

Ką siūlo CSS vaizdo animacijos modulis?

Šiuo metu naršyklės animuotus vaizdus tvarko nenuosekliai. Naujasis modulis siekia suteikti kūrėjams CSS pagrįstą animuotų vaizdų atkūrimo elgsenos kontrolę. Tai apima:

• Animacijos ciklų skaičiaus nurodymą.
• Atkūrimo krypties valdymą (įprasta, atvirkštinė, pakaitinė).
• Pradžios laiko arba uždelsimo prieš prasidedant animacijai nustatymą.
• Galbūt animacijų pristabdymą arba sustabdymą naudojant CSS.

Nors projektas dar yra ankstyvoje stadijoje (pirmasis viešas darbo projektas), jis rodo poslinkį link animuotų vaizdų traktavimo kaip nuspėjamos medijos, o ne uždarų dėžių GIF.

Kaip tai paveiks animuotus WebP ir GIF?

Tiek GIF, tiek animuoti WebP gaus naudos iš šio standartizavimo. Šiuo metu, jei norite valdyti ciklinimą, turite pasikliauti metaduomenimis, įterptais į patį failą (pvz., ciklų skaičiumi GIF ar WebP antraštėse). Su naujuoju CSS moduliu galėsite perrašyti šias reikšmes puslapio ar konteksto lygmeniu, nereikalaudami failo pereksportavimo.

Pavyzdžiui, reklaminė animacija, kuri turėtų suktis be galo nukreipimo puslapyje, bet straipsnyje – tik vieną kartą, gali būti valdoma CSS, naudojant tą patį vaizdo failą. Tai sumažina poreikį eksportuoti kelis variantus.

Be to, modulis gali įvesti našumo optimizacijas. Naršyklės gali geriau tvarkyti animacijas, kurios nėra matomos ekrane (pvz., pristabdant jas CSS `image-animation: paused`), taupant procesoriaus ir baterijos išteklius.

Ką WebPS naudotojai turėtų daryti dabar?

Kadangi specifikacija yra pirmasis viešas darbo projektas, ji dar nėra įdiegta jokioje naršyklėje. Tačiau galite pradėti ruoštis:

• Eksportuokite švarius failus: Užtikrinkite, kad jūsų animuoti WebP ir GIF, eksportuoti iš WebPS, turėtų tinkamus metaduomenis (ciklų skaičių, kadro delsą ir kt.) kaip atsarginį variantą. CSS modulis sustiprins, o ne pakeis failų lygmens kontrolę.
• Sekite naujienas: Stebėkite W3C specifikacijos progresą ir naršyklių diegimo naujienas. Naršyklių kūrėjai, tokie kaip WebKit (kaip matyti naujausiuose Safari Technology Preview leidimuose), aktyviai dirba prie susijusių funkcijų.
• Eksperimentuokite WebPS: Naudokite WebPS eksportuodami skirtingas ciklų konfigūracijas ir testuokite jų elgseną. Kai CSS modulis pasieks naršykles, galėsite lengvai šiuos nustatymus perrašyti.

Kodėl tai svarbu internetiniam vaizdų redagavimui?

WebPS yra internetinis vaizdų redaktorius, palaikantis eksportą į kelis formatus, įskaitant animuotą WebP ir GIF. Tobulėjant CSS vaizdo animacijos moduliui, WebPS gali pridėti funkcijų, padedančių naudotojams peržiūrėti ir nustatyti su CSS suderinamas savybes tiesiogiai eksporto metu. Pavyzdžiui, ateities atnaujinimas gali leisti nustatyti ciklų skaičių ir kitas parinktis, atitinkančias naujas CSS savybes.

Išvada

CSS vaizdo animacijos modulio 1 lygis yra reikšmingas žingsnis į priekį žiniatinklio standartuose animuotiems vaizdams. Nors tai dar tik projektas, jo potencialas supaprastinti darbo eigą ir pagerinti naudotojo patirtį yra didelis. Jau šiandien naudodami WebPS kurdami tinkamai suformuotus animuotus failus, būsite pasirengę pilnai išnaudoti būsimas CSS galimybes.

Sekite naujienas, kai specifikacija bręs. Kol kas kurkite puikias animacijas su WebPS!