Natuurlijk heeft animatie altijd stilstaande objecten tot leven gebracht, vooral afbeeldingen. Maar je kunt het niet alleen in afbeeldingen gebruiken. Ambachtslieden hebben bijvoorbeeld een cool gebruik van animatie op websites gevonden. Zo blijkt dat de site gewoon tot leven begint te komen, wat op zijn beurt veel beter de aandacht van de gebruiker of koper trekt.

Het gebruik van heldere illustraties en goede animaties helpt de communicatie met een divers publiek te verbeteren. Er is bijvoorbeeld een soort animatie die de gebruiker tot actie dwingt, of je kunt de aandacht vestigen op het gewenste object op de site.

Over het algemeen wil ik u vandaag verschillende voorbeelden presenteren van prachtige bronnen die illustraties met animatie gebruiken. Het lijkt mij dat als je erover denkt een soortgelijke bron te creëren, deze collectie je zal helpen of inspireren. Bovendien moet je deze sites eens opzoeken, aangezien ze door echte professionals zijn gemaakt.

Hartelijk dank aan http://www.webdesignerdepot.com en zoals altijd, bekijk zeker onze eerdere collecties van prachtige websites:

www.noiretrenoir.com

Een prachtige site die coole animaties gebruikt om contact te maken met het publiek. Ik vond het vooral leuk dat de site vanaf het begin zwart-wit was, maar naarmate het laadniveau vorderde, werd hij kleurrijker, alles was heel creatief en prachtig gedaan.

barcampomaha.org

Een absoluut heerlijke en kleurrijke site die gevuld is met verschillende geanimeerde monsters en aliens.

www.azahran.com

www.quechua.com

Een prachtige online winkel die gebruik maakt van animatie van objecten, wat op zijn beurt enorm tot actie aanzet. Meestal kopen mensen op zulke mooie sites veel vaker goederen.

Parallax.js

De site wordt gebruikt als demopagina die de werking van het Parallax.js-script demonstreert. Wat kan ik zeggen, alles ziet er heel erg indrukwekkend uit!

www.buffalowildwings.com

Een site voor een eenvoudig maar verslavend spel. Zoals gewoonlijk wordt hier gebruik gemaakt van mooie animaties.

goodtwin.co

Deze site gebruikt beide prachtige illustraties zo en goede animatie aan hen. Alles bij elkaar ziet het er erg gaaf uit.

www.intacto10years.com

Misschien heb ik je deze site al laten zien, maar ik kon het niet laten om het toch te vermelden :) Kijk maar eens naar het werk van zeer hoge kwaliteit.

Dit is, zou je kunnen zeggen, een goed gemaakte en geanimeerde infographic die je laat zien wat je moet doen en je dwingt actie te ondernemen. Het is gemaakt in Flat-stijl, wat deze site moderniteit en stijl geeft.

www.ipolecat.com

Deze site gebruikt voornamelijk prachtige illustraties, maar als je door de slider scrollt, bewegen ze niet veel, wat de site een beetje een grillig gevoel geeft.

www.octaveoctave.com

Interessante site met buitengewone foto's en tekeningen, plus animatie. Met andere woorden: ongebruikelijk, maar stijlvol.

www.milkable.me

Het gebruikt gewoon heel mooie illustraties plus een parallax-effect, zeer modern. En natuurlijk een heel cool menu op de site.

www.mitchlana.com

Een site van een getalenteerde illustrator die animatie gebruikt om de boel wat op te fleuren.

Er is geen speciale truc voor het maken van grootschalige animaties. Hoewel nee, dat is er wel: je moet veel tijd besteden aan het optimaliseren en testen ervan. Dus na een aantal jaren experimenteren, waarbij we voortdurend tegen de prestatielimieten van browsers aandringen, hebben we een reeks ontwerp- en codeerprincipes bedacht waarmee iedereen zijn project kan aankleden met indrukwekkende en productieve animaties. Door het gebruik ervan kunt u een soepele werking van pagina's op desktop en mobiele browsers. En het allerbelangrijkste: dit alles wordt heel eenvoudig gedaan en onderhouden.

De technologie en implementatie zullen per specifiek geval iets anders zijn, maar we hebben er vertrouwen in dat onze algemene principes zal in vrijwel elke situatie nuttig blijken.

Wat is animatie?

Animaties bestaan ​​al vóór het internet. Om de beste te maken, kun je een leven lang leren. Er zijn echter ook patronen in deze kwestie. We bespreken enkele veel voorkomende en minder vaak voorkomende problemen waarmee ontwerpers worden geconfronteerd bij het maken van animaties voor het web.

Om te ontvangen vloeiende animatie met 60 fps moet elk frame in minder dan 16 ms worden verwerkt! Dit is een korte periode, dus het is noodzakelijk om zeer efficiënte manieren te vinden om elk frame weer te geven hoge prestaties animatie.

Er zijn veel manieren om webanimatie te implementeren. Film bestond bijvoorbeeld vóór de komst van internet. De essentie ervan is dat handgetekende frames met minimale verschillen meerdere keren per seconde worden getoond, waardoor voor de kijker de illusie van beweging ontstaat.

Twitter heeft onlangs deze eenvoudige aanpak gebruikt voor hun nieuwe animatie harten, scrollend door 26 frames in een bepaalde volgorde.

De resulterende animatie is te complex om te implementeren en in feite niet vloeiend genoeg.

In veel gevallen is het voordeliger om het te gebruiken CSS-eigenschap"overgang" om een ​​element automatisch te animeren wanneer het verandert. Deze techniek wordt ook wel 'tweening' genoemd en omvat het maken van animatie met automatische constructie van tussenliggende afbeeldingen. Laten we zeggen dat we twee afbeeldingen hebben van hetzelfde object in verschillende posities. Effecten overgang CSS zal je helpen een animatie te maken van het veranderen van de staat. Het gebruik ervan is voordelig omdat u de volledige animatielogica op elk moment kunt resetten of omkeren. Dit is de ideale ‘stel het in en vergeet het’-aanpak. Werkt bijvoorbeeld prima met verschillende introsequenties of eenvoudige interacties zoals het activeren van mouseover-animaties.

Ook animatie gebouwd in CSS met behulp van sleutelframes, kan dienen perfecte achtergrond voor geselecteerde delen van de pagina. Zo draaien de ringen uit het Gyroscoop-logo voortdurend. Deze aanpak is goed te gebruiken voor het animeren van de beweging van verschillende mechanismen.

Laten we dus afsluiten met de introductie en verder gaan met het hoofdgedeelte van het bericht. Hier zijn enkele tips waarmee u de productiviteit en kwaliteit van uw animatie aanzienlijk kunt verbeteren. We hopen dat ze je helpen.

#1 Wijzig geen andere eigenschappen dan de dekking (dekking) en transformaties (transformeren)

Zelfs als je denkt dat het op deze manier beter zou zijn, moet je het nog steeds niet doen!

Het volgen van dit basisprincipe zal de operationele efficiëntie met 80% verhogen, zelfs in het mobiele segment. Je hebt hier waarschijnlijk al eerder over gehoord. Het idee is niet origineel, maar wordt zelden gevolgd. Het is het webequivalent van 'gezond eten en bewegen'. Iedereen heeft het gehoord, ze weten dat dit klopt, maar weinig mensen gehoorzamen.

In feite is het gebruik van dit principe vrij gemakkelijk om aan te wennen. Dit zal vooral ten goede komen aan degenen die eerder animaties hebben gemaakt met behulp van traditionele CSS-eigenschappen.

Als u bijvoorbeeld een object kleiner wilt maken, kunt u de schaaleigenschap van de transformatie gebruiken in plaats van de breedte/hoogte te wijzigen. Als u een element moet verplaatsen, hoeft u zich geen zorgen te maken over het wijzigen van de opvulwaarden, omdat voor een dergelijke animatie de pagina-indeling bij elk frame opnieuw moet worden gerangschikt. Gebruik hiervoor beter eenvoudige transformatie-eigenschappen: transformeren: vertalenX of transformeren: vertalenY.

Waarom werkt dit?

Voor iemand die de breedte, opvulling en andere vergelijkbare parameters wijzigt, lijkt het gebruik van transformatie-eigenschappen misschien geen goed idee. Visueel is het resultaat vergelijkbaar. Maar vanuit het oogpunt van de kosten van de rekenkracht van de computer die dit allemaal gaat berekenen, ziet het gebruik van transformatie er vele malen beter uit.

Browserontwikkelaars hebben veel werk verzet om deze bewerkingen te optimaliseren. Transformaties zijn echt effectief, ze besparen grafische kaartbronnen door de noodzaak te elimineren om het element opnieuw te renderen.

Je kunt gek worden als je wacht tot een pagina als deze is geladen: alle hoeken zijn afgerond, afbeeldingen zijn gebruikt, overal zijn schaduwen op aangebracht en er is dynamische vervaging van elementen toegevoegd voor volledig geluk. Als dit maar één keer gebeurt, zullen een paar milliseconden extra wachten geen verschil maken. Maar zodra alle inhoud is weergegeven, wilt u niet langer wachten tot eventuele waarden opnieuw zijn berekend om de pagina te wijzigen.

#2 Verberg inhoud in het zicht.

Gebruik "pointer-events" in CSS: waarde "none" samen met nul dekking om elementen te verbergen

Deze methode werkt niet goed in oudere browsers, maar als u ontwerpt voor webkit of andere moderne browser-engines, zal dit uw leven een stuk eenvoudiger maken.

IN verre tijden wanneer animaties werden verwerkt op jQuery-hulp animate(), was de grootste moeilijkheid bij het werken met het fade-effect de noodzaak om de waarde van de display-eigenschap te veranderen: activeer geen om het effect op het juiste moment te stoppen. Te vroeg en de animatie wordt niet voltooid, te laat en je krijgt een onzichtbaar element zonder dekking dat de pagina afsluit. Er was een terugbelactie nodig om het scherm leeg te maken nadat de animatie was voltooid.

De CSS-eigenschap "pointer-events" (bestaat al een hele tijd, maar wordt om de een of andere reden niet vaak gebruikt) dient om dingen ongevoelig te maken voor muisklikken en andere interacties. Het is alsof ze helemaal niet op de pagina staan. Deze eigenschap kan eenvoudig via CSS worden in-/uitgeschakeld. Tijdens het uitvoeren onderbreekt het de animatie niet en heeft het geen invloed op de weergave/zichtbaarheid van elementen.

Door dit ding te combineren met een dekkingswaarde van nul, krijgen we hetzelfde effect dat "display: none" geeft, maar zonder de prestatie-impact bij het starten van nieuwe animatierenderinglussen. Als ik een element aan het zicht wil onttrekken, stel ik de dekking meestal op nul en schakel ik pointer-events uit. Daarna kan ik het vergeten, wetende dat alles gemakkelijk kan worden teruggestuurd en dat niets de prestaties van de pagina zal verstoren.

Deze techniek werkt vooral goed met elementen die dat wel hebben absolute positionering, want dan weet je zeker dat ze geen enkele impact hebben op alle andere delen van de lay-out en pagina-elementen.

Het geeft je ook veel meer bewegingsvrijheid, omdat de timing van het starten/stoppen van de animatie in dit geval mogelijk niet erg nauwkeurig is. Zelfs als je een kleine fout maakt met de timing, zal er niets ergs gebeuren. De gebruiker kan simpelweg nergens op klikken voordat de animatie is voltooid. Alles zal verlopen zoals je gepland had.

#3 Je hoeft niet alles in één keer te animeren.

Of gebruik het principe van choreografie.

Eén animatie kan op zichzelf vloeiend zijn, maar als er meerdere effecten tegelijkertijd worden uitgevoerd, kan dit het hele beeld verpesten en de productiviteit verminderen. Het creëren van een soepel lopende demo is heel eenvoudig, maar het garanderen van een acceptabel prestatieniveau als onderdeel van een hele site is veel moeilijker. Daarom is het erg belangrijk om het uiterlijk van de animatie goed te plannen.

U wilt uw timing zo regelen dat alle animaties beginnen verschillende tijden. Meestal kunnen 2-3 animaties zonder vertraging tegelijkertijd worden uitgevoerd, vooral als ze met een kleine spreiding in de tijd beginnen. Meer dan 3 gelijktijdige lanceringen (op het oog, maar niet in wezen - er moet een minimale spreiding in de tijd zijn) zullen vrijwel zeker vertragingen op het scherm veroorzaken.

Als er meer dan één animatie op een pagina staat, is het belangrijk dat u het concept van choreografie begrijpt. Het lijkt erop, wat heeft de dansterm ermee te maken? Maar het begrijpen van de essentie ervan in deze context is erg belangrijk voor succesvolle interface-animatie: dingen moeten vanuit de goede richting naar het scherm komen de juiste momenten. Hoewel ze allemaal afzonderlijk werken, moeten ze er voor de kijker uitzien als onderdelen van één goed ontworpen mechanisme.

Material Design van Google heeft er iets over. Dit is uiteraard niet het enige de juiste manier, maar het geeft stof tot nadenken en testen.

#4 Een lichte toename van de overgangsvertraging maakt het gemakkelijk om het choreografieprincipe te volgen

Animatiechoreografie is erg belangrijk, en de kwaliteitsproductie ervan vereist veel experimenten. Het is echter onwaarschijnlijk dat de code om het idee te implementeren erg complex is.

Meestal vervang ik één klasse door ouderelement(meestal op het lichaam) om een ​​aantal overgangen te activeren, die elk hun eigen vertragingsparameter hebben (overgangsvertraging). Dit wordt gedaan zodat elk element verschijnt op het moment dat ik het nodig heb. Vanuit codeerperspectief hoeft u zich alleen maar zorgen te maken over de waarde van één variabele, in plaats van tientallen timings in JavaScript aan te houden.

Door een reeks elementen tegelijkertijd te zwaaien, kun je heel eenvoudig hun choreografie arrangeren. Dit is een krachtige aanpak omdat het er allemaal goed uitziet en tegelijkertijd snel werkt. Houd er rekening mee dat je slechts 2-3 animaties tegelijk kunt uitvoeren en dat alles goed komt. U moet ze op de pagina verspreiden, zodat ze allemaal soepel en tijdig worden verwerkt. De reeks animaties moet door de kijker worden gezien als een continue stroom, en niet als een keten van ongelijksoortige elementen. Eén vloeiende scène.

Voorbeeldcode

Er zijn er meerdere eenvoudige methoden, waarmee je je elementen kunt laten rocken. Ze zijn erg handig, vooral als je een lange reeks animaties gebruikt. Als de keten minder dan 10 elementen bevat, specificeer ik meestal de vertragingswaarden in CSS. Dit is de eenvoudigste manier om het te implementeren.

Voor langere reeksen of zeer dynamisch veranderende elementen kunnen de timings voor alle elementen dynamisch worden ingesteld door de waarden van variabelen te wijzigen.

Normaal gesproken zijn er twee variabelen: uw basisvertraging en de tijdsvertraging tussen elk element. Deze balans is best lastig te vinden, maar als je er eenmaal in zit juiste set cijfers, dan komt alles goed.

#5 Gebruik een gemeenschappelijke vermenigvuldiger om in te ontwikkelenlangzame beweging

En versnel het allemaal later.

Bij animatieontwerp is timing alles. 20% van het werk zit in het maken van de animaties zelf, en de overige 80% zit in het vinden ervan juiste parameters en timings om een ​​duidelijk gesynchroniseerde en vloeiende scène te bereiken.

Dit geldt vooral als je werkt aan de choreografie van een grote verscheidenheid aan elementen en probeert maximale prestaties eruit te persen. Na het vertragen van de animaties zullen dergelijke scènes veel gemakkelijker worden om mee te werken.

Als je Javascript of een soort CSS-preprocessor zoals SASS gebruikt, zou de code vrij eenvoudig moeten zijn om te bouwen juiste structuur variabelen.

Zorg ervoor dat het codeontwerp gebruiksvriendelijk is, zodat u eenvoudig verschillende snelheden en timings kunt testen. Als de animatie bijvoorbeeld zelfs bij een snelheid van 1/10 hapert, doe je waarschijnlijk iets fundamenteel verkeerd. Als het soepel gaat als het 50 keer wordt uitgerekt, komt de vraag neer op het vinden maximale snelheid, waarbij het soepel kan werken. Het is vrij moeilijk om problemen op volle snelheid op te merken, maar als je het vertraagt, worden ze allemaal heel duidelijk.

Om zeer complexe animaties op te zetten of prestatieknelpunten te vinden, kan het volgen van het proces in slow motion zeer nuttig zijn.

Het idee is om veel mooie details in een scène in slow motion te stoppen en deze vervolgens te versnellen, zodat de animaties er perfect uitzien. Dit is erg prima werk, maar gebruikers zullen de details en vloeiendheid van wat er op het scherm gebeurt waarderen.

Deze functie is een actief onderdeel van OS X: wanneer u het programmavenster minimaliseert, ziet u een animatie in slow motion.

#6 Maak een video-opname van uw interface en scroll, u kunt meer zien vanuit het perspectief van een derde persoon

Soms helpt een perspectief van buitenaf je om dingen duidelijker te zien, en dat is met video het geval op een geweldige manier dit bereiken.

Sommige mensen maken video's in After Effects en proberen vervolgens de resulterende video op de website te implementeren. Ik doe vaak precies het tegenovergestelde: ik probeer het te doen goed filmpje gebaseerd op de gebruikersinterface van de site.

In realtime is het vrij gemakkelijk om sommige momenten te missen. Maar het bekijken van de animatie in de opname gaat door lage snelheid zal helpen om zelfs de kleinste problemen keer op keer te identificeren. Met deze aanpak wordt alles duidelijk.

Het bekijken van time-lapse-video's van mijn pagina's en het corrigeren van probleemgebieden is een belangrijk onderdeel van mijn werk geworden. Je kunt natuurlijk alles de schuld geven trage browsers, maar vaak beginnen animaties na testen en optimaliseren op rolletjes te werken. Dat wil zeggen: alles kan worden opgelost met de juiste aanpak.

#7 Netwerkactiviteit kan tot vertragingen leiden.

U moet groot vooraf laden of blokkerenHTTP-verzoeken

Afbeeldingen zijn in dit opzicht een doorslaggevende factor, vooral als ze een groot gewicht hebben (bijvoorbeeld een zware achtergrond), of een heleboel kleine (bijvoorbeeld 50-100 avatars laden), of gewoonweg groot aantal inhoud ( lange pagina met veel foto's).

Tijdens het laden van de eerste pagina worden er heel veel dingen geïnitialiseerd en geladen. Advertenties, modules en andere scenario's voor het laden van wachtrij 3 maken de situatie nog erger. Soms kan het wonderen doen om animaties uit te stellen tot slechts een paar honderd milliseconden nadat de rest van de pagina is geladen. U krijgt een aanzienlijke prestatieverbetering.

Mega-optimalisatie mag niet worden gebruikt, tenzij dit absoluut noodzakelijk is, hoewel een zware pagina mogelijk zeer nauwkeurige vertragingen en animatietimings nodig heeft om soepel te laten verlopen. Over het algemeen moet u beginnen met het laden van zo min mogelijk gegevens, vervolgens animaties toevoegen en daarna doorgaan met het laden van de rest van de zware inhoud van de pagina.

Op pagina's met een groot aantal Gekunnen veel tijd in beslag nemen. Animaties die goed werken met statische inhoud kunnen langzamer gaan werken en uit elkaar vallen gelijktijdig laden met echte gegevens. Als iets vrij soepel lijkt te werken, maar op sommige punten om een ​​onbekende reden begint te vertragen, moet u dit controleren netwerkactiviteit. Het kan zijn dat je kanaal op deze momenten druk bezig is met andere downloads. Zorg ervoor dat uw netwerk niet meerdere gelijktijdige grote downloads verwerkt.

#8 Het is niet nodig om het standaard scrollen te wijzigen.

Het idee om de schuifbalk te vervangen lijkt misschien cool, maar dat is het echt niet.

Op animaties gebaseerd scrollen is al enkele jaren populair, vooral als het wordt gemaakt met behulp van parallax en andere speciale effecten. Je kunt lange tijd discussiëren over het nut ervan, maar er zijn enkele succesvolle en niet zo succesvolle manieren om een ​​dergelijk idee technisch te implementeren.

Matig op een efficiënte manier Als u dingen uit deze categorie maakt, moet u de optimale scrollstap bepalen en deze als een afzonderlijke gebeurtenis markeren. Als u niet weet wat u doet, kunt u dit soort scrollen beter helemaal niet gebruiken. Het is gemakkelijk om hier fouten te maken, en het handhaven van een normaal prestatieniveau op pagina's met complex scrollen is een behoorlijk lastige taak.

Meer slechtste idee Het lijkt erop dat de standaard scroll wordt vervangen door het zogenaamde scrolljacking (de inhoud verandert synchroon met de scroll, een voorbeeld is de website van Apple). Doe dit niet. Het is moeilijk om een ​​dergelijk effect met succes te implementeren, en niet alle gebruikers zullen het leuk vinden.

Als je enige ervaring hebt en de wens hebt om je eigen schuifbalk te maken, maak er dan een lichtgewicht prototype van en test het op functionaliteit voordat je tijd besteedt aan de volledige ontwikkeling.

#9 Test uw projecten vaker op mobiele apparaten.

De meeste websites worden op een pc gemaakt. Meestal worden ze getest op dezelfde machine waarop ze zijn ontwikkeld. Dus, mobiele versie site- en animatieprestaties verdwijnen naar de achtergrond. Sommige animatietechnologieën (bijvoorbeeld canvas) werken niet goed op mobiele platforms.

Als de animatie echter goed is gemaakt en geoptimaliseerd, dan is het resultaat mobiele ervaring gebruik kan qua kwaliteit superieur zijn aan desktop. Mobiele optimalisatie Vroeger was het een heel moeilijk onderwerp, maar nieuwe iPhones werk sneller dan de meeste laptops. Als u de bovenstaande tips opvolgt, kunt u indrukwekkende prestaties in uw animaties behalen mobiele apparaten Oh.

De mobiele versie van de site is daar een groot en zeer belangrijk onderdeel van. Dit klinkt misschien vreemd, maar ik raad aan om uw site een week uitsluitend op uw telefoon of tablet te bekijken. Idealiter zou u niet het gevoel moeten hebben dat u gestraft wordt omdat u niet op uw bureaublad kunt komen. Als alles snel, soepel en zonder de beoogde structuur te schenden, dan heb je je doel bereikt. Als er iets misgaat, moet je blijven werken.

Ga door met het aanbrengen van ontwerpverbeteringen en het verbeteren van de prestaties totdat het verschil in gebruikerservaring tussen de mobiele en desktopversies van de site volledig verdwijnt.

Als u uzelf dwingt een mobiele site een week lang te gebruiken, zult u deze waarschijnlijk nog beter optimaliseren dan de grotere versie. Door irritatie tegen te gaan door het regelmatig te gebruiken, begrijpt u volledig de problemen waarmee uw gebruikers te maken krijgen en kunt u deze elimineren voordat het project live gaat. Dit zal u in de toekomst veel problemen besparen.

#10 Test projecten op verschillende apparaten

Er zijn veel factoren die de prestaties van een website op pc's en mobiele apparaten radicaal kunnen beïnvloeden: schermresolutie, aantal pixels in het venster, oude hardware, enz.

Hoewel Chrome en Safari op Webkit zijn gebouwd en vrijwel dezelfde syntaxis hebben, hebben ze elk hun eigen eigenaardigheden. Elke Chrome-update repareert tegelijkertijd oude bugs en introduceert nieuwe, dus je moet constant de vinger aan de pols houden, zoals ze zeggen.

Het is duidelijk dat niet iedereen de weg van de minste weerstand wil volgen, door websites te maken volgens de kleinste gemene deler van de som van bugs, om niet opnieuw in de problemen te komen na de meest recente updates. populaire browsers. Het kan zeer de moeite waard zijn om slimme manieren te vinden om verbeteringen toe te voegen en sommige te verwijderen om uw site soepel te laten werken.

Ik wissel regelmatig van werk tussen mijn kleine MacBook Air en een grote iMac. Elke cyclus brengt kleine problemen aan het licht en geeft noodzakelijke verbeteringen aan. Dit betreft niet alleen de prestaties van de animatie, maar ook het ontwerp van de site als geheel, informatiedichtheid, leesbaarheid, structuur, enz.

Mobiel en reguliere versie Websites verschillen meestal qua structuurontwerp in termen van breedte, hoogte, pixeldichtheid en andere eigenschappen. Kennis van kenmerken besturingssystemen en hardwarekenmerken van mobiele apparaten kunnen helpen bij de optimalisatie, omdat ze heel anders zijn dan die op pc's.

Ik hoop dat je de bovenstaande technieken nuttig vond en ze in je volgende project gebruikt. Succes!

Vertaling van het artikel https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29

Pas de Deux, Norman McLaren 1968

Animatie is niet de kunst van het tekenen in beweging, maar de kunst van het bewegen in het tekenen. — Norman McLaren

Iedereen weet wat animatie is, maar hoe zit het met het combineren ervan met web- en mobiel ontwerp? Tegenwoordig gebruiken veel sites animatie op een of ander niveau, maar vooral ter wille van prachtig beeld, niet om de UX te verbeteren.

Net als bij traditioneel ontwerp heeft animatie een concept, principes en een verlangen om te zoeken niet-standaard oplossingen, waardoor de animatie in uw voordeel werkt. Begin met deze vier nuttige tips over het gebruik van animatie om uw website te verbeteren.

Focus op beweging, niet op code

Denk na over de beweging voordat je over de code gaat nadenken. Hierdoor kunt u meer aandacht besteden aan het animatieproces. Natuurlijk bestaat de kans dat niet al uw ontwerp perfect kan worden gecodeerd, maar op deze manier heeft u de mogelijkheid om compromissen te sluiten.

Vroege schetsen van Bugs Bunny door Chuck Jones laten zien dat hij nadenkt over hoe hij hem vorm, gewicht en beweging kan geven.

Als u eerst over de code begint na te denken, wordt de persoonlijkheid van de animatie ondermijnd door u zorgen te maken mogelijke beperkingen codering.

Het is bijna alsof je een illustratie plant op basis van het kleurpotlood dat je hebt (en niet hebt). Dit is niet correct.

Dit doodt elke reden om om te beginnen animatie toe te voegen. Probeer u meer te concentreren op hoe u wilt dat uw animatie eruitziet en beweegt. Details over de implementatie volgen later.

Uiteindelijk zal coderen slechts een middel worden om een ​​doel te bereiken. Jouw ontwerp en psychologische proces zorgen ervoor dat de animatie tot leven komt.

Focus op het doel

Als je animatie geen doel heeft, is het de moeite waard om te overwegen of er wel een nodig is. Geanimeerde laadindicatoren hebben bijvoorbeeld een veel dieper doel dan veel ontwerpers denken: zoals ‘iedereen doet het’ of ‘het ziet er cool uit’.

De laadanimatie is gemaakt om gebruikers wat te geven feedback(of, door ten minste, gevoel van vooruitgang). Andere menu-animaties kunnen handig zijn om de gebruiker te laten zien waar het menu zich bevindt wanneer het gesloten is. Beide voorbeelden zijn praktische voordelen voor de gebruiker.

Aan de andere kant waren de navigatie-onthulling en het laden van logo's voorbeelden van animatie die meer decoratief dan functioneel was. Houd er rekening mee dat uw animatie is gemaakt om de gebruiker te helpen, niet de maker. Dit is niet jouw pitch voor Pixar.

Laten we eens kijken naar decoratieve, flitsende animatie en iets functionelers.

schreeuwen

elegant

Zoals u kunt zien, kunt u vrijwel hetzelfde resultaat bereiken zonder flitsende, heldere animaties. Dit geeft schoon uiterlijk, en laat de gebruiker niet denken: "Eh... wat is er net gebeurd?" Bovendien lijken drukke animaties te vertragen naarmate je ze vaker gebruikt.

Leer de beweging

Het is moeilijk om goede animatie te maken zonder beweging te begrijpen. De sleutel tot goede animatie is meer imitatie echte bewegingen dan hun artistieke interpretatie.

Met YouTube kunt u video's met verschillende afspeelsnelheden bekijken via het paneel met spelerinstellingen.

Als je niet zeker bent van de beweging, zoek dan online een video van het equivalent in het echte leven en leer het op lage snelheid. Lage snelheden herhalingen laten vaak belangrijke details zien. Veel mensen weten niet dat je met YouTube video's met verschillende afspeelsnelheden kunt bekijken via het paneel met spelerinstellingen.

Als mensen aan beweging denken, denken ze meestal aan omhoog, omlaag, naar links en naar rechts bewegen, maar zelfs als je animatie die kant op beweegt, wil dat nog niet zeggen dat deze er natuurlijk uitziet. Het is altijd de moeite waard om rekening te houden met factoren als materiaal, snelheid, versnelling, springen en reflectie. Het is belangrijk om naadloze animaties te creëren om de illusie en fantasie te ondersteunen. Met andere woorden, probeer je animatie bijna “onzichtbaar” te maken.

Het is gemakkelijker om ‘onzichtbare animatie’ te creëren als je begrijpt hoe mensen beweging zien. Daarom is het een goed idee om de wereld om je heen te verkennen.

Bestudeer videogame-interfaces - vooral die van de afgelopen drie jaar - en let op hoe gebruikers er doorheen navigeren. Als je geen zin hebt om de game te bekijken, kijk dan gewoon naar verschillende tekenfilms en shows. Het allerbelangrijkste is creëren echte testen voordat je animatie gaat toepassen op complexe projecten.

Bron: Martin Drapeau - Backbone Game Engine.

Probeer grillige en flitsende bewegingen te vermijden. Laat de animatie stabiel zijn. Laat de gebruiker genieten en begrijpen wat hij ziet, vooral als de animatie dit overbrengt belangrijke informatie. De bewegingen van bochten op punten zijn ideaal, die zijn er ook soepele overgang door scherpe bochten en bochten indien nodig.

Vertel op harmonieuze wijze uw verhaal

Synchronisatie - trefwoord bij animatie. Natuurlijk wil je eerst het ene element doen, dan het andere, enzovoort, om zoveel mogelijk te creëren meer animatie. Maar dat is het niet de beste manier, die de moeite waard is om te lopen. Elke animatie die je maakt, hoe groot of klein ook, moet één samenhangend blok zijn.

De beste manier om dit te doen is door iets te maken dat op een animatie lijkt. Dit zijn geanimeerde storyboards bestaande uit tekeningen of schetsen die zijn bewerkt of gearrangeerd om zo goed mogelijk op het eindresultaat te lijken.

Geloof me, dit is erg handig als je aan een website of film werkt. De onderstaande afbeelding is het storyboard dat ik voor de muziekvideo heb gemaakt. Het is onnodig te zeggen dat dit niet het eindresultaat was, maar het hielp me om niet in de war te raken.

Door uw animatie te schetsen, kunt u zien hoe alles er uiteindelijk uit zal zien en kunt u onvolkomenheden vroegtijdig opmerken. Uw laadanimatie is bijvoorbeeld een mix van draaiende bewegingen en vergrendelde elementen totdat de navigatie van uw site zich openbaart met behulp van cirkels. Als u deze inconsistenties ziet, kunt u de nodige wijzigingen aanbrengen of iets heel anders proberen.

Door eerst kleine maar belangrijke oefeningen en tests als deze uit te voeren, kun je je algehele harmonieuze beweging activeren. Er zijn veel geweldige sites die dit op verbazingwekkende wijze hebben gedaan. Reverend Danger en Every Last Drop gebruikten overal animatie om hun verhaal te vertellen.

Hoewel beide sites heel anders animeren, is elk element erop gemaakt om niet alleen een verhaal te vertellen, maar het letterlijk vooruit te helpen.

Kortom

Animatie omvat een groot aantal stijlen en benaderingen, maar dit betekent niet dat er geen sleutel- en basisconcepten zijn. Zo haalt u het maximale uit uw animatie:

• Weg met de ‘code eerst’-mentaliteit,

• Maak animatie praktisch en nuttig,

• Wacht even voordat je echt begrijpt wat de bewegingen zeggen.


Maar het belangrijkste is dat je plezier hebt bij het maken van je animatie.

Animatie is een van de belangrijkste trends bij het bouwen van moderne websites. Animatie-elementen in interfaces vergroten de bruikbaarheid ervan nieuw niveau, waardoor ze intuïtief en toegankelijk worden voor de gemiddelde gebruiker. Op landingspagina's of bijvoorbeeld bedrijfswebsites helpt het om de bezoeker duidelijker over uw product te vertellen of de voordelen ervan te laten zien.

We hebben een selectie gemaakt van 5 bibliotheken voor het maken van animaties op websites, waarbij we de voordelen, nadelen en toepassingsgebieden bespreken.

GreenSock-animatieplatform

Maar tegelijkertijd is tween.js volkomen ongeschikt voor het animeren van HTML-elementen - de volgende twee tools kunnen dit aan.

Verplaats.js

Move.js is een javascript-bibliotheek waarmee je alles kunt doen wat tween.js doet, alleen met behulp van CSS3 en HTML5 in plaats van Canvas. Het is niet de gemakkelijkste (zoals voor JS), maar een van de meest populaire. Dankzij een reeks vooraf voorbereide animatietypen (rotatie, kanteling, rotatie, enz.) is het ook een van de gemakkelijkst te gebruiken.

Voorbeeldcode met Move.js:

Verplaats("#example-4 .box") .rotate(140) .end();

WOW.js + Animate.css

In feite zijn dit geen echte animatiebibliotheken of raamwerken, althans in de traditionele zin.

Animate.css is gewoon CSS-bestand, dat enkele tientallen regels bevat met betrekking tot animaties, en WOW.js is slechts een klein script dat deze animaties uitvoert terwijl de pagina scrollt.

Samen zijn deze twee scripts dat misschien wel de beste manier kracht HTML-elementen beweeg ze, of, met andere woorden, animeer ze.

Ten eerste, lichtheid beslist. Slechts 2 KB en geen afhankelijkheden!

Ten tweede, wow.js en animate.css zijn uiterst eenvoudig te gebruiken. Hoogstwaarschijnlijk hoeft u geen enkele regel extra JS-code te schrijven. Het is voldoende om deze twee scripts aan de pagina te koppelen en er een paar toe te voegen css-klassen: wow-klasse en de klasse van de animatie die we nodig hebben.

Wanneer de pagina nu wordt geladen, zal dit element prachtig draaien in plaats van statisch weer te geven:

Om de animatie aan te passen, worden speciale gegevensattributen gebruikt, bijvoorbeeld data-wow-duration=”2s” stelt de centrifugeduur in op 2 seconden.

Demo, meer gedetailleerde documentatie en volledige lijst data-attributen zijn te vinden op de officiële WOW.js-website, een volledige lijst met animatieklassen is te vinden op de officiële Animate.js-website.

Animatie met JQuery

Woord "animatie" komt van het oude Latijnse woord "anima", wat betekent "ziel". Pogingen om statische kunstmatige objecten leven in te blazen verschenen duizenden en duizenden jaren geleden, toen Pygmalion probeerde zijn creatie wakker te maken - het standbeeld van de charmante Galatea.

Tegenwoordig is animatie stevig verankerd in webdesign en lijkt het een geweldige aanvulling op veel website-elementen. Brengt het meer leven in het ontwerp of kan het soms alles verpesten? Laten we eens kijken welke voordelen animatie voor uw website kan opleveren en wanneer kunt u dit beter vermijden?

HOE IS ANIMATIE VERSCHIJNT IN WEB DESIGN?

De animatie verscheen al een hele tijd geleden op internet. In het begin waren ze klein .GIF-bestanden van verschillende bewegende beelden en videoclips. Het was een donkere periode met veel flitsende ansichtkaarten, dansende katten en andere dingen die we liever niet zien.

In die begindagen beschouwde niemand animatie als een vorm van animatie hulpmiddel voor verbetering van de bruikbaarheid van de website. Het werd vooral gebruikt ter decoratie of gewoon voor de lol. Vandaag kunt u gebruiken animatie-effecten om de navigatie en bruikbaarheid van de site te verbeteren.

Meer recentelijk zijn alle geanimeerde elementen en effecten op websites gemaakt met behulp van Flash-technologieën. In die tijd was het een revolutionaire technologie, hoewel deze erg zwaar was en de laadtijd van de site aanzienlijk verhoogde. Tegenwoordig wordt animatie met meer gemaakt gemakkelijke manier het coderen van JavaScript en CSS die helpen bewegende elementen aan de site toe te voegen zonder deze te overbelasten. En nog belangrijker: animaties worden tegenwoordig gebruikt om de UX te verbeteren, niet alleen voor de lol. Het is een uitstekend hulpmiddel voor webontwerpers om een ​​website beter en gebruiksvriendelijker te maken.

VERBETERING VAN DE BRUIKBAARHEID MET ANIMATIE

In veel gevallen worden animatie-effecten gebruikt om de aandacht van de gebruiker te trekken Naar belangrijke details, maar ook om hem te helpen de juiste beslissing te nemen over onder meer de klikbaarheid van elementen.

Veel websites gebruiken daarom een ​​schudeffect voor inlog- of registratieformulieren om aan hun gebruikers aan te geven dat er een fout is. Introductie bijvoorbeeld onjuiste informatie of onjuist wachtwoord. Deze neiging imiteert iemand die zijn hoofd schudt terwijl hij ‘nee’ zegt.

Er zijn veel andere manieren om animatie te gebruiken om de UX te verbeteren. Het kan worden gebruikt bij navigatie om categorieën van subcategorieën te scheiden of bij meervoudige selectie waarbij alle andere items vervagen, behalve het geselecteerde item.

E TECHEVENT – WEBSITE MET GEANIMEERDE ELEMENTEN

Animaties kunnen worden gebruikt om de gebruiker door de site te leiden en hem zelfs ertoe aan te zetten iets te kopen. Door interactieve elementen toe te voegen en de aandacht van gebruikers daarop te vestigen met behulp van animatie-effecten, kunnen zakelijke websites hun conversies verhogenROI.

INTERACTIEVE SITE A PPS

Websiteverhalen vertellen kunnen ook profiteren van animatie. Het kan gebruikers helpen te laten zien wat de volgende stap is of hoe ze kunnen kiezen waar ze heen willen.

ANIMATIE GEBRUIKEN BIJ MATERIAALONTWERP

Animatie in webdesign is een goede zet die uiterst nuttig kan zijn als deze niet alleen voor decoratieve doeleinden wordt gebruikt. UI- en UX-ontwerpers gebruiken nu vaak animatie om hun workflow te verbeteren. Zelfs Google begrijpt het belang van deze beweging voor de bruikbaarheid. En zo bleek materiaal ontwerp.

Materiaalontwerp wordt steeds modieuzer en wordt tegenwoordig gebruikt in diverse toepassingen en webdesign. Het geheim van zijn populariteit ligt in de grote aandacht voor hoe een object of element wordt waargenomen. Hoe beweging de gebruiker meer kan vertellen over het element en hoe het te gebruiken.

In zijn Materiaalontwerpgids Google zegt dat beweging gebruikers kan vertellen dat een object licht, zwaar, flexibel en zelfs groot of klein is. Animatie moet worden gebruikt om gebruikers meer inzicht te geven in wat de aard van een object is, en dus hoe het in een ontwerp kan en moet worden gebruikt.

Google gaat nog verder met zijn animatie en raadt aan bewegende elementen te gebruiken die hun snelheid en duur veranderen, afhankelijk van welk doel of effect je wilt bereiken. Dus, Google-bedrijf past inkomende en uitgaande elementen toe die op het scherm verschijnen als ze de aandacht moeten trekken, of van het scherm verdwijnen als ze niet langer nodig zijn.

TIPS VOOR ANIMATIES GEBRUIKT OP WEBSITES

Wanneer u animatie op uw website implementeert, moet u ook alle valkuilen zorgvuldig bestuderen. Geanimeerde elementen kunnen nog steeds de siteprestaties en UX schaden.

Eerst moet je goed controleren of de animatie vertraagt ​​uw site niet, downloadsnelheid en algemene prestaties. Dit kan worden onthuld met behulp van eenvoudige vergelijking uw website met de animatie en prestaties van een zwaar pc-spel. Als het spel op je desktop soepeler draait dan op de website, zou dit een reden moeten zijn om de gebruikte animaties te heroverwegen.

De Happy Forecast-website

Gebruik CSS bij het maken van animaties voor uw website. JQuery is ideaal en wordt in veel projecten gebruikt, maar het kan de prestaties van uw website behoorlijk vertragen. Met CSS-code kunt u eenvoudige animaties maken die er op elk apparaat goed uitzien, zonder uw ontwerp te overweldigen en er geweldig uit te laten zien.

Zorg ervoor dat je animatie responsief. Een responsive website is een must als je succesvol wilt zijn. En als het alleen maar werkt en er geweldig uitziet op het desktopscherm, verliest u mogelijk de strijd om gebruikers. Er zijn veel tools waarmee u responsieve animaties kunt maken (bijvoorbeeld Adobe daarna Effects of Invision) en websitebouwers (Webflow en MotoCMS) die responsieve geanimeerde effecten in hun workflow integreren. Zij bieden verschillende soorten animaties die binnen de site kunnen worden gebruikt om de bruikbaarheid en het ontwerp ervan te verbeteren.

Animatie aandacht moeten trekken, maar niet te veel. Zorg ervoor dat de beweging niet te veel tijd in beslag neemt of te lang duurt op het scherm. Dit is vooral belangrijk als we het hebben over elementen waarmee gebruikers regelmatig moeten communiceren. Het kan een of twee keer leuk zijn, maar bij veelvuldig gebruik wordt de animatie vervelend.

Laerepenger-website

Begin met het gebruik van kleine bewegende elementen op uw site. In feite is animatie slechts een middel om een ​​doel te bereiken, niet het doel zelf. Je hoeft hem niet overal aan te zetten waar je maar wilt. Onthoud: gebruik moet gerechtvaardigd zijn.

Best animatie in UI-elementen opnemen of objecten waarmee gebruikers het vaakst communiceren. Zoals navigatiemenu of abonnementsvorm. En denk goed na voordat je een stuiterbox of een glijdende afbeelding toevoegt: hoe zal dit de gebruikerservaring beïnvloeden, zal het de interactie met de site verbeteren?

Animatie is geweldig voor het maken van gedenkwaardige ontwerpen. Het wordt nog steeds veel gebruikt in webdesign, ondanks verschillende kleine problemen met de laadsnelheid of bevriezing. Maar het belangrijkste dat u moet onthouden bij het introduceren van geanimeerde elementen is hun impact op de bruikbaarheid. Maar waar en in welke hoeveelheid u animaties in uw website wilt integreren, is aan u.

En tot slot nog een paar voorbeelden waarbij animatie gebruikt werd exacte treffer op doel.

Website van Kik
Nodeplus Digitaal Agentschap
Creatieve cruise
Geanimeerd landschap Vintage boerderij
Pommade Digital Agency