MagyarmagyarSVG-alakváltás widget
Animáció SVG-útvonallal megadott alakzatok között: indítás, viewbox, időzítés és az egyes útvonalak beállításai.
Az SVG-alakváltás widget animált átmenetet készít különböző alakzatok között. Az alakzatokat SVG-útvonallal (path) adod meg.
Vezérlők
Szekció neve “Vezérlők”A Vezérlők szakasz azt dönti el, mi indítsa az animációt.
| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Eseményindító | Animáció: végtelen ciklus az alakzatok között. Rámutatás: akkor indul, amikor az egérkurzor (mobilon az ujj) az elemhez ér. Görgetés: akkor indul, amikor a görgetéssel az elem területére érsz. | Animáció |
| Animációs vezérlők | Lejátszás és Szüneteltetés gombok. Szünet módban az alakzatok alakíthatók, lejátszás módban az animáció kezelhető a jelenetek között. A szerkesztőben szünet módban könnyebb módosítani az alakzatok paramétereit; a blokkra kattintva váltasz az alakzatok között. | |
| Yoyo | Bekapcsolva az animáció a végén visszafelé is lefut. | Nem |
| Ismétlés | Az ismétlések száma. A -1 végtelen, a 0 nem ismétlődik. | -1 |
SVG és Viewbox
Szekció neve “SVG és Viewbox”
| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Mintázat képe | Bekapcsolva képet használhatsz az alakzat kitöltéseként (mintázatként). | Nem |
| SVG ViewBox: Szélesség, Magasság | Az SVG rajzterület mérete. | 600 × 600 |
| Tartalom szélessége, Tartalom magassága | Az SVG-tartalom mérete (eszközönként külön is megadható). |
Animációk
Szekció neve “Animációk”Az alakzatok közti átmenetek közös beállításai. Ezek egyetlen útvonalnál (path) külön is felülírhatók.
| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Átmenet sebessége | Az alakzatok közti átmenet sebessége másodpercben. | 0,7 |
| Lépés időtartama | Ennyi másodperc telik el a következő átmenet előtt. | 1 |
| Easing | A gyorsulás típusa: Nincs, Be, Ki vagy InOut. | InOut |
| Egyenlet | A gyorsulási görbe: Lineáris, Power1, Power2, Power3, Power4, SlowMo, Vissza, Elastic, Pattogás, Circ, Expo, Szinusz. | Power3 |
path: az alakzatok
Szekció neve “path: az alakzatok”A path szakasz listája az alakzatokat tartalmazza (alapból négy van: path_1 … path_4). Új alakzatot az Elem hozzáadása gombbal veszel fel, a másolás ikon másolatot készít, az X törli.
Egy útvonal beállításai:
- Számok: a koordináták sorozata (az útvonal adata, felépítéséről és beszerzéséről az SVG alapok fejezetben olvashatsz);
- Transzformáció: a forgatás;
- Pozíció: az X és Y pozíció;
- Stílus: kitöltő kép, kitöltési szín, körvonal színe, vonalvastagság;
- Animáció: sebesség, lépés időtartama, easing típusa és sebességfüggvénye.
Stílus
Szekció neve “Stílus”A Stílus szakasz az Igazítás beállítással a widget helyét állítja: Bal, Középre vagy Jobb.
Készült: