Vremenski dijagram kao nacrt za SMIL animacije u SVG-u

Johan Grobler je 20. avgusta na Smashing Magazineu opisao postupak u kojem se složena SMIL animacija prvo nacrta kao vremenski dijagram, pa tek onda piše u oznakama. Svaka traka na dijagramu odgovara jednom elementu animate, a njena dužina i položaj postaju vrijednosti atributa dur i begin. Pošto jedan animate mijenja tačno jedno svojstvo jednog elementa, broj elemenata brzo naraste, pa učitavač od tri tačke koje se smjenjuju traži šest takvih zapisa. Tekst pokazuje i sinhronizaciju preko tuđeg početka i kraja, kroz atribut begin, te način da se poštuje postavka prefers-reduced-motion kroz element picture.

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.