Vinkkejä ja temppuja Adobe Illustratorissa: Vinkkejä Illustratorissa. Mahdollisuus luoda grafiikkaa Illustratorissa (verrattuna Adobe Flashiin). Opas: SVG-animaatioiden luominen After Effects CC:llä Animaatioiden luominen Adobe Illustratorissa

Adobe Illustrator ja After Effectsistä
Tuo ja yksinkertainen animaatio Hei. Tänään tarkastelemme yksinkertaista animaatiota After Effectsissä.

Resurssit: Adobe Illustrator CC
Adobe After Tehosteet CC

Aloitetaan oppiminen piirtämällä Illustratorissa.

Piirretään
1) Piirrä keltainen suorakulmio taustaksi

Kuva 1 - Suorakaide

2) Piirrä ympyrä ja täytä se gradientilla
Työstetään vähän ympyrää:
- poista ääriviivan alapiste, saamme kaaren;
- piirrä suora viiva sulkemalla kaaren alaosan, saamme puoliympyrän


Kuva 2 - 1) piirrä ympyrä; 2) gradientti; 3) poista piste

3) Piirrä suorakulmio ja tee siitä kopio
- yksi harmaa suorakulmio;
- toinen suorakulmio on tummanharmaa
4) Piirrä kolmio tähdestä asettamalla säteiden lukumääräksi 3


kuva 3 - 1) suora valo; 2) suora tumma; 3) kolmio

5) Piirrä kissa kynällä ja yksinkertaisilla kuvioilla

kuvio 4 - 1) pää; 2) kaula; 3) runko; 4) jalka; 5) häntä

Ja nyt TÄRKEIN hetki
Jaetaan kuvat kerroksiin (mikä animoidaan on erillisellä tasolla) näin:

Kuva 5 - kaikki kuvat (punainen merkitse tärkeät tasot)

Siinä se, nyt säästetään.
Katsotaanpa tallennusasetuksia


Kuva 6 - Tallenna

Ja nyt seuraava vaihe. Sulje Adobe Illustrator ja avaa After Effects.

Tuo After Effectsiin
Tiedosto - Tuo - Tiedosto - valitse tallennettu Illustrator-tiedosto.
Valitaan tasojen tuonti Illustratorista; jos laitamme materiaalia, saamme kuvan yhdistetyillä tasoilla, mutta emme tarvitse sitä.

Kuva 7 - Tuo kokoonpanona

Siinä se, tuotu.
Katsotaan nyt mitä meillä on. Tuplaklikkaus koostumuksen mukaan niin, että se avautuu ja näemme kerrokset (jos kaikki tehdään oikein, kerroksia on useita). Ymmärrämme tämän, katso kuva


Kuva 8 - Avoin kokoonpano

Ja nyt olemme täällä tänään animaatiota varten.

Animaatio After Effectsissä
Aseta pyörimispiste nuolen yläosassa Pan Behind Tool -työkalulla (pikakuvake - Y). Otamme vain pisteen ja siirrämme sen sinne, missä tarvitaan. Tuloksena se näyttää tältä..

Kuva 9 - Panorointityökalu ja tasot

Siinä kaikki, siirrytään nyt animaation tasoihin.
Tarvitsemme Arrow- ja Head_cat-kerroksen.
Aloitetaan nuolella.
Laajenna listaa, etsi se ja napsauta kelloa. Joten asetamme ensimmäisen pisteen nollaan sekuntiin. Animaatio kestää yhteensä 2 sekuntia.
Joten, sinun on tehtävä seuraavat asetukset (annamme yhteensä 3 pistettä):

Toinen 0 1 2
+66 - 70 +66
Tältä se näyttää:


Kuva 10 - Pyörimisnuoli

Nyt animoidaan kissan pää.
Laajenna head_cat ja etsi sijainti .
Tässä tulee olemaan 4 pistettä.
Vain viimeinen koordinaatti muutetaan vaikuttamatta muihin.

Toinen 0.1 0.17 1.12 2.0
asema 689.3 729.3 729.3 689.3
Katsotaanpa kuvaa.


Kuva 11 - Aseta pää

Eli animaation periaate oli tällainen. Nuoli heiluu sivulta toiselle, heti kun se lähestyy kissanpentua, se vetää päänsä sisään, viipyy tässä asennossa jonkin aikaa ja palauttaa sen sitten paikoilleen.

Viimeinen vaihe

Tuotanto
Sinun on luotava työstäsi valmis tuote.
Siirry valikkoon - Lisää renderöintijonoon
Renderöi-paneeli avautuu ja Output Module (kahdella napsautuksella) valitse tulostusmuoto. Otin *.mov


Kuva 12 - Renderöi

Napsauta RENDER-painiketta ja saat tuloksen (älä unohda määrittää polkua).
Siinä kaikki.

Monimutkaistaan ​​nyt tehtävää hieman - luodaan animoitu Flash-banneri. Tässä tapauksessa ei tietenkään tarvitse puhua täysimittaisesta Flash-animaatiosta - tähän on erikoispaketteja. Mutta yksinkertaisen amatöörivideon luomiseen voit käyttää myös Illustratoria.

Adobe Illustratorin animaatiokehitysohjelmille tyypillisiä työkaluja tai käyttöliittymäominaisuuksia, kuten aikajanaa, ei ole. Mutta on yksi hienous - voit käyttää tasoja kehyksinä.

Luo banneri, jossa on vain tekstiä.

  • Ryhmittele symbolit Object › Group -komennolla.
  • Seuraava tehtävä on tehdä ääriviivaobjekteja fontin symboleista, muuten oikea tasojen muodostus ei toimi. Voit tehdä tämän valitsemalla ryhmän ja valitsemalla Tyyppi › Luo ääriviivat (Fontti › Jäljitys).
  • Tämän jälkeen avaa Tasot-palettivalikko napsauttamalla paletin nuolipainiketta (kuva 8.11).

    • Riisi. 8.11. Tasot palettivalikko

    Tässä valikossa olemme kiinnostuneita Release to Layer (Sequence) -komennosta, joka muuntaa jokaisen yksittäisen objektin uusi kerros. Huomaa, että komentoa käytettäessä tulee valita ryhmäryhmä, ei Layer 1 -tasoa.

    Miltä Tasot-paletin pitäisi näyttää, kun Release to Layer (Sequence) on suoritettu, on esitetty kuvassa. 8.12


    Riisi. 8.12 Tasot-paletti suorituksen jälkeen Release to Layer (Sequence)

    Tässä vaiheessa valmistelu on valmis, voit tallentaa SWF-tiedoston Tallenna verkkoon -toiminnolla. SWF on tärkein Flash-tekniikoihin perustuva grafiikkamuoto. Olisi tarkempaa sanoa, että tämä on Flash-muoto (kuva 8.13).

    Todennäköisesti nykyään kaikki käyttäjät tuntevat Flashin tavalla tai toisella. Tämä on tällä hetkellä Internetin yleisin animaatiomuoto, jonka avulla rakennetaan valtaosa multimedia-internet-sivuista.

    Adobe Illustrator ei tietenkään ota käyttöön kymmenesosaa Flashin ominaisuuksista, koska sitä ohjelmaa ei ole suunniteltu. Siinä voit kuitenkin tehdä joko staattisen kuvan tai yksinkertaisen animaation.


    Riisi. 8.13. SWF-muodon optimointiasetukset

    Seuraavat asetukset ovat käytettävissä.

    • Lue ainoastaan. Jos valitset tämän ruudun, tiedosto kirjoitetaan siten, että sitä ei voi enää avata muokattavaksi missään ohjelmassa. Tämä toisaalta pienentää tiedostokokoa ja toisaalta suojaa tekijänoikeuksiasi.
    • Asetus, jota ilmaisee 1. Parametri, joka määrittää tallennustyypin - kuva tai animaatio.
    • Jos valitset AI ​​File to SWF File -vaihtoehdon SWF-tiedosto), kuva tallennetaan staattisena kuvana, joka toistaa täysin sen, mitä näet näytöllä, kun työskentelet Illustratorissa.
    • Layers to SWF Frames -toiminnolla voit luoda animaatioita olemassa olevien tasojen perusteella, jotka esitetään kehyksinä. Meidän on valittava tämä vaihtoehto.
    • Käyrän laatu. Alkuperäisen kuvan käyrätiedostoa toistavien käyrien tarkkuus. Tämän parametrin pienentäminen heikentää merkittävästi laatua, erityisesti pienten yksityiskohtien osalta, mutta myös pienentää tiedostokokoa. Meidän tapauksessamme optimaalinen arvo on "7".
    • Ruudunpäivitysnopeus. Kuvataajuus ja sen seurauksena animaation nopeus. Jotta tehoste olisi oikea, aseta se korkeintaan 4 kuvaa sekunnissa.
    • Loop (Toista). Toista animaatio toistuvasti. Sopii animaatioon, jossa toistuva silmukka on tärkeä. Banneri kuuluu tähän tyyppiin.

    Sinulla on yksi tai kaksi kuvaketta, jotka haluat herättää eloon animaatiolla. Mistä aloittaisit? Oletetaan, että sinulla on SVG-tiedostoja, Illustrator CC- ja After Effects CC -ohjelmia, mutta ratkaisu välttelee sinua.

    Tässä artikkelissa aion osoittaa, kuinka voit helposti animoida SVG-tiedoston, mukaan lukien SVG-tiedoston valmistelu Illustratorissa ja sen tuominen After Effects CC:hen. Selitän myös kuinka voit muuntaa sen muototasoksi ja lisätä liikettä. Lopuksi puhutaan viennistä ja renderöimisestä.

    Työn lopputulos.

    Siirrytään nyt hauskaan osaan – opimme herättämään kuvat eloon.

    SVG-tiedoston valmistelu Illustratorissa

    Aloitetaan avaamalla SVG-tiedosto Adobe Illustrator CC:ssä. Aion animoida pienen auton kuvakkeen, joka on saatavilla ilmaiseksi Week Of Iconsista.

    Tiedoston avaamisen jälkeen meidän on purettava kaikki objektit ja jaettava tasoiksi. Voit tehdä tämän manuaalisesti tai käyttää Vapauta tasoille (sekvenssi) nopeuttaaksesi prosessia. Ennen kuin tuomme tiedoston After Effectsiin, meidän on tallennettava se Illustrator-tiedostomuodossa.


    Voimme purkaa objektien ryhmittelyn käyttämällä Release to Layers (Sequence) -toimintoa, jotta emme tuhlaa arvokasta aikaa. Tuo ja järjestä tiedosto After Effects CC:ssä

    Nyt olet valmis tuomaan After Effects CC:hen. Lataa tuo tiedosto -valintaikkuna pikanäppäimellä Ctrl+I (Windows) tai Command+I (Mac) tai siirry kohtaan Tiedosto > Tuo > Tiedosto... Valitse sieltä valmistamamme Illustrator CC -tiedosto ja napsauta Tuo. . Näkyviin tulee pieni valintaikkuna, jossa on valitun tiedoston nimi. Valitse Sävellys avattavasta luettelosta nimeltä Import Kind.


    Lisää nopea tapa tiedoston tuonti - kaksoisnapsauta sarakkeen sijaintia projektipaneelissa.

    Aikajanapaneelissa näemme uuden sävellyksen. Kaksoisnapsauta sitä. Meidän pitäisi nyt nähdä Illustrator CC -tasot oranssilla kuvakkeella niiden nimen vasemmalla puolella.

    Ennen kuin aloitamme, meidän on muutettava kaikki nämä tasot muototasoiksi. Meidän on valittava ne kaikki näppäinyhdistelmällä Ctrl+A/Command+A tai manuaalisesti näppäinyhdistelmällä Shift + Vasen hiiri. Napsauta sen jälkeen oikealla painikkeella vie hiiren osoitin tason päälle ja valitse Luo > Luo muotoja vektoritasosta.

    Nyt kun uudet tasot on valittu, vedä ne paneelin yläosaan Illustrator CC -tasojen yläpuolelle ja poista sitten Illustrator CC -tasot, jotta ne ovat poissa tieltä.


    Muunna Illustrator CC -tasot muototasoiksi After Effects CC:ssä

    Vaikka tämä ei ole välttämätöntä, on tärkeää, että annamme jokaiselle kerrokselle sopivan nimen ja/tai värikoodin. Näin voimme työskennellä tehokkaammin keskittyessämme avainhenkilöihin. Alla olevassa esimerkissä tarrojen värit vastaavat enemmän tai vähemmän vastaavien kerrosten täyttöä.


    Muototasojen merkitseminen sopivilla nimillä, väreillä, tekstillä ja sijoittelulla on erittäin käytännöllistä.

    Määritä parametrit pikanäppäimellä Ctrl+K/Command+K tai Sävellys > Sävellysasetukset... Sävellysasetuksista meidän on valittava Leveys, Korkeus, Kuvataajuus ja Kesto. Tätä projektia varten valitsin 60 kuvaa sekunnissa pitääkseni animaation sujuvana.

    Päällä Tämä hetki Kaikki näyttää olevan valmiina, mutta vielä yksi asia on tehtävä. Meidän on ryhmitettävä tietyt tasot yhteen, jotta niiden liikkeet ovat synkronoituja pääkerroksen kanssa, jota voimme hallita. Tätä menetelmää kutsutaan vanhemmuudeksi.


    Käytä Pick Whip -toimintoa määrittääksesi päätason useille tasoille.

    Esimerkissämme määritin vähemmän merkittäviä kerroksia (lapsikerroksia), kuten tuulilasi, ruumiinosat, puu ja köydet ensisijaiseen runkokerrokseen (emokerros). Tämä antoi minulle mahdollisuuden hallita koko auton (paitsi pyörät) asentoa ja pyörimistä ylätason avulla.

    Animaation luominen

    Halusin auton osuvan kiveen ja roikkuvan ilmassa hetken. Halusin myös puun liikkuvan ylös ja alas ja avaavan rungon. Aloitin luomalla kiven, auton ja pyörät. Sitten on aika voittaa suurin este - toiminnan laittaminen puuhun. Kun se oli tehty, siirryin pienempiin osiin, kuten telineeseen ja köysiin.


    Animaatiota kuvaava luonnos

    Ensimmäinen askel oli tehdä kallioelementti tai kerros, mutta sen sijaan, että menisin takaisin Illustrator CC:hen lisäämään uutta kerrosta, käytin vain Pen Toolia After Effects CC:ssä. Tämän ansiosta pystyin nopeasti suunnittelemaan pienen kiven.


    Voi mahtava kynätyökalu!

    Tavaratalo oli suhteellisen yksinkertainen tehtävä. Asensin sen auton takaosaan ja tein ankkuripisteen vasempaan alareunaan. Käyttämällä Pick Whipiä määritin sen päärunkotasolle. Toiseksi viimeinen askel oli antaa pyörimisvaikutus, mikä puolestaan ​​teki auton pomppimishetkestä realistisemman Bodymovin yhdessä Lottie-mobiilikirjaston kanssa.

    P.S. Löydät Illustrator CC- ja After Effects CC -tiedostoni.

    Kuvakesarja on ladattavissa ilmaiseksi osoitteessa .

    Tänään meillä on epätavallinen Adobe Illustrator -tunti. Koska tällä kertaa emme tee staattista kuvaa, vaan todellista animaatiota. Kuvittele, käy ilmi, että voit myös piirtää sarjakuvia Adobe Illustratorilla :)

    Ja tähän emme tarvitse juuri mitään. Tasojen oikea organisointi ja lopullisen työn vienti swf-muotoon, jossa jokainen kerros muunnetaan animaatiokehykseksi. Tämän päivän opetusohjelmassa piirretään retro-elokuvan tyylinen lähtölaskenta-animaatio. Tulosteen tulee olla flash-video, jossa on sama lähtölaskenta.

    Ensimmäinen asia, joka sinun on tehtävä, on piirtää kaikki tarvittavat elementit tulevaa animaatiota varten. Tätä varten tein erillisessä dokumentissa kaksi filmikehyksen sijaintia, ympyrän viitteeksi, joka on leikattu erillisiin sektoreihin, tekstuurin ja pystynaarmun antiikin vaikutuksen lisäämiseksi sekä kaikki numerot ja kirjoituksia.

    Kun sarjakuvamme kaikki osat ovat valmiita, voimme aloittaa itse animaation luomisen. Mukavuuden vuoksi on parempi tehdä tämä uudessa asiakirjassa. Tässä tapauksessa kerroksemme toimivat animaatiokehyksinä. Ja aivan ensimmäisessä kerroksessa sinun tarvitsee vain kopioida filmikehys. Aseta se keskelle työaluettasi.


    Luo nyt toinen kerros ja kopioi siihen filmikehys, johon reunoille on tehty offsetilla reiät. Se on myös asetettava keskelle.


    Näistä kahdesta kerroksesta saat jo animaatiota liikkuvasta elokuvasta. Mutta myöhemmin tarvitsemme paljon lisää kerroksia. Valitse siis kaksi ensimmäistä kerrosta, siirry paneelivaihtoehtoihin ja tee kopio tasoista.


    Samalla tavalla meidän on kerättävä 12 kerrosta filmikehyksiä, jotka määrittelevät sen liikkeen.


    Nyt meillä on koko joukko kerroksia ja ne ovat kaikki näkyvissä. Siinä mielessä, että ylemmät kerrokset estävät alemmat, mikä ei ole täysin kätevää työhön. Siksi voit kytkeä jotkin tasot pois päältä napsauttamalla tason nimen vasemmalla puolella olevaa kuvaketta. Kytke kaikki tasot pois päältä tai päälle kerralla pitämällä Alt-näppäintä painettuna samalla, kun napsautat silmäkuvaketta. Kytkemällä tasot päälle ja pois, näet tarkalleen, mitä tulevan animaatiomme tietyssä kehyksessä sijaitsee. Ja nyt, jotta voimme lisätä hieman värinää elokuvan liikkeeseen, meidän on siirrettävä saatuja kehyksiä hieman eri suuntiin. Voit tehdä tämän kytkemällä päälle vain sen kerroksen, jonka kanssa aiot työskennellä tällä hetkellä, ja siirtämällä sitten kehystä pari pikseliä mihin tahansa suuntaan.


    Kun olet käynyt läpi kaikki tasot ja lisännyt hieman siirtymää, voit aloittaa liikkuvan ympyrän animaation luomisen. Kopioi tätä varten sektoreista koostuva ympyrä asiakirjasta sarjakuvaosien kanssa ja aseta se ensimmäiselle kerrokselle filmikehyksen päälle.


    Jos poistat ympyrän valinnan, se näyttää yhdeltä kokonaiselta. Tämä on juuri sitä mitä tarvitsemme.


    Mutta koska se koostuu yksittäisistä sektoreista, voit luoda animaatioita erittäin nopeasti ja helposti muuttamalla niiden väriä. Kopioi tämä ympyrä toiselle kerrokselle ja tee ensimmäisestä sektorista vaaleampi. Muistathan, että elokuvamme tärisee liikkuessaan, joten ympyrää ei ole ollenkaan tarpeen sijoittaa tarkalleen ruudun keskelle. Aseta se silmällä.


    Samalla tavalla sinun on kopioitava ympyrä jokaiseen seuraavaan kerrokseen samalla kun maalataan yksi sektori enemmän vaaleammalla värillä kuin edellisellä kerralla. Yhdessä nämä 12 kerrosta muodostavat animaation elokuvasta, joka liikkuu täyteympyrällä.


    Seuraavaksi meidän on lisättävä kerroksiimme tekstuuria. Kytke ensimmäinen kerros päälle ja kopioi tekstuuri alkuperäisestä tiedostosta varaosineen.


    Kytke sitten seuraavat kerrokset päälle yksitellen ja kopioi sama tekstuuri sinne. Jotta se näyttää erilaiselta jokaisessa kehyksessä, käännä sitä 90 astetta. Kuten ehkä arvasit, meidän on lisättävä tekstuuria kaikkiin 12 kehykseen.


    Jos olet jo melko kyllästynyt kopioimiseen, voin miellyttää sinua - jäljellä on hyvin vähän. Vaikein osa on ohi. Jäljelle jää vain pystysuorien naarmujen lisääminen ja siinä on melkein kaikki. Tätä varten kopioimme jälleen alkuperäisen naarmun ja asetamme sen mielivaltaiseen paikkaan useissa kerroksissa. Minun tapauksessani naarmut näkyvät vain kahdessa kerroksessa.


    Nyt kun elokuvaanimaatioiden pääjakso on valmis, ei tarvitse kuin lisätä numerot. Koska lähtölaskentamme menee 3:sta yhteen plus sana Go!!!, tarvitsemme vielä enemmän tasoja. Ei 12, vaan peräti 48. Tätä varten sinun on tehtävä vielä kolme kopiota valmiista kerroksista elokuvaanimaatiolla.


    Ja sitten kaikki on yksinkertaista. Kytke ensimmäinen kerros päälle ja laita siihen numero kolme.


    Sitten sinun on kopioitava tämä kuva seuraaville tasoille, kunnes ympyräanimaatio päättyy. Kun saavutat kerrosten seuraavan kopion, jossa ympyrä täytetään jälleen kokonaan, sinun on asetettava numero kaksi. Kopioi samalla tavalla numero yksi halutuille tasoille. Ja kun pääset Go!!!-merkinnän viimeisille kerroksille, poista ympyrä ennen kuin kopioit merkinnän halutulle tasolle.


    Siinä kaikki animaatiolle. Tärkeintä tässä on, ettei sekaannu. Kerroksille voi antaa käteviä nimiä, mutta olin aika laiska :) Ja myös, kun olet saanut työsi valmiiksi, muista laittaa kaikki kerrokset takaisin päälle klikkaamalla silmäkuvaketta.


    Muista asettaa vientiasetusikkunassa Vie nimellä: AI Layers -asetukseksi SWF-kehykset. Tämä vaihtoehto muuttaa Illustrator-tasot animaatiokehyksiksi. Napsauta seuraavaksi Lisäasetukset-painiketta.


    Aukeaa Lisäasetukset. Tässä sinun on asetettava kuvataajuus. Minulla on 12 kuvaa sekunnissa. Silmukka-valintaruutu vastaa syklisestä animaatiosta. Sen ansiosta video toistetaan ympyrässä. Ja Layer Order: Bottom Up -vaihtoehto toistaa kuvittajatasot alhaalta ylöspäin paneelissa. Juuri tällä tavalla rakensimme animaatiomme.


    Tulos on flash-video animaatiollamme.

    Nyt näet, että yksinkertaisen animaation tekeminen Adobe Illustratorissa ei ole niin vaikeaa kuin miltä ensi silmäyksellä näyttää.

    Mutta pitkien videoiden tai interaktiivisten sovellusten luomiseen on silti parempi käyttää Adobe Flash tai muut flash-editorit. Esimerkiksi tein tämän kissan vanhassa Macromedia Flash, jonka kaivoin työssäni.

    Lisäksi viime aikoina HTML5:tä ja CSS3:a käytetään yhä enemmän animaatioiden luomiseen. Tämä koodi nykyaikaiset selaimet tukevat, eikä se vaadi flash-soittimen käyttöä.

    Roman aka dacascas erityisesti blogiin Notes of a microstock illustrator


    Tilaa uutiskirjeemme, jotta et menetä mitään uutta:

    Viime aikoina erilaiset SVG-grafiikan (Scalable Vector Graphics) animaatiot verkkosivustoilla ja sovelluksissa ovat tulleet erittäin suosituiksi. Tämä johtuu siitä, että kaikki uusimmat selaimet tukee jo tätä muotoa. Tässä on tietoa SVG-selaimen tuesta.

    Tässä artikkelissa käsitellään yksinkertaisinta esimerkkiä SVG-vektorianimaatiosta, jossa käytetään kevyttä Jquery-laajennusta Lazy Line Painter.

    Lähde

    Tämän tehtävän suorittamiseksi ja täydelliseksi ymmärtämiseksi HTML:n, CSS:n ja Jqueryn perustiedot ovat toivottavia, mutta niitä ei vaadita, jos haluat vain animoida SVG:tä.) Aloitetaan!

    Ja nämä ovat vaiheet, jotka meidän on noudatettava:

  • Luo oikea tiedostorakenne
  • Lataa ja liitä laajennus
  • Piirrä upea ääriviivakuva Adobe Illustratorissa
  • Muunna kuvamme Lazy Line Converteriksi
  • Liitä tuloksena oleva koodi main.js-tiedostoon
  • Lisää CSS:ää maun mukaan

    • 1. Luo oikea tiedostorakenne
    Tässä auttaa meitä Initializr-palvelu, jossa meidän on valittava parametrit alla olevan kuvan mukaisesti.

    • Classic H5BP (HTML5 Boiler Plate)
    • Ei mallia
    • Vain HTML5 Shiv
    • Pienennetty
    • IE luokat
    • Chrome-kehys
    • Napsauta sitten Lataa se!

    2. Lataa ja liitä laajennus

    Koska initializr sisältää uusimman Jquery-kirjaston, joka on ladattava arkistosta Lazy Line Painter -projektin arkistosta, meidän tarvitsee siirtää vain 2 tiedostoa projektiimme. Ensimmäinen on "jquery.lazylinepainter-1.1.min.js" (laajennuksen versio voi vaihdella), ja se sijaitsee tuloksena olevan kansion juuressa. Toinen on esimerkki/js/vendor/raphael-min.js.

    Sijoitamme nämä 2 tiedostoa js-kansioon. Ja yhdistämme ne index.html-tiedostoomme ennen main.js:ää seuraavasti:

    3. Piirrä viileä ääriviivakuva Adobe Illustratorissa

  • Piirrä ääriviivakuvamme Illustratorissa (helpein tapa tehdä tämä on kynätyökalulla)
  • On välttämätöntä, että piirustuksemme ääriviivat eivät sulkeudu, koska vaikutuksellemme tarvitsemme alun ja lopun
  • Täytteitä ei pitäisi olla
  • Tiedoston enimmäiskoko – 1000×1000 px, 40 kt
  • Tehdään rajaus objektin rajoihin Objekti>Artboards>Fit To Artboards Bounds
  • Tallenna SVG-muodossa (tavalliset tallennusasetukset ovat kunnossa)

    • Voit esimerkiksi käyttää liitteen kuvakkeita.

    4. Muunna kuvamme Lazy Line Converteriksi
    Vedä kuvakkeesi alla olevan kuvan ikkunaan.
    Paksuutta, ääriviivan väriä ja animaation nopeutta voidaan muuttaa itse koodissa, joka tulee näkyviin muuntamisen jälkeen!

    5. Liitä tuloksena oleva koodi main.js-tiedostoon
    Nyt yksinkertaisesti liitämme tuloksena olevan koodin tyhjään main.js-tiedostoon
    Vaihtoehdot:
    strokeWidth — ääriviivan paksuus
    strokeColor — ääriviivan väri
    Voit myös muuttaa kunkin vektorin piirtonopeutta muuttamalla kestoparametrin arvoja (oletus 600)

    6. Lisää CSS:ää maun mukaan
    Kappaleen poistaminen index.html-tiedostosta

    Hei maailma! Tämä on HTML5 Boilerplate.

    Ja sen sijaan lisäämme lohkon, jossa animaatiomme tapahtuu

    sitten lisäämme main.css-tiedostoon CSS:ää, jotta se näyttää kauniimmalta:

    Runko ( tausta: #F3B71C; ) #kuvakkeet ( sijainti: kiinteä; ylhäällä: 50 %; vasen: 50 %; marginaali: -300px 0 0 -400px; )

    tallenna kaikki tiedostot.
    Avaa nyt vain index.html nykyaikaisella selaimella ja nauti tehosteesta.

    P.S. Paikallisella koneella suoritettaessa animaation alkaminen voi viivästyä useita sekunteja.