CSS-animasies: verduidelikende handleiding oor hoe om animasies te maak | Kreatiewe aanlyn
Nerea Morcillo | | CSS, tegnologie
Daar is baie programme waar jy kan redigeer, montages skep of selfs skep animasies, elke keer is daar baie sagteware wat hierdie tipe interaktiewe projekte byvoeg. In hierdie pos gaan ons jou nie net aan die wêreld van animasies bekendstel nie, maar ons gaan jou ook aan 'n nuwe vriend voorstel.
Soos u goed weet, is die rekenaarwêreld vol opdragte en nuttige hulpmiddels vir die ontwikkeling van webblaaie of aanlynmedia, wat tans saam bestaan. Bly by ons en ontdek in hierdie nuwe tutoriaal nog 'n manier om jou vlak met rekenaars en interaktiwiteit te verhoog.
1 Wat is animasies?
1.1 Animasie tipes
1.1.1 Spotprent of tradisionele animasie
1.1.2 Stop aksie
1.1.5 Animasie deur uitknipsels of uitgeknipte animasie
1.1.6 3d animasie
2 Wat is CSS?
2.1 Waarvoor is CSS?
3 Animeer in CSS
4 Animasie instellings
4.1 animasie - vertraging
4.2 animasie - rigting
4.3 animasie - duur
4.4 animasie - iterasie - tel
4.5 animasie - naam
4.6 animasie - speel - staat
4.7 animasie - tydsberekening- funksie
4.8 animasie - vul - modus
5 Stel die volgorde op met rame
6 Raam en teks animasie
7 Herhaal animasie
Wat is animasies?
Bron: Alle spelers
Ons wil hê jy moet die tutoriaal volledig betree, maar hiervoor is dit nodig om die wêreld van animasies of wat in grafiese ontwerp aangaan, die wêreld van interaktiewe ontwerp.
Animasies is ook deel van die oudiovisuele wêreld, eintlik sou dit niks wees as of omdat daarin 'n oudio en 'n bewegende beeld bekendgestel word nie. Om hierdie rede, wanneer ons van «animasie» praat, verwys ons na wat algemeen bekend staan ​​as «tekenprente».
Soos hierbo opgesom, spruit animasie voort uit die vermoë om beweging te gee aan iets, in hierdie geval spotprente. Maar hoe word al hierdie bewegings bereik? Wel, sonder twyfel ontstaan ​​hulle uit wat ons noem, reekse van tekeninge of foto's dat hulle deur opeenvolgend, een na die ander georden te word, daarin slaag om 'n geloofwaardige beweging voor ons oë te genereer, wat hulself leen en die spel van visuele illusie betree.
Voorheen is die eerste animasies op velle papier ontwerp, in elk van hulle is die geanimeerde karakter met stappe geteken, en sodra die einde van die vel bereik is, is dit vinnig een vir een deurgegee om die effek van beweging in die tekening.
Daar is verskillende tipes animasie:
Spotprent of tradisionele animasie
Hierdie styl bestaan ​​uit die gee van beweging aan die protagonis raam vir raam. Aan die begin, toe daar nie genoeg oudiovisuele middele was nie, is dit uitgevoer deur die teken en verf van elke raam (insluitend die agtergrond, verhoog of agtergrond van die animasie), om later verfilm te word op wat ons as 'n filmband ken.
Stop Motion is 'n animasietegniek wat niks met spotprente te doen het nie. Boonop is die hoofdoelwit daarvan om die bewegings van voorwerpe te simuleer wat in werklikheid totaal staties is en dit word in twee fases verdeel: animasie van klei of kleibeweging en animasie van rigiede voorwerpe.
Pixelering is 'n tegniek wat uit Stop Motion kom en bestaan ​​uit die werk met voorwerpe wat nie poppe of modelle is nie, maar gewone voorwerpe of mense. Voorwerpe word verskeie kere gefotografeer en skuif effens met elke raam.
Dit bestaan ​​uit die direkte tekening van 'n ander tekening, soos die natrek van 'n tekening op 'n ander tekening of van 'n regte persoon. Dit word beskou as 'n voorloper van mocap, dit wil sê vir bewegingsopname wat gebruik word om digitale karakters in die wêreld van rolprente te herskep.
Animasie deur uitknipsels of uitgeknipte animasie
Dit is 'n tegniek wat bestaan ​​uit die sny van figure, hierdie figure kan op papier of in foto's voorgestel word. Die liggaam van die karakters is gebou op grond van uitknipsels en beweging en animasie ontstaan ​​uit 'n vervanging van genoemde uitknipsels.
3D-animasie is afkomstig van 'n redigeerderprogram, wat simulasies en animasies toelaat om uitgevoer te word. Binne hierdie twee variante kom goeie beligting, kamerabewegings en spesiale effekte in aanraking.
Tans is daar ook ander tegnieke soos: die skildery op glas, die animasie van sand, die skerm van gujas en die skildery op selluloid.
Bron: Web Design Rosario Session Studio
Noudat jy 'n bietjie meer weet oor die wêreld van animasies, is dit tyd dat ons jou bekendstel aan die wêreld van CSS-akronieme.
erwe CSS, verwys na "cascading style sheets". Dit word gevorm deur 'n taal wat gebruik word in die ontwerpsektor en in die aanbieding van webblaaie, nog beter, dit is 'n reeks gereedskap en opdragte wat in beheer is van die aanbieding van 'n webblad soos ons dit vir die eerste keer sien dit is reeds geskep. Werk saam met die gereedskap HTML (georganiseer vanaf die basisinhoud van die bladsye).
Die naam word bepaal deur die aantal blare wat dit bevat en een van hulle erf eienskappe of kenmerke van ander. Dit wil sê, jy kan met 'n eenvoudige blogsjabloon werk, maar wanneer jy die voorkoms van 'n werf wil aanpas, sal jy CSS moet implementeer wat saam met 'n goeie CMS jou sal help om die reikwydte van jou inhoud te verbeter.
Waarvoor is CSS?
Met CSS kan jy jou bladsy organiseer, dit wil sê jy kan jou webblad vertel hoe jy al die inligting wil opspoor sodat die kyker maklik hanteerbaar en terselfdertyd bruikbaar is. Voer hier al die opdragte van sommige elemente in wat deel is van die styl of ontwerp van die webblad, byvoorbeeld die lettertipes, kleure, groottes ens.
Gewoonlik, sodat jy beter verstaan ​​waaroor hierdie instrument gaan, is digitale bemarkingspesialiste die eerste om hieroor te verstaan, aangesien dit hulle is wat dit hanteer.
Animeer in CSS
Noudat jy 'n bietjie weet van die wêreld van animasies en CSS. Dit is tyd om die tutoriaal te begin.
CSS-animasies laat jou toe om die oorgang tussen een CSS-styl en 'n ander te animeer. Hierdie animasies bestaan ​​uit twee komponente: a styl wat beskryf CSS animasie en 'n stel van rame wat die aanvanklike en finale toestand daarvan aandui, asook moontlike tussenpunte daarin.
Elkeen van hierdie animasies het 'n reeks voordele:
Animasie vertoon korrek, selfs op lae-krag rekenaars.
Omdat dit deur 'n blaaier beheer word, laat dit toe om die werkverrigting en doeltreffendheid daarvan te optimaliseer, en sodoende die frekwensie te verminder en die oortjies op so 'n manier uit te voer dat hulle nie sigbaar is nie.
Om 'n animasie te begin, moet ons dit eers opstel. Om dit te doen, sal ons na die eiendom gaan animasie en aan sy sub-eienskappe. Hierdie instrument sal ons in staat stel om beide die ritme en die duur van die animasie op te stel en nie eers die volgorde daarvan nie.
Die sub-eienskappe is:
animasie - vertraging
Vertragingstyd tussen die oomblik dat die element gelaai word en die begin van die animasiereeks.
animasie - rigting
Dui aan of die animasie moet terugspoel na die beginraam aan die einde van die reeks en of dit van die begin af aan die einde moet begin.
animasie - duur
Dui die hoeveelheid tyd aan wat die animasie neem om sy siklus te voltooi (die duur)
animasie - iterasie - tel
Die aantal kere wat dit herhaal word. Ons kan aandui oneindige om die animasie onbepaald te herhaal.
animasie - naam
Dit word gebruik om die naam te spesifiseer wat elk van die rame van die animasie beskryf.
animasie - speel - staat
Laat jou toe om die animasievolgorde te onderbreek en te hervat.
animasie - tydsberekening- funksie
Dit dui die ritme van die animasie aan, dit wil sê hoe die animasierame gewys word, hiervoor word versnellingskurwes vasgestel.
animasie - vul - modus
Spesifiseer watter waardes die eienskappe sal hê nadat die animasie geëindig het.
Stel die volgorde op met rame
Sodra ons die tyd gekonfigureer het, die nomenklatuur ens. Dit is tyd om 'n voorkoms of gevoel aan ons animasie te bied.
Om dit te doen, sal ons twee nuwe rame vestig en die reël gebruik @sleutelrame. Hiermee beskryf elke raam hoe elke element tydens die animasiereeks gevind word.
Om die aan te dui tyd en ritme, die raam gebruik persentasie en van en naDanksy dit kan ons aandui wanneer die begin plaasvind met 0% en die einde met 100%.
Raam en teks animasie
Om meer rame by te voeg en hulle met teks te animeer, moet jy 'n groter grootte van die kopskrifskrif toepas sodat die kopskrif toeneem soos dit vir 'n vasgestelde tyd beweeg, en dan afneem tot sy oorspronklike grootte daarna. Hiervoor gaan ons die volgende kode opstel:
75% lettertipe - grootte: 300%; kantlyn - links: 25%; breedte: 150%;
Met hierdie kode stel ons die blaaier voor dat die kopskrif in 75% van die volgorde 'n linkerkantlyn van 25% en 'n grootte van 200% met 'n breedte van 150% het.
Om 'n animasie te herhaal, is dit nodig om die volgende eienskap te gebruik animasie - iterasie - tel en ons moet aandui hoeveel keer ons wil hê dit moet herhaal word. Ons kan ook gebruik oneindige sodat dit altyd herhaal word.
Soos jy gesien het, kan jy in CSS geanimeerde projekte skep en jy kan dit betree deur die stappe te volg wat ons jou gegee het. As jy aanhou om navraag te doen en jouself in te lig, sal jy ontdek dat daar baie opsies vir ons beskikbaar is.