Vremenski dijagram kao nacrt za SMIL animacije u SVG-u

Johan Grobler je 20. avgusta na Smashing Magazineu opisao radnu naviku, a ne novu tehnologiju. Prije nego što se napiše ijedan element animate, animacija se nacrta kao vremenski dijagram, s trakom po svakom pokretu. Kad dijagram stoji, pisanje oznaka postaje prepisivanje, a ne pogađanje.

Zašto dijagram ide prije koda

SMIL animacija u SVG-u nema jedno mjesto na kojem se vidi cjelina. Svaki element animate nosi sopstvene atribute dur i begin, pa se raspored u glavi sklapa iz razbacanih brojeva. Vremenski dijagram taj raspored vraća na jednu sliku: vodoravna osa je vrijeme, svaka traka je jedan pokret, a njena dužina i početak su tačno ono što ide u dur i begin.

Jedan element, jedno svojstvo

Ograničenje koje tekst stalno naglašava jeste da jedan element animate mijenja tačno jedno svojstvo jednog elementa. Zbog toga broj zapisa raste brže nego što se očekuje. Učitavač od tri tačke koje se smjenjuju, u kojem svaka tačka postepeno izranja pa nestaje, traži šest takvih elemenata. Za vraćanje svojstva u početno stanje koristi se element set.

• Atribut attributeName imenuje svojstvo koje se mijenja.
• Atributi from i to određuju raspon vrijednosti.
• Atribut dur nosi trajanje, a fill određuje šta ostaje poslije završetka.
• Atribut href veže animaciju za element koji nije njen roditelj.

Sinhronizacija bez ručnog računanja

Umjesto da svakoj animaciji ručno računaš pomak od nule, početak se veže za tuđi početak ili kraj. Zapis begin="colorChange.end - 300ms" znači da pokret kreće tri desetinke sekunde prije nego što se imenovana animacija završi. Pozitivan pomak pokret pomjera kasnije, negativan ranije. Kad se u dijagramu pomjeri jedna traka, ostale je prate same, pa se prepravka svodi na jedan broj.

Maskiranje i poštovanje korisnikove postavke

Tekst pokazuje i kako se pravougaonik u elementu clipPath animira da bi se dobio utisak kretanja koje sam oblik ne pravi, uz razdvajanje svojstava opacity i fill-opacity radi finijeg blijeđenja. Za korisnike koji su u sistemu tražili manje kretanja predlaže se element picture, kojim se pod uslovom prefers-reduced-motion isporučuje mirna slika umjesto animiranog SVG-a.