Flash:stä Lottie:ään State Machinesiin: Web-vektorianimaatioiden kehitys
Miten verkkovektorianimaatio siirtyi Flash:stä ja ActionScriptistä Lottie:n After Effects-vienteihin ja sitten tilakoneen suoritusaikoihin, ja mitä kukin vaihe muuttui.
Core Takeaway
Flash yhdisti vektorianimaatiota ja interaktiivisuutta yhdessä työkalussa, mutta se suoritettiin laajennuksessa, jota Adobe lakkasi tukemasta 31. joulukuuta 2020 jälkeen. Lottie toi vektorianimaatiot takaisin toistamalla After Effects-animaatioita, jotka vietiin JSON-muodossa Bodymovin:n ja mobiilianimaatioiden kanssa vain verkossa, ja vain mobiilisti. Tilakoneen suoritusajat, kuten Rive ja ExodeUI, lisäävät vuorovaikutteisuutta takaisin suunnittelutiedostoon.
Flash: animaatio ja logiikka yhdessä paikassa
Flash antaa suunnittelijoille mahdollisuuden piirtää vektoreita, animoida niitä aikajanalla ja lisätä käyttäytymistä ActionScriptin avulla, kaikki yhdessä tiedostossa. Se toimi peleissä, mainoksissa ja kokonaisissa verkkosivustoissa. Sen heikkous oli laajennus: se toimi selaimen omien teknologioiden ulkopuolella, ja siinä oli jatkuvia tietoturva- ja suorituskykyongelmia. Adobe lopetti Flash Playerin tuen 31. joulukuuta 2020 jälkeen ja esti Flash-sisällön näyttämisen 12. tammikuuta 2021 alkaen.
Lottie: vektorit ilman laajennusta
Airbnb:n Lottie jäsentää Adobe After Effects-animaatioita, jotka on viety muodossa JSON Bodymovin-laajennuksella ja renderöi ne natiivina verkossa, iOS, Android ja React Native. Se teki rikkaasta vektoriliikkeestä jälleen käytännöllisen sovelluksissa, ja se on edelleen laajimmin tuettu muoto yksinkertaisesti toistetuille animaatioille.
Puuttuva pala: interaktiivisuus
Lottie-tiedostot kuvaavat aikajanaa, eivät käyttäytymistä. Lottie-animaatio vastaa leijumiseen, lataukseen tai onnistumiseen tarkoittaa koodin kirjoittamista soittimen ympärille. Flash:ssä oli tämä toiminta sisäänrakennettu; laajennukseton maailma menetti sen.
Tilakoneet: käyttäytyminen tiedostossa uudelleen
Tilakoneen suoritusajat tuovat Flash-idean takaisin ilman laajennusta. Rive antaa sinun suunnitella vektorianimaatioita ja liittää sen tilakoneeseen, jonka syötteitä koodisi ohjaa. Valmistamamme ExodeUI soveltaa samaa ideaa tuotteen käyttöliittymässä lisäämällä asettelua, jousifysiikkaa ja logiikkaa yhteen avoimeen JSON-tiedostoon, jota toistetaan React:n, SwiftUI:n, Flutter:n ja muiden ajonajat.
Avain Principles muistettavat
- Flash yhdisti vektorianimaatiota ja interaktiivisuutta laajennuksessa
- Adobe lopetti Flash Playerin tuen 31. joulukuuta 2020 jälkeen
- Lottie toistaa After Effects-animaatioita, jotka on viety Bodymovin:llä, natiivisti
- Lottie animaatioiden toisto; interaktiivisuus vaatii lisäkoodia
- Tilakoneen suoritusajat tuovat tekijän toiminnan takaisin tiedostoon
Usein kysytyt kysymykset
Lähteet
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub (Airbnb)
- State Machine Playback — Rive asiakirjat