Jak vytvořit animaci načtení VueConf (během procesu učení o Vue.js a SVG)

Vue.js nedávno vydal novou vstupní stránku pro VueConf 2017, která obsahovala pěknou animaci. Co takhle udělat animaci a dozvědět se více o Vue.js a SVG?

Na co se zaměřujete: Jak na to, jak udělat animaci na vstupní stránce pro VueConf 2017. Konkrétně projdu procesem vytváření SVG, rozdělením animace, pomocí animací CSS k replikaci animace a ovládáním aplikace / načasování animací pomocí Vue.js. Je velmi zdlouhavý a podrobný. Doporučuji to udělat v kouscích, pokud je to potřeba. Pomocí tohoto Pocket můžete tento článek snadno uložit na později, takže se k němu nezapomeňte vrátit.

(Aktualizace 3/27/17): Začal jsem proces vytváření video kurzu pro poskytnutí velmi jasného a podrobného rozpisu SVG. Pokryju vysvětlení SVG „pod kapotou“, pomocí Affinity Designeru vytvořím podrobnou vektorovou grafiku, animaci s CSS, GreenSock, Mo.js a Anime.js, jakož i některé praktické aplikace animací UX. Přístup si můžete rezervovat zde.

Final Demo / Code: http://codepen.io/mikemang/pen/JWNOrr/

Příběh

Tento tutoriál je pro mě obzvláště potěšující, protože mě Vue.js zachránil před podvodným syndromem.

Po maturitě v oboru informatiky jsem netušil, co chci dělat ve světě vývoje, a přesto jsem se necítil sebevědomě ve svých schopnostech. Rychle jsem se potopil do podvodného syndromu. Těsně předtím, než jsem promoval, jsem byl představen online obchodům, podnikání a startupům prostřednictvím podcastu nazvaného Smart Passive Income Podcast od Pat Flynn.

Díky této zkušenosti bylo objevování moderního webového vývoje po mém promoci čerstvým vzduchem díky jeho nádherné vůni energie, nadšení, podnikatelským sklonům a sebevědomé mentalitě. To mě oživilo, když jsem se rozhodl zaměřit se na nalezení kariéry ve vývoji webu.

Takže jsem skočil přímo do učení všech moderních vývoj webových aplikací, zejména React. Stejně jako mnoho lidí, i já jsem nastavil latku, abych se stal full-stack webovým vývojářem.

Proorával jsem si video kurzy, Střední příspěvky a všechny další druhy dobrot a cítil jsem se, jako bych dělal slušný pokrok. Nakonec jsem byl schopen vytvořit tuto interaktivní tabulku výsledků Wrigley Field.

Když jsem se učil React, začal jsem se opravdu věnovat tvorbě vektorové grafiky pomocí Affinity Designer. Vytváření vektorové grafiky začalo jako zábavná mentální přestávka od stresující podpory práce 9–5 pracovních míst, když jsem věděl, že jsem chtěl být webovým vývojářem a podnikatelem, a nedělal jsem ani jedno.

K mému překvapení jsem si začal uvědomovat, že vektorová grafika a designové dovednosti obecně nejsou tak komplikované a pouze pro lidi s uměleckým zázemím. Dělal jsem skvělé, odvážné obrázky z jednoduchých tvarů a odvážný výběr barev.

Začal jsem si uvědomovat, že moje designérské dovednosti byly skutečně legitimní. Získal jsem zpět důvěru. Stále jsem se však snažil naučit, jak přenést své designové dovednosti na web.

Po experimentování a samoučbě s čistými CSS obrázky, SVG a vytvořením webových stránek s Bootstrapem jsem nakonec narazil na Vue.js. Vue.js byl dalším dechem čerstvého vzduchu. Zjistil jsem, že je tak snadné obtočit hlavu. Bylo to přístupné, čitelné a mnohem méně zastrašující než cokoli, s čím jsem se při učení vývoje webu setkal.

Začal jsem párovat Vue.js s frontendovým důrazem na design. Vyrobil jsem mini-aplikace jako bitevní aplikaci Pokemon, aplikaci Mad Libs, hodiny Pomodoro a další. Také jsem použil Vue.js k posypání animací a dalších velmi konkrétních dovedností. Úžasná část o Vue.js je, že ji lze použít od něčeho tak zvláštního jako animace až po tak široké jako dynamické webové aplikace.

Když jsem se učil Vue.js a dosáhl toho všeho, nakonec jsem byl úplně vyléčen z impostorového syndromu. Věděl jsem, že jsem našel prodejnou specifickou dovednost v oblasti frontendového vývoje s důrazem na design a kreativitu.

Coding Artist se narodil s touhou poskytnout zdroj za zdrojem, který lidem pomůže zažít cestu, kterou jsem právě popsal, když se naučil, jak najít obchodovatelnou sadu dovedností ve vývoji náročného frontendu.

S ohledem na tento příběh jsem se nemohl usmát, když jsem viděl tuto skvělou animaci na vstupní stránce VueConf, kterou vytvořil Damian Dulisz.

Vue.js je jedním z hlavních důvodů, proč jsem porazil podvodný syndrom, získal jsem důvěru v řešení nových výzev, jako jsou animace, a vytvořil jsem Coding Artist. Nyní mám příležitost napsat rozsáhlý návod jak vytvořit animaci použitou na jejich nové vstupní stránce pro VueConf. Jak již bylo zmíněno, jsem velmi potěšen tímto tutoriálem.

Navíc doufám, že tento tutoriál je dalším praktickým průvodcem, jak používat SVG, animace a Vue.js v aplikacích v reálném světě. Je to opravdu obchodovatelná dovednost, která je 100% v pořádku, aby se soustředila většina vaší pozornosti.

Když se to všechno řekne, pojďme k tomu.

Porouchání problému

Když jsem poprvé začal vidět používání SVG a animací, jako je ta, kterou procházíme v tomto příspěvku, měl jsem reakci „Ooh, to je super! Jen bych si přál, abych měl ponětí, jak to udělat. “

Poté, co jsem dal čas na učení, jsem si uvědomil, že dělat takovou animaci není příliš těžké, pokud dokážete problém správně rozložit. Pojďme na to.

Zde je to, co musíme rozebrat v nejširším / nejzjevnějším smyslu:

  1. Jak vytvořit grafiku
  2. Jak vytvářet animace

Nyní rozebíráme, co musíme udělat v konkrétnějším smyslu pro každý bod.

Co musíme udělat pro vytvoření grafiky:

  1. Rozdělte, jakou grafiku musíme vytvořit
  2. Rozdělte tvary, které tvoří každou grafiku
  3. Vytvořte tvary tak, aby tvořily každou grafiku jako vektorovou grafiku pomocí nástroje jako Illustrator, Sketch nebo Affinity Designer (já použiji ten druhý)
  4. Optimalizujte obrázky pro export
  5. Exportujte obrázky jako SVG
  6. Importujte soubory SVG a přidejte nějaký styling, aby se grafika po dokončení animace uspořádala do pozice, ve které budou.

Co musíme udělat, abychom vytvořili animace:

  1. Zpomalte celou animaci
  2. Určete animace pro každou konkrétní grafiku v netechnickém smyslu
  3. Napište animace CSS a vytvořte animace, které jsme určili v kroku 2
  4. Naučte se, jak zacházet s uspořádáním animací pomocí Vue.js

Poznámka: Grafika bude vytvořena pomocí nástroje Affinity Designer a kódujeme ji pomocí Codepenu.

Final Demo / Code: http://codepen.io/mikemang/pen/JWNOrr/

Rozdělení grafiky, kterou musíme vytvořit

Jako dobré cvičení se pokuste zjistit, zda můžete určit, jakou grafiku musíme vytvořit a jaké tvary budou tvořit každou grafiku. Zapište si to dolů a pak to projdeme.

Logo VueConf

Logo VueConf je logo Vue.js vzhůru nohama. Ukázalo se, že když se na to podíváme zvenku, mohlo by to usnadnit pochopení, jaké tvary potřebujeme.

Potřebujeme tři trojúhelníky na sobě: jeden malý bílý trojúhelník, jeden středně modrý trojúhelník a jeden velký zelený trojúhelník.

slunce

Sluneční grafika je velmi snadná. Na sobě jsou dva kruhy: jeden menší bílý kruh a jeden větší zelený kruh.

Keř

Bush je také velmi jednoduchý. Jsou to dva kruhy: jeden větší zelený kruh a jeden menší zelený kruh, který je na pravé straně většího kruhu.

Stromy

Stromy pokračují ve vzoru jednoduchosti. Levý strom je modrá čára, větší zelený kruh a menší zelený kruh nahoře. Pravý strom je jen modrá čára a velký kruh.

Titul

Kvůli času nebudu dělat titul v tomto tutoriálu.

Vytváření grafiky

Vytvoříme tvary pro vytvoření každé grafiky. Můžeme to udělat pomocí vektorové grafické GUI.

Pro tento tutoriál budu používat Affinity Designer, ale můžete použít alternativu Sketch, Adobe Illustrator nebo Inkscape. Affinity Designer je nejlevnější z placených možností na 50 USD a můj osobní favorit, ale každý to udělá. Inkscape je zdarma, ale omezené.

Až budete připraveni, začneme.

Logo VueConf

Začněme tím větším vnějším trojúhelníkem.

V nástroji Affinity Designer si mohu vybrat nástroj trojúhelníku takto:

Přetáhněte velký trojúhelník a aktualizujte barvu pomocí tohoto hex kódu pro zelenou barvu:

# 41B883

Nyní máme:

Dále můžete buď přetáhnout jiný trojúhelník, aby byl o něco menší, nebo můžete duplikovat pomocí CMD + J a změnit velikost přetažením za roh, zatímco držíte SHIFT. (Všechny zkratky naleznete zde)

Tento trojúhelník by se měl zachytit na dno většího trojúhelníku. Možná budete muset upravit vrstvy tak, aby byl tento trojúhelník nahoře pomocí následujících:

Zde je modrá barva:

# 35495E

Měli bychom skončit následujícím:

Můžeme to zopakovat a přidat menší bílý trojúhelník. Zde je hexadecimální kód:

#FFFFFF

Nyní máme kompletní logo.

Nyní chceme optimalizovat naše logo, kdy bude exportováno.

Můžete vybrat nástroj pro přesunutí a tažením přes každý trojúhelník je vybrat.

Zde je klip tohoto konceptu v akci:

Poté stiskem CMD + G (nebo Layer → Group) seskupte tyto tvary, které jsme vybrali.

Dále se podívejte na kartu Vrstvy na pravé straně obrazovky:

Vidíme, že jsme seskupili naše vrstvy / tvary. Dále najeďte myší nad (Skupina), dvakrát klikněte a pojmenujte „Logo VueConf“.

Pro správnou praxi rozbalte skupinu také:

Nyní pojmenujte každý trojúhelník s následující syntaxí:

Trojúhelník VueConf [Barva]

Nyní bychom měli mít:

Seskupením loga jsme v podstatě řekli: „hej, tyto tvary seskupené dohromady vytvoří grafiku“. Nyní můžeme exportovat tuto grafiku a vygeneruje jeden blok kódu SVG. Blok SVG pro celou naši grafiku s logem bude mít značky pro každý tvar. Pojmenováním každého tvaru budeme schopni rozlišit značky pro každý tvar v našem SVG kódu.

To bude mít větší smysl, když prozkoumáme kód SVG a importujeme jej do našeho projektu Codepen.

Prozatím zopakujeme všechny tyto kroky pro naši další grafiku.

slunce

Slunce by mělo být opravdu snadné.

Pomocí nástroje elipsa (kruh) můžeme vytáhnout větší zelený kruh.

Poté můžete duplikovat a změnit velikost nebo přetáhnout další menší bílý kruh.

Nakonec stačí přetáhnout bílý kruh do středu zeleného kruhu.

Zde je video tohoto konceptu v akci:

Zde jsou opět potřebné barvy:

//zelená
# 41B883
//bílý
#FFFFFF

Nyní bychom měli mít:

Uvědomte si, že umístění grafiky nezáleží, protože v našem projektu Codepen to nakonec uděláme s CSS.

Posledním krokem je opětovné seskupení a pojmenování jednotlivých tvarů:

Keř

Přetáhněte zelený kruh. Poté vytvořte další zelený kruh ve vaší preferované metodě.

Pomocí nástroje pro přesun přetáhněte menší kruh na správné místo.

Zelená barva:

# 41B883

Jakmile to dokončíte, seskupte grafiku, pojmenujte ji a poté pojmenujte jednotlivé jednotlivé tvary v této grafice. Poznámka: Pojmenoval jsem kruhy Bush Circle Left a Bush Circle Right, protože mají stejnou barvu.

Nyní byste měli tento proces zastavit.

Stromy

První strom, strom vlevo, lze vytvořit tak, že nejprve přetáhnete tenký modrý obdélník / čáru.

Modrá barva:

# 35495E

Poté tento tvar duplikujte (CMD + G) a podržte klávesu Shift a přetáhněte jej doprava. Přidržovací posuv zachová stejné vertikální umístění.

Se základnou pro naši stromovou levici a stromovou pravici, jdeme do toho a přidejte střední strom k levé stromě a velký kruh k stromové pravici, který uchopíme, aby byl vodorovně vystředěn na základnách našich stromů. To může zabrat nějaké věci, aby bylo dosaženo správné velikosti a polohy.

Zelená barva:

# 41B883

Nakonec stačí přidat další menší kruh na naší Stromové levici.

Nyní můžeme zabalit jednotlivé skupiny do skupin, pojmenovat je Strom vlevo a Strom vpravo a pojmenovat každý tvar v této grafice.

Export jako SVG

Dalším krokem je export každé grafiky jako souboru SVG.

Stačí kliknout na grafiku, přejděte na Soubor → Exportovat. Poté vyberte ikonu SVG a v části Oblast vyberte „Výběr bez pozadí“. Hit Export.

Uložte soubor místně s názvem [graphic name] .svg (tj. Bush.svg).

Příprava na import

Otevřete tuto šablonu a rozvětvte ji: http://codepen.io/mikemang/pen/f8f28ae6adcc716d097a07a2bfb2d00d

Jak vidíte, již jsem vytvořil krabici, která bude kontejnerem pro naši kompletní grafiku.

Import SVG

(Aktualizace 3/27/2017): Doporučuji používat SVGOMG namísto metody popsané níže k optimalizaci souborů SVG a získání kódu SVG.

S uloženými soubory SVG je dalším krokem jejich import do našeho projektu Codepen.

Nejprve musíme získat kód SVG.

Za tímto účelem můžeme přetáhnout soubory SVG na kartu Chrome. Zde je klip z toho v akci:

Začněme s kartou VueConfLogo.svg.

Klepněte pravým tlačítkem myši na obrázek a vyberte Zobrazit zdroj stránky.

Nyní vidíme kód SVG, který potřebujeme:

Potřebujeme pouze toto:

Logo VueConf

 < g id = "VueConf-Logo">     

Jednoduše poskytnu kódy SVG pro zbytek naší grafiky.

slunce

 < g id = "Sun">  < elipsa id = "Sun-Circle-Green" cx = "44.28" cy = "43.2" rx = "26.88" ry = "26.224" style = "fill: #fff;" />  

Keř

     

Strom vlevo

      

Tree Right

     

Vybalíme náš kód SVG Tree Right, abychom pochopili, co tento kód znamená.

Stručně řečeno, celá značka SVG je jedna grafika / obrázek. V rámci obrazu byly vytvořeny různé tvary, které tento obraz vytvořily. V této značce SVG máme další značky, které jsou kódem vytvořených tvarů.

V Tree Right jsme měli 1 kruh a 1 obdélník, který jsme pojmenovali před exportem.

Podívejte se znovu a všimněte si, jak má elipsa a obdélník výše hasvean id se jménem, ​​které jsme zadali:

Pojmenováním před exportem víme, na jaké tvary tyto značky odkazují.

Pokud bychom chtěli, mohli bychom přidat třídu do jedné ze značek tvaru a manipulovat s konkrétními vlastnostmi CSS pouze s jedním konkrétním tvarem v obrázku Tree Right. To znamená, že bychom mohli také přidat animace pouze pro tento jeden tvar.

Docela v pohodě, co ?!

Pojďme přidat tyto značky SVG do Codepenu.

Začněte kódem VueConf Logo a vložte jej přímo do pole

. Odstraňte hodnoty výšky a šířky na začátku značky SVG a přidejte logo třídy vueconf.

     

Nyní je logo přímo ve středu kontejneru. Normálně byste museli přidat velikost a pozici pro třídu, které jste dali SVG kód. Třídy jsem vám však již v šabloně napsal.

Opakujte to, co jsme právě udělali, ale nezapomeňte použít příslušný název třídy:

slunce
keř
strom-vlevo
stromová pravice

Po dokončení máme nyní grafiku umístěnou na správných místech:

Nyní je čas přidat animaci.

Rozbití animace

Abych to usnadnil, zpomalil jsem animaci 8x, abychom mohli získat dobrou představu o tom, jak to funguje.

Podívejte se na video a napište, co animace dělají netechnickým způsobem. Chcete hledat animaci a načasování různých animací pro každý tvar v každé grafice.

Zde jsou mé poznámky:

Logo VueConf

Sklouzne dolů z horní části obrazovky a je vodorovně vystředěn, spadne těsně za svislý a vodorovný středový bod a odskočí o úroveň výš.

Převrátí o 180 stupňů.

slunce

Nepohnul se z obrazovky.

Roste a zmenšuje se.

Keř

Nepohnul se z obrazovky.

Bush Circle Left roste a zmenšuje se.

Bush Circle Right začíná růst, když Bush Circle Left plně roste a poté se zmenšuje.

Strom vlevo

Stromová levá základna roste svisle, poté se vytváří stromová levá kruhová dno.

Levý kruh stromu Dno roste a zmenšuje se. Po dokončení se stromový levý kruh topí, roste a zmenšuje.

Tree Right

Pravá základna stromu roste svisle, poté se vytvoří pravý kruh stromu.

Pravý kruh stromu roste a zmenšuje se.

Nyní musíme udělat poznámky o načasování, kdy se každá grafika vytvoří ve srovnání s jinou grafikou. (tj. základna Tree Left Base se vytvoří ihned po otočení loga VueConf)

Zde jsou mé poznámky:

Logo VueConf je dokončeno.

Stromová levá základna se rozmnožuje a začíná růst.

Hned poté, co se stromová levá základna plně rozrůstá, se stromová pravá základna rozmnoží a začne růst.

Když stromová pravá základna plně roste, Bush Circle Left se tře a roste.

Slunce se tře a začíná růst, když je Tree Right kompletní.

S těmito poznámkami bychom měli mít dost na to, abychom začali psát animace CSS.

Psaní animací CSS

(Aktualizace 27.3.17): Proč používám animace CSS a ne knihovnu animací, jako je GreenSock? Zkrátka, animace CSS jsou jednodušší pro začátek s animacemi. Nechci představit externí knihovnu v blogu, který je již velmi podrobný. Nicméně bych doporučil GreenSock pro každého, kdo je spokojený s tím, jak animace funguje v CSS. Zde si můžete zarezervovat přístup na video kurz, který uvolníme pro CSG, GreenSock, Mo.js a Anime.js animace pomocí SVG.

Logo VueConf

Abychom mohli začít, musíme dokončit animaci loga VueConf, abychom udělali to, co jsme měli v našich poznámkách:

// 1
Sklouzne dolů z horní části obrazovky, klesne dolů těsně za svislý a vodorovný středový bod a odrazí se o úroveň výš.
// 2
Převrátí o 180 stupňů.

Napíšeme dvě různé animace.

První část, kterou můžeme nazvat slideInBounce. Zde je skořápka:

@keyframes slideInBounce {

}

Nyní musíme přidat změny ve vlastnostech CSS ve specifických bodech animace.

@keyframes slideInBounce {

0% {
    top: -100%;
  }
 70% {
    top: 33%;
  }
  100%{
    nahoru: 25%;
  }
}

Zde definujeme, že na 0% animace bude logo VueConf nad kontejnerem. Při 70% animace chceme, aby byla o něco nižší než její konečná pozice. Tím se vytvoří odrazový efekt, protože při 100% animace se vrátí na vrchol 0f 25%, což je klidová poloha ve středu našeho kontejneru.

V každém z těchto bodů musíme přidat další řádek.

V původní animaci vstupuje logo VueConf vzhůru nohama z klidové polohy. Proto logo vstoupí již převrácené a naše další animace převrátí logo zpět do normálu.

Otočíme logo vzhůru nohama pomocí transformace: otočit (-180deg).

@keyframes slideInBounce {
  0% {
    transformace: rotace (-180deg);
    top: -100%;
  }
 70% {
    transformace: rotace (-180deg);
    top: 33%;
  }
  100%{
    transformace: rotace (-180deg);
    nahoru: 25%;
  }
}

Použití negativu bude mít smysl, jakmile to uvidíme v akci.

Aby byla tato animace spuštěna, musíme do třídy vueconf-logo přidat příkaz animace.

.vueconf-logo {
pozice: absolutní;
výška: 50%;
šířka: 50%;
nahoru: 25%;
vlevo: 25%;
animace: slideInBounce 1s 1;
}

Zde máme tři části prohlášení o animaci.

  1. Název animace (slideInBounce)
  2. Doba trvání animace (1 s)
  3. Počet iterací (1)

Nyní bychom měli vidět, jak animace funguje.

Dále přidáme další animaci nazvanou překlopit, aby se logo otočilo ve směru hodinových ručiček do klidové polohy.

@keyframes flip {
  0% {
    transformace: rotace (-180deg);
  }
  100%{
    transformace: rotace (0deg);
  }
}

Animaci definujeme stejně jako předchozí. Zde chceme provést pouze jednu změnu z 0% na 100%. Chceme, aby se logo otočilo o 180 stupňů z -180 stupňů na 0 stupňů.

K logu vueconf pak můžeme přidat další animační příkaz:

.vueconf-logo {
pozice: absolutní;
výška: 50%;
šířka: 50%;
nahoru: 25%;
vlevo: 25%;
animace: slideInBounce 1s 1,
překlopit 0,5 s 1 s 1;
}

Přidáním čárky k předchozímu příkazu můžeme zřetězit další příkaz.

Nazýváme naše animační převrácení po dobu 0,5 sekundy. 1s označuje zpoždění animace.

Pojďme na to myslet.

Nyní máme dva animační příkazy. Chceme však spustit flip po dokončení slideInBounce. Pokud slideInBounce trvá 1 sekundu, musí být flip zpoždění 1s.

Nakonec jsme opět určili iteraci 1.

Nyní jsme hotovi s logem VueConf.

Strom vlevo

Levá základna stromu

Nejprve si přečtěte naše poznámky:

Stromová levá základna roste svisle, poté se vytváří stromová levá kruhová dno.

Vzhledem k tomu, že každé další grafické čekání na dokončení loga VueConf je nutné, než se objeví, bude třeba přistupovat odlišně.

Existují způsoby, jak bychom se mohli držet pouze CSS animací, ale můžeme také použít Vue.js, který se zdá být vhodný.

Než začneme přidávat náš kód Vue.js, shrnime, jak budeme muset zpracovat animace Tree Left, protože na dokončení loga VueConf musí počkat.

  1. Použijeme podmíněné vykreslení Vue, takže stromová levá základna, dolní levý kruhový strom a horní levý kruhový kruh se vykreslí pouze tehdy, pokud je příznak nastaven na true
  2. Příznak ovládající vykreslování Tree Left Base bude po 2 sekundách nastaven na true, aby počkal na dokončení loga VueConf.
  3. Při vázání třídy se stromová levá základna objeví a roste svisle, dokud není animace dokončena.
  4. Při použití stejných technik se po dokončení levého spodního okraje stromu objeví dolní okraj kruhu a bude mít animaci růstu a zmenšování.
  5. Poté uděláme to samé s horní hranou levého kruhu kromě toho, že to bude spuštěno po dokončení spodního spodního kruhu.

Začněme přidáním shellu nové instance Vue s názvem aplikace. Do šablony jsem již zahrnul skript Vue.js.

var app = new Vue ({
  el: "#app",
  data: {
    
  },
  metody: {
    
  }
})

Nyní přidáme div s id aplikace, abychom mohli navázat komunikaci mezi naším HTML a touto instancí Vue.

Chladný. Nyní přidáme do našich dat příznaky, které budou sloužit k podmíněnému vykreslení pro každý obrazec ve stromové levici.

var app = new Vue ({
  el: "#app",
  data: {
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false
  },
  metody: {
    
  }
})

Všechny tyto příznaky jsme nastavili na false, protože chceme, aby se každý tvar ve výchozím nastavení nevykresloval.

Dále stačí přidat v-if = „[flag name]“ pro každý tvar v našem HTML, takže navazujeme spojení s instancí Vue, abychom podmíněně vykreslili tvar.

 
  

Už nemůžeme vidět stromovou levici podle plánu.

Skvělý!

Dalším krokem je přidání logiky pro nastavení showTreeLeftBase na true po 2 sekundách (po dokončení loga VueConf). K tomu použijeme háčky životního cyklu Vue.

U jednoduchého příkladu je podmíněné vykreslení obvykle závislé na vstupu uživatele. Například, I funkce by mohla být volána po kliknutí na tlačítko pro nastavení příznaku na true a způsobit něco k vykreslení.

V našem příkladu chceme zavolat funkci, která nastaví showTreeLeftBase a způsobí vykreslení Tree Left Base po dvou sekundách (žádný uživatelský vstup).

Za tímto účelem přidáme následující životní cyklus:

var app = new Vue ({
  el: "#app",
  data: {
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false
  },
  metody: {
    
  },
  vytvořeno () {
    // volání funkce, která nastaví setTreeLeftBase na true
  }
})

Způsob, jakým tento životní cyklus funguje, je ten, že při vytvoření aplikace můžeme volat funkci. Tímto způsobem je funkce spouštěna životním cyklem, když je aplikace vytvořena, na rozdíl od vstupu uživatele.

Udělejme funkci nazvanou toggleTreeLeftBase a přidáme hovor do vytvořeného životního cyklu:

var app = new Vue ({
  el: "#app",
  data: {
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false
  },
  metody: {
    toggleTreeLeftBase: function () {
      
    }
  },
  vytvořeno () {
    this.toggleTreeLeftBase ()
  }
})

Dále přidáme řádek, který nastaví setTreeLeftBase na true v této nové funkci.

var app = new Vue ({
  el: "#app",
  data: {
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false
  },
  metody: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
    }
  },
  vytvořeno () {
    this.toggleTreeLeftBase ()
  }
})

Nyní se objevuje naše stromová levá základna.

Dále musíme přidat logiku, aby funkce nebyla vyvolána do 2 sekund po vytvoření životního cyklu, protože logo VueConf musí skončit.

K tomu můžeme použít setTimeout:

vytvořeno () {
    setTimeout (() => {
      this.toggleTreeLeftBase ()
    }, 2000)
  }

Poznámka: Může to vypadat jako zvláštní syntaxe, protože se jedná o ES6 (moderní syntaxe JavaScriptu). „() =>“ Je zkratka pro „function ()“.

setTimeout pracuje na zpoždění, když se v něm spustí kód. V našem případě bude this.toggleTreeLeftBase () po vytvoření nazván 2000 milisekund (2 sekundy), což nám poskytne 2sekundové zpoždění, aby logo VueConf skončilo.

Po dokončení loga VueConf se nyní můžeme setkat se základnou Tree Left Base.

Sladký!

Chceme však, aby stromová levá základna měla animaci. Vue poskytuje několik způsobů, jak to můžeme udělat. Jednou z možností je použití přechodových efektů, které nám umožňují určit animaci CSS, když se objeví něco, co je podmíněně vykresleno. Hovořím o tom podrobně v mém videu. Je to lepší varianta, ale myslím si, že je jednodušší jít s naší druhou možností, protože v tomto příspěvku již bylo hodně co strávit.

Druhou možností, kterou budeme využívat, je vazba třídy s Vue.js. Pomocí vazby třídy můžeme dynamicky řídit, které třídy nebo třídy jsou aktuálně aktivní v div v našem HTML.

Abychom to dokázali, musíme udělat následující:

  1. Napište třídu, že animace, která bude mít základnu Tree Left, roste vertikálně v jedné iteraci.
  2. Ve stejné funkci, kde jsme vytvořili Tree Left Base, přidáme třídu s animací, aby byla aktivní v divizi Tree Left Base.

Tímto způsobem získáme potřebnou animaci.

Nejprve napíšeme shell třídy, který bude volat animaci. Můžeme to nazvat growActive.

.growActive {
  
}

Zadruhé definujme shell animace, kterou budeme nazývat růst.

@keyframes grow {
  
}

Chceme, aby stromová levá základna rostla vertikálně, takže z 0% na animaci na 100% na animaci, musíme změnit výšku z 0% na 100%.

@keyframes grow {
  0% {
    výška: 0%;
  }
  100%{
    výška: 100%;
  }
}

Dále můžeme přidat příkaz animace v growActive a tuto animaci nazvat jednou. růst by měl běžet jednou po dobu 0,5 sekundy, takže děláme:

.growActive {
  animace: růst 0,5 s 1;
}

Nyní řekněme našemu HTML, že chceme, aby naše instance Vue ovládala aktivní třídu. Použijeme třídu v-bind:.

Ve výše uvedeném kódu jsme přidali v-bind: class = ”TreeLeftBaseClass” do značky tvaru pro naši Tree Left Base nalezenou v SVG kódu pro Tree Left. Nyní bude třída, která je aktivní v tomto tvaru, určena daty v naší instanci Vue s názvem treeLeftBaseClass, kterou musíme definovat.

var app = new Vue ({
  el: "#app",
  data: {
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: ""
  },
  metody: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
    }
  },
  vytvořeno () {
    setTimeout (() => {
      this.toggleTreeLeftBase ()
    }, 2000)
  }
})

Nyní má naše Tree Left Base třídu, která je v naší instanci Vue řízena treeLeftBaseClass. Ve výchozím nastavení jsme žádné třídě přiřadili, protože chceme, aby byla třída přidána pouze při načtení základny Tree Left.

Posledním krokem pro stromovou levou základnu je změna treeLeftBaseClass uvnitř funkce toggleTreeLeftBase, na které je zapnuta stromová levá základna.

var app = new Vue ({
  el: "#app",
  data: {
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: ""
  },
  metody: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
      this.treeLeftBaseClass = "growActive"
    }
  },
  vytvořeno () {
    setTimeout (() => {
      this.toggleTreeLeftBase ()
    }, 2000)
  }
})

Naše animace nyní funguje pomocí vázání třídy!

Je tu jen jeden malý problém. Chceme, aby rostla zdola, takže musíme rychle upravit naši animaci růstu.

@keyframes grow {
  0% {
    transformace: translatey (100%);
    
  }
  100%{
    transformace: translatey (0%);
  }
}

Pomocí této animace nyní roste zdola.

Přiznám se, že je lákavé pokračovat, protože to bude vyžadovat trochu vysvětlení, proč to funguje. Vždy však zdůrazňuji, že budu dělat, co bude v mých silách, abych nikdy nevycházel z mého učení. Proto budu pokračovat a vysvětlit to.

translateY se používá k pohybu něčeho nahoru nebo dolů (přemýšlejte o souřadnici y v grafu). Tady je stejná animace aplikovaná na obdélník v jiném projektu:

Tento černý obdélník má výšku 20% (vzhledem k celému oknu). translateY (100%) ho tlačí dolů o 100% své výšky, tedy o 20%. Na konci animace se vrátí k překladu Y (0%), vůbec nevtlačené dolů. Neexistuje žádný rostoucí účinek, ale spíše posunovací účinek.

Tak proč to funguje v našem příkladu?

Podívejme se na vizuální představu o stromové levici. Přidejte hranici do třídy vlevo:

.tree-left {
  pozice: absolutní;
  výška: 25%;
  šířka: 30%;
  zbývá: 0%;
  spodní: 25%;
  okraj: plná červená 3px;
}

Vidíme, že Tree Left je v krabici.

Změňte šířku. Zcela vlevo na 20%.

Výška a šířka ovládají pole kolem stromu vlevo.

Co se to tu děje?

SVGs znamená škálovatelnou vektorovou grafiku. Stručně řečeno, nefunguje to jako tradiční obrázek, který si můžete vynutit určitou výšku a šířku. Nebude schopen automaticky udržovat správný poměr výšky k šířce.

Stejně jako na obrázku výše vizualizuje, můžete mít obrázek, který má původně 200 x 200 pixelů, který lze přeměnit na jinou velikost bez zachování poměru. Místo toho je schopen měřítko a udržovat poměr.

Abych toho podrobně porozuměl, budu se chovat a doporučuji tento skvělý článek od CSS-Tricks.

Abyste pochopili naši animaci překladu, musíte pochopit pouze to, že kolem stromu vlevo je k dispozici měřítko. Pokud zatlačíme Tree Left dolů pod krabici, nebudeme to vidět.

Z tohoto důvodu odstraníme hranici a znovu prozkoumáme animaci růstu:

@keyframes grow {
  0% {
    transformace: translatey (100%);
    
  }
  100%{
    transformace: translatey (0%);
  }
}

Zde zatlačíme na levou základnu stromu o 100% kvůli translateY (100%), takže je zcela pod krabicí a neviditelná.

Když se posune zpět, kvůli překladu Y (0%), přechází zcela z krabice pod krabici. Dokud nebudeme plně zasáhnout 100% překlad Y, bude část ořezané části stromu odříznuta. Z tohoto důvodu máme „růst“ efekt zdola nahoru „odhalením“ Stromové levé základny v průběhu doby trvání.

V pořádku. Zhluboka se nadechneme a rekapitulujeme. Když se objeví, máme nyní pracovní animaci pro Tree Left Base.

Dokázali jsme to posypáním vazby třídy Vue a podmíněným vykreslením na naše animace CSS.

Levý kruh stromu dole

Dobrou zprávou je, že s Tree Left Base z cesty, všechno ostatní by mělo být snazší pochopit a dokončit.

Pojďme prosadit a přidat spodní část levého kruhu stromu.

Nejprve si přečtěte naše poznámky k animaci.

Levý kruh stromu Dno roste a zmenšuje se.

Musíme také mít na paměti načasování. To by se mělo objevit po dokončení animace Tree Left Base. Začněme tím, že se to objeví včas. Poté můžeme přidat animaci.

Podobný přístup můžeme použít pro oddálení animace pomocí setTimeout. Tentokrát však bude setTimeout uvnitř toggleTreeLeftBase

metody: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
      this.treeLeftBaseClass = "growActive"
      setTimeout (() => {
      
      }, 500)
    }
  },

Pokud si vzpomenete, tato funkce se nazývá v vytvořeném životním cyklu, který je zpožděn o 2 sekundy pomocí setTimeout:

vytvořeno () {
    setTimeout (() => {
      this.toggleTreeLeftBase ()
    }, 2000)
  }

Když je tato funkce nazývána, stromová levá základna se vynoří a dá třídě s animací, která trvá 0,5 sekundy.

Proto přidáním setTimeout do toggleTreeLeftBase můžeme zavolat funkci s názvem toggleTreeLeftCircleBottom po 0,5 sekundách (500 milisekund), abychom nechali animaci Tree Left Base dokončit.

Pojďme přidat hovor do přepínačeTreeleftCircleBottom, který napíšeme brzy.

metody: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
      this.treeLeftBaseClass = "growActive"
      setTimeout (() => {
        this.toggleTreeLeftCircleBottom ()
      }, 500)
    }
  },

Dále přidáme toggleTreeLeftCircleBottom a logiku, abychom mohli mít spodní okraj stromu vlevo.

toggleTreeLeftCircleBottom: function () {
  this.showTreeLeftCircleBottom = true
}

Nyní bychom měli mít spodní kruhový kruh dole po dokončení levé základny stromu, jak jsme doufali.

Nyní musíme zvládnout animaci.

Znovu použijeme vázání třídy.

Nejprve do naší značky HTML přidáme třídu v-bind: do značky tvaru dolního kruhu stromu dolního kruhu.

Za druhé, můžeme přidat některá data do naší instance Vue, která přiřadí třídu.

data: {
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: ""
  },

Nyní provedeme připojení, takže třída Třída doleva kruhu bude řízena stromem LeftCircleBottomClass. Chceme dát žádné třídě, aby mohla začít, a přidáme třídu obsahující animaci ve stejné funkci, když ji přepneme. Udělejme to hned a přiřaďte třídu „growShrinkActive“.

toggleTreeLeftCircleBottom: function () {
  this.showTreeLeftCircleBottom = true
  this.treeLeftCircleBottomClass = "growShrinkActive"
}

Dále vytvořme třídu s názvem growShrink v našem CSS.

.growShrinkActive {
  
}

Dalším krokem je definování animace zvané growShrink.

@keyframes growShrink {
  0% {
    transform-origin: center;
    transformace: měřítko (0);
  }
  50% {
    transform-origin: center;
    transformace: měřítko (1.3);
  }
  100% {
    transform-origin: center;
    transformace: měřítko (1);
  }
}

Zde používáme transform: scale ([scale scale]), abychom zvládli efekt růstu a smrštění.

Pomocí transform-origin: center určíme, že chceme růst a zmenšovat se od středu kruhu, jako je animace, kterou se pokoušíme replikovat.

Chcete-li si to prohlédnout, přidejte k animaci prohlášení animace, aby rostlAhrinkActive.

.growShrinkActive {
  animace: growShrink 0.5s 1;
}

V tomto prohlášení o animaci nazýváme growShrink na posledních 0,5 sekundy a bude spuštěno pouze jednou.

Nyní můžeme vidět, že to funguje podle očekávání.

Woohoo! Levý kruhový dolní konec je dokončen!

Vrchol levého kruhu stromu

Tím, že se naučíte, jak zacházet se základnou Tree Left Base a Tree Left Circle Bottom, je zbytek tohoto procesu snadnější a rychlejší k dokončení.

Vrchol levého kruhu stromu bude zpracováván přesně jako dolní okraj levého kruhu stromu.

Jedinou změnou bude to, že čeká na konec spodního kruhového stromu.

Nejprve přidáme setTimeout, který bude volat funkci s názvem toggleTreeLeftCircleTop.

toggleTreeLeftCircleBottom: function () {
   this.showTreeLeftCircleBottom = true
   this.treeLeftCircleBottomClass = "growShrinkActive"
   setTimeout (() => {
    this.toggleTreeLeftCircleTop ()
   }, 500)
}

Za druhé, definujeme funkci, kterou jsme právě volali, a přidáme logiku k přepínání na Tree Left Circle Top.

toggleTreeLeftCircleTop: function () {
  this.showTreeLeftCircleTop = true
}

Dále přidáme třídu v-bind: do značky tvaru v našem HTML.

Nyní budeme muset v našem Vue definovat treeLeftCircleTop a přiřadit mu třídu pro Tree Left Circle Top.

data: {
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: ""
},

Jak jsme to udělali dříve, zapíšeme logiku do přepínačeTreeLeftCircleTop pro přiřazení growShrinkActive.

toggleTreeLeftCircleTop: function () {
  this.showTreeLeftCircleTop = true
  this.treeLeftCircleTopClass = "growShrinkActive"
}

Všimněte si, že jsme již definovali growShrinkActive pro dolní okraj stromu vlevo. Děláme to proto, že se jedná o stejnou animaci. Bude aplikováno pouze v jiném čase.

Woah! Měli bychom dokončit Tree Left Circle Top.

Tree Right

Protože jsme dokončili Tree Left, bude Tree Right téměř totožný. Bude to jen o trochu snazší, protože máme pouze jeden kruh. Z tohoto důvodu se chystám zvednout tempo a být trochu méně vyčerpávající v detailech.

Pravá základna stromu

Začněme kontrolou poznámek pro naše načasování Tree Right Base.

Hned poté, co se stromová levá základna plně rozrůstá, se stromová pravá základna rozmnoží a začne růst.

Nejprve musíme nastavit podmíněné vykreslování, protože chceme, aby se to vykreslilo, když se stromová levá základna plně rozrůstá.

Budeme muset definovat příznak, abychom to zvládli v našich datech instance Vue. Také jsem přidal příznak pro Tree Right Circle.

data: {
    // treeLeft stuff
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: "",
    // treeRight stuff
    showTreeRightBase: false,
    showTreeRightCircle: false
  },

Pak musíme informovat naše HTML o tom, že Vue.js bude zpracovávat vykreslování.

Děláme to přidáním v-if = „[flag name]“ do značek tvaru pravého stromu i pravého stromu.

Naše Tree Right se nyní vykresluje, protože vlajky byly nastaveny na false.

Perfektní. Dále musíme zpracovat zobrazení stromu vpravo a použít animaci, když se objeví.

V našich poznámkách jsme se zmínili o tom, že se stromová pravá základna rozmnožuje poté, co roste levá základna. Je to také stejný okamžik, kdy se objeví spodní levý kruh stromu. Proto můžeme zavolat funkci pro přepínání na Tree Right Base ve stejné sadě setTimeout, která volá funkci pro přepínání na dolním okraji levého stromu.

    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
      this.treeLeftBaseClass = "growActive"
      setTimeout (() => {
        this.toggleTreeLeftCircleBottom ()
        this.toggleTreeRightBase ()
      }, 500)
    },

Dále píšeme toggleTreeRightBase a logiku přepínání na Tree Right Base.

toggleTreeRightBase: function () {
  this.showTreeRightBase = true
}

Třída growShrinkActive se aplikuje na základnu Tree Left Base, když se vytvoří. Pak uděláme totéž pro Tree Right Base.

Nejprve řekněme našemu HTML, že Vue.js zvládne třídu přiřazenou k Tree Right Base.

Za druhé, v datech naší instance Vue definujeme treeRightBaseClass.

data: {
    // treeLeft stuff
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: "",
    // treeRight stuff
    showTreeRightBase: false,
    showTreeRightCircle: false,
    treeRightBaseClass: ""
  },

Když se stromová pravice vynoří, musíme přiřadit třídu growShrinkActive.

  toggleTreeRightBase: function () {
    this.showTreeRightBase = true
    this.treeRightBaseClass = "growShrinkActive"
  }

Nyní máme naši Pravou základnu stromů plně funkční.

Pravý kruh stromu

Stejně jako u našeho spodního kruhového spodního kruhu potřebujeme toto plodit hned po růstu základny. Proto můžeme přidat to setTimeout do toggleTreeRightBase, které spustí volání funkce s názvem toggleTreeRightCircle, když Tree Right Base dokončí animaci.

    toggleTreeRightBase: function () {
      this.showTreeRightBase = true
      this.treeRightBaseClass = "growShrinkActive"
      setTimeout (() => {
         this.toggleTreeRightCircle ()
      }, 500)
    }

Dále můžeme definovat toggleTreeRightCircle a zahrnout logiku pro přepínání pravého kruhu Tree on on.

toggleTreeRightCircle: function () {
  this.showTreeRightCircle = true
}

Náš pravý kruh stromu se nyní objevuje včas.

Abychom to dokončili, v našem HTML zapneme vázání třídy pomocí Vue.js, definujeme data, která přiřadí aktivní třídu, a poté přiřadíme growShrinkActive ve stejné funkci, která přepíná na pravém kruhu stromu.

Chcete-li zapnout vázání třídy pomocí Vue.js v našem HTML, můžeme:

Dále definujeme tato data pro přiřazení aktivní třídy.

data: {
    // treeLeft stuff
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: "",
    // treeRight stuff
    showTreeRightBase: false,
    showTreeRightCircle: false,
    treeRightBaseClass: "",
    treeRightCircleClass: ""
},

Nakonec můžeme nastavit treeRightCircleClass tak, aby rostlShrinkActive v toggleTreeRightCircle.

    toggleTreeRightCircle: function () {
      this.showTreeRightCircle = true
      this.treeRightCircleClass = "growShrinkActive"
    }

Stejně jako to, Tree Right je hotovo!

Keř

Nejtěžší části, stromy, jsou hotové. Nyní bychom měli mít tento proces pochopení. Z tohoto důvodu budu poskytovat kód pro každý krok s několika řádky popisu pro zbývající keře a slunce.

Podívejme se na poznámky pro Bushe.

Bush Circle Left roste a zmenšuje se.
Bush Circle Right začíná růst, když Bush Circle Left plně roste a poté se zmenšuje.
//načasování
Když stromová pravá základna plně roste, Bush Circle Left se tře a roste.

Bush kruh vlevo

Krok 1: Přidejte podmíněné vykreslení (bude zahrnovat také Bush Circle Right)

HTML

 <

JS

data: {
    // treeLeft stuff
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: "",
    // treeRight stuff
    showTreeRightBase: false,
    showTreeRightCircle: false,
    treeRightBaseClass: "",
    treeRightCircleClass: "",
    // bush věci
    showBushCircleLeft: "",
    showBushCircleRight: ""
},

Krok 2: Volejte toggleBushCircleLeft z setTimeout v toggleTreeBaseLeft. Chcete-li zapnout, přidejte funkci s logikou.

toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
      this.treeLeftBaseClass = "growActive"
      setTimeout (() => {
        this.toggleTreeLeftCircleBottom ()
        this.toggleTreeRightBase ()
        this.toggleBushCircleLeft ()
      }, 500)
    },
//později
toggleBushCircleLeft: function () {
  this.showBushCircleLeft = true
},

Krok 3: Přidejte vazbu třídy v HTML a JS. Přiřadit třídu growShrinkActive v toggleBushCircleLeft.

HTML

JS

data: {
    // treeLeft stuff
    showTreeLeftBase: false,
    showTreeLeftCircleBottom: false,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: "",
    // treeRight stuff
    showTreeRightBase: false,
    showTreeRightCircle: false,
    treeRightBaseClass: "",
    treeRightCircleClass: "",
    // bush věci
    showBushCircleLeft: "",
    showBushCircleRight: "",
    bushCircleLeftClass: ""
  },
// metodami
 toggleBushCircleLeft: function () {
   this.showBushCircleLeft = true
   this.bushCircleLeftClass = "growShrinkActive"
},

Bushův levý kruh by nyní měl fungovat tak, jak chceme!

Bush Circle Right

Vzhledem k tomu, že Bush Circle Right je přesně stejný postup a logika, chystám se poskytnout všechny aktualizace kódu.

HTML

JS

    // pod daty
    // bush věci
    showBushCircleLeft: "",
    showBushCircleRight: "",
    bushCircleLeftClass: "",
    bushCircleRightClass: ""
    //metody
    toggleBushCircleLeft: function () {
      this.showBushCircleLeft = true
      this.bushCircleLeftClass = "growShrinkActive"
      // počkejte 0,25 sekundy, protože chceme, aby se Bush Circle Right plodil, když Bush Circle Left roste
     setTimeout (() => {
        this.toggleBushCircleRight ()
      }, 250)
    },
    toggleBushCircleRight: function () {
      this.showBushCircleRight = true
      this.bushCircleRightClass = "growShrinkActive"
    },

Stejně jako to, Bush je hotový se zbývajícím sluncem! Konečně!

slunce

Slunce je nejjednodušší animace. Místo toho, abychom museli každý konkrétní tvar podmíněně vykreslovat a animovat, můžeme jej použít pouze na celou grafiku, protože pro své tvary nemá odlišné animace a načasování.

Slunce roste a zmenšuje se.
//načasování
Slunce se tře a začíná růst, když je Tree Right kompletní.

Krok 1: Přidejte podmíněné vykreslení

HTML

JS

// pod daty
// sluneční věci
showSun: false

Krok 2: Vytvořte funkci pro přepínání na Slunci. Toto by se mělo nazvat v novém setTimeout pod toggleTreeRightCircle, protože Slunce se musí objevit, když roste pravý stromový kruh.

   toggleTreeRightCircle: function () {
      this.showTreeRightCircle = true
      this.treeRightCircleClass = "growShrinkActive"
      setTimeout (() => {
        this.toggleSun ()
      }, 250)
      // počkáme 250 sekund, protože to je okamžik, kdy roste pravý kruh stromu, a ne až skončí
    },
   //později
   toggleSun: function () {
    this.showSun = true
   }

Krok 3: Přidejte vazbu třídy a přiřaďte třídu growShrinkActive hned po zapnutí Sunu. Budu také poznamenat, že vazba na třídu se zde bude mírně lišit. Protože to aplikujeme na celé Slunce, ve třídě SVG již existuje třída slunce. To bude odstraněno a ve výchozím nastavení bude sluncem přiřazená třída. Protože můžeme mít více tříd v CSS, budeme mít třídu sun a growShrinkActive přiřazené hned poté, co se objeví Sun.

HTML

JS

//data
// sluneční věci
showSun: false,
sunClass: "sun"
//metody
toggleSun: function () {
  this.showSun = true
  this.sunClass = "sun growShrinkActive"
}

Studené fazole! Dokončili jsme animaci!

Final Demo / Code: http://codepen.io/mikemang/pen/JWNOrr/

Závěrečné myšlenky

Po 15 hodinách od psaní tohoto příspěvku jsem si uvědomil, že se nejedná o dokonalou repliku a spoustu věcí, které je třeba vzít. Doufejme, že zde byly některé užitečné kousky a kousky, které jste z přečtení tohoto textu získali.

Pokud hledáte více zkušeností s animacemi, vyzývám vás, abyste udělali přesně to, co jsme v tomto příspěvku udělali. Rozebrat animaci a dokončit ji kousek po kousku. Velmi doporučuji začít jednodušším příkladem a postupovat.

Pokud hledáte skutečné, praktické animace, které se rozpadnou a replikují, doporučuji produkt Hunt. Produkt Hunt má spoustu odkazů na vstupní stránky, které musí být moderní a používají alespoň nějakou animaci.

Pokud hledáte něco strukturovanějšího, můžete si zarezervovat přístup k mému nadcházejícímu kurzu SVG, který pokryje vše od základů SVG až po vytváření podrobné vektorové grafiky s Affinity Designerem, všechny způsoby animace SVG pomocí externích knihoven a praktické aplikace, jako je výroba knihovnu ikon, vytvoření animované vstupní stránky a animace UX.

Jakákoli zpětná vazba je vítána a oceňována.

Na zdraví,
Mike Mangialardi
Zakladatel kódovacího umělce