Gebruik maken van webanimatie. Vlotte acceleratie en vertraging

• Vertaling

Noot van de vertaler: Het hieronder gepresenteerde materiaal bevat een aanzienlijk aantal technische termen, waarvan de vertaling tot onnauwkeurigheden kan leiden. Als u een typefout, fout of onnauwkeurigheid in de vertaling opmerkt, schrijf ons dan en wij zullen alles snel corrigeren.

Daarnaast zal, als vervolg op het onderwerp van de publicatie van vandaag, een geavanceerde academiecursus over CSS-animaties, die meestal via abonnement beschikbaar is, gedurende een week geopend zijn. De beschrijving ervan bevindt zich aan het einde van het onderwerp.

Front-endontwerpers en -ontwikkelaars gebruiken CSS om stijlen te creëren, elementen te positioneren en websites er over het algemeen goed uit te laten zien. CSS wordt vaak gebruikt om beweging aan webpagina's toe te voegen, hoewel het meestal niet verder gaat dan vloeiende overgangen of animaties.

Animatie kan zelfs een krachtig hulpmiddel zijn waarmee sitebezoekers en klanten gemakkelijker kunnen communiceren met de interface van een product en hun doelen sneller kunnen bereiken. Dit kan worden bereikt als u in uw werk enkele basisprincipes volgt.

Het Disney-bedrijf houdt zich al vele jaren bezig met animatie en heeft de volgende aanbevelingen ontwikkeld - in 1981 werd het boek "The Illusion of Life: Disney Animation" gepubliceerd, waarin 12 animatieprincipes werden opgesomd (over hen op Habré). Ze beschrijven hoe je animatie kunt gebruiken om een ​​gevoel van de echte wereld te creëren voor kijkers die op het scherm kijken.

In het artikel van vandaag bekijken we elk van deze twaalf principes en bespreken we hoe ze kunnen worden toegepast bij het maken van webpagina's. Alle CSS- en HTML-bronnen kunnen worden gedownload van Codepen.

In de wereld bestaat het concept van ‘lichaamsmassa’ – en wanneer een object beweegt, blijft de massa onveranderd. Wanneer de bal de grond raakt, wordt deze iets breder en platter omdat de massa van het object tijdens fysiek contact opnieuw wordt verdeeld.

Dit effect is vooral handig bij het maken van fysieke objecten (zoals mensen, klokken of stuiterende ballen).

In het geval van webpagina's kan deze eigenschap uiteraard worden genegeerd: DOM-elementen zijn niet noodzakelijkerwijs geassocieerd met fysieke objecten en kunnen op het scherm naar wens groter en kleiner worden. Een knop kan bijvoorbeeld groter worden en transformeren in informatie venster en foutmeldingen verschijnen en verdwijnen.

De squash- en expand-techniek kan echter worden gebruikt om een ​​element op de pagina het gevoel te geven dat het fysieke massa heeft. Zelfs kleine veranderingen kunnen een subtiel maar opvallend effect creëren.

Bewegingen gebeuren niet plotseling. IN het gewone leven Elke actie wordt voorafgegaan door een soort voorbereiding, of het nu een bal is die langzamer gaat voordat hij van de trap valt, of een persoon die zijn knieën buigt voordat hij springt.

Dit effect kan worden gebruikt om objecten op een webpagina realistischer te laten bewegen. Het wachten zelf kan bijvoorbeeld worden geïmplementeerd als een lichte wiebelbeweging, waardoor gebruikers kunnen begrijpen wat er gebeurt en gemakkelijker de beweging van het object op het scherm kunnen volgen.

Dit effect is bedoeld om een ​​object te definiëren als het brandpunt van de scène, terwijl andere objecten ruimte maken voor de hoofdactie. Om dit effect te creëren, wordt het gewenste object op passende wijze naar de voorgrond gebracht of worden de bijbehorende elementen gemaskeerd om het oog van de gebruiker te richten op wat hij zou moeten zien.

In webtermen betekent dit het gebruik van doorschijnend dimmen voor bepaalde inhoud. Door een donkerdere laag op een bestaande pagina aan te brengen en de inhoud vervolgens op de voorgrond te plaatsen, wordt de aandacht van de gebruiker hierop gevestigd.

Een andere benadering is het gebruik van bewegingen. Wanneer meerdere objecten tegelijkertijd op de pagina bewegen, kan het behoorlijk moeilijk zijn om te weten welke de moeite waard is om te bekijken. Als je in zo’n situatie alle objecten tegenhoudt, behalve één ‘noodzakelijk’ object, dan zal alle aandacht daar automatisch op gericht zijn.

Beweging kan op andere manieren worden gebruikt. Als een gebruiker bijvoorbeeld met een document werkt, kan een lichte trilling en knipperen van de knop 'Opslaan' de persoon ertoe aanzetten erop te klikken. Als er geen activiteit op het scherm is, vallen zelfs kleine bewegingen echt op.

Directe beweging wordt gekenmerkt door de volledige weergave van alle animatieframes. Op zijn beurt wordt stapsgewijze verandering gekenmerkt door het creëren van een reeks sleutelframes, waarvan de intervallen later worden ingevuld, meestal met behulp van hulpmiddelen.

De tweede benadering wordt in de meeste webanimaties gebruikt: de overgangen tussen hoofdframes worden geïmplementeerd door de browser, die het verschil tussen elk van de frames interpoleert en zoveel tussenframes tekent als nodig is om de uiteindelijke animatie vloeiend te maken.

De uitzondering is de functie "Stappen". Bij gebruik ‘stapt’ de browser door een bepaald aantal discrete frames. Op deze manier kunt u een reeks afbeeldingen maken en deze vervolgens één voor één afspelen in de browser met behulp van de Straight Ahead Action-stijl.

Acties gebeuren niet altijd tegelijkertijd. Wanneer een rijdende auto krachtig remt, “dommelt” hij in met de rook van de banden, en de bestuurder erin blijft rijden totdat de laatste stop plaatsvindt.

Dit effect wordt bereikt door middel van volg- en veegbewegingen - deze zijn nodig om aan te geven dat het object is gestopt. Een element dat in een lijst is geplaatst, kan bijvoorbeeld een korte afstand afleggen naar de gewenste positie en vervolgens terugkeren naar de juiste positie.

Het rimpeleffect wordt gecreëerd door objecten verschillende bewegingstempo's te geven. Deze aanpak wordt gebruikt bij overgangen in iOS: sommige knoppen en elementen bewegen met verschillende snelheden, wat resulteert in bewegingen die realistischer zijn dan wanneer ze met dezelfde snelheid zouden bewegen. Het combineren van bewegingen geeft de gebruiker de tijd om zich bewust te worden van de veranderingen die optreden.

Op internet wordt dit meestal bereikt door vloeiende overgangen of CSS-animaties met verschillende afspeelsnelheden te combineren.

Objecten gaan zelden onmiddellijk van rust naar maximale snelheid. Het duurt meestal enige tijd voordat ze versnellen, net zoals het duurt voordat ze stoppen. Zonder geleidelijke versnelling en vertraging zien bewegingen er onnatuurlijk uit.

In CSS-terminologie staat het versnellen en vertragen bekend als versoepeling of "versoepelingsfunctie", die de verandering in snelheid van een animatie beschrijft.

Met behulp van de vloeiendheidsfuncties kunt u animaties maken die versnellen en vertragen, en zelfs complexere effecten (met behulp van de kubieke bezier-functie).

Vertragen en versnellen maakt objecten realistischer, maar er is nog één ding: in het leven bewegen ze zelden in een rechte lijn, in de regel volgt de beweging een gebogen boog.

Bereik een dergelijke beweging in een boog met met behulp van CSS Je kunt het op een aantal verschillende manieren doen. Een daarvan is om verschillende animaties te combineren. Een animatie van een stuiterende bal kan bijvoorbeeld worden gedaan door het object op en neer te bewegen, en de tweede beweging gecombineerd met het naar rechts bewegen. Zo blijkt dat de bal over het scherm stuitert.

De tweede manier is om het element te roteren. Door het rotatiecentrum te veranderen en het buiten het oorspronkelijke object te verplaatsen, kunt u ook een boog vormen.

De belangrijkste actie die op het scherm plaatsvindt, kan worden benadrukt met “secundaire” animaties. Dit kan de beweging van de armen van een persoon zijn tijdens het lopen of het schudden van zijn hoofd bij elke stap. Of het stof dat bij elke balslag uit de grond opstijgt.

In het geval van websites kunnen secundaire elementen zich "uitspreiden" om te benadrukken waar de gebruiker echt op moet letten (een voorbeeld van een gebruiksscenario is het slepen van een element om het in het midden van een lijst in te voegen).

Door de duur van de animatie te manipuleren, kunt u dit zo maken grote voorwerpen leken zwaar, en kleintjes leken licht.

Op internet kan dit worden bereikt door eenvoudigweg de waarden voor de animatieduur en de overgangsduur te wijzigen.

Door de duur van een animatie te wijzigen, kunt u deze laten opvallen tussen de inhoud van een webpagina of tijdens gebruikersinteractie.

Deze techniek wordt vaak gebruikt om de aandacht te trekken bepaalde acties en ze meer drama te geven in tekenfilms. Een wolf die iemand probeert te bijten, opent zijn mond veel wijder dan normaal - het is veel enger en indrukwekkender.

Op een webpagina kunnen objecten worden in- en uitgezoomd om ze te benadrukken en de aandacht van de gebruiker te trekken. Bij het invullen van een formulier is het bijvoorbeeld zinvol om het actieve veld groter te maken, en de inactieve dit moment, integendeel, verminderen.

Bij het werken met driedimensionale objecten is het noodzakelijk om rekening te houden met de regels van het perspectief: mensen leven in een driedimensionale wereld, dus als iets er niet uitziet zoals ze verwachten, lijkt het verkeerd.

IN moderne browsers er is goede ondersteuning voor 3D-transformaties. Dit betekent dat de ontwikkelaar een animatie kan maken die objecten roteert en over het scherm verplaatst, en de browser zelf zal deze maken vloeiende overgangen tussen staten.

In de kunstwereld kan aandacht voor detail een bijzondere sfeer creëren, bijvoorbeeld bij het kijken naar een schilderij. Op dezelfde manier zorgen hoogwaardige en goedgekozen animaties er in de wereld van het web voor dat de site er aantrekkelijker en gezaghebbender uitziet. Het Stripe-serviceteam heeft bijvoorbeeld groot succes geboekt met dergelijk werk.

Tot ziens op de Academie!

Tags:

• animatie
• animatie principes
• webontwikkeling

Natuurlijk heeft animatie altijd stilstaande objecten tot leven gebracht, vooral voor 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 de aandacht van de gebruiker of koper veel beter trekt.

Het gebruik van levendige 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:

Een prachtige site die coole animaties gebruikt meer verbinding 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.

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

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.

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!

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

Deze site maakt gebruik van zowel prachtige illustraties als goede animatie naar hen. Alles bij elkaar ziet het er erg gaaf uit.

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.

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.

Een interessante site met bijzondere foto's en tekeningen, plus animatie. Met andere woorden: ongebruikelijk, maar stijlvol.

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

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

Animatie van webpagina-elementen

Een van de belangrijkste voordelen van vrij positioneerbare elementen is de mogelijkheid om hun locatie, grootte en zichtbaarheid te bepalen met behulp van speciaal geschreven scripts. U kunt eenvoudige animaties op webpagina's maken door vrij positioneerbare elementen langs gespecificeerde paden te laten bewegen. Bovendien is er geen wijziging van de HTML-code vereist, behalve het toevoegen van de juiste scripts (uiteraard als de overeenkomstige elementen op de pagina al zijn gemaakt).

Deze animatie kan twee doelen dienen. In het eenvoudigste geval kunt u hiermee webpagina's verlevendigen, aantrekkelijker maken en bezoekers naar de site trekken. (Het aantal bezoekers is de enige maatstaf voor de kwaliteit van een bepaalde internetbron.) Het zal het ook mogelijk maken leermiddelen te creëren die op internet kunnen worden geplaatst of op cd's kunnen worden verspreid. (Leraren van scholen en andere onderwijsinstellingen- dit is voor jou!) Helaas maken webontwerpers weinig gebruik van deze interessante mogelijkheid.

Er werd gezegd dat er, afgezien van het schrijven van de scripts die de animatie daadwerkelijk implementeren en het koppelen ervan aan bepaalde gebeurtenissen, geen speciale bewerking van de HTML-code vereist is. Het schrijven van scripts is echter een taak die op zichzelf best lastig is. Om dit te kunnen doen, moet je niet alleen de taal zelf kennen JavaScript-programmering, moet u goed begrijpen hoe de interne mechanismen van het webbrowserprogramma werken en hoe u er toegang toe krijgt, zodat u ze later voor uw behoeften kunt gebruiken. Bovendien moet u weten hoe animatie wordt geïmplementeerd, waardoor een pagina-element lijkt te bewegen. En je moet natuurlijk artistieke smaak hebben en - zeker! - grenzen kennen.

Prima! Er zijn geen problemen met artistieke smaak en gevoel voor verhoudingen. Maar er zijn problemen met JavaScript en de interne mechanismen van de webbrowser. Om precies te zijn: we kennen noch het een noch het ander. En toch willen we heel graag een aantal, in ieder geval eenvoudige, animaties op onze pagina's maken. Wat moeten we doen?

Gebruik Dreamweaver. Het biedt een zeer handige manier om geanimeerde elementen te creëren zonder je te verdiepen in JavaScript en de donkere diepten van de webbrowser. U geeft eenvoudigweg het bewegingstraject van dit of dat element aan, waarna u enkele parameters instelt - en u krijgt meteen het resultaat. Dreamweaver maakt zelf de benodigde JavaScript-scripts en plaatst deze in de HTML-code van de pagina. Handig, toch?

Laten we eens kijken hoe dit allemaal wordt gedaan. Maar niet nu. Op dit moment is er nog iets dat we moeten weten. Namelijk over scriptprogramma's, hun doel en hoe animatie wordt gemaakt. Wees niet ongerust: we zullen geen scripts met de hand schrijven (laat Dreamweaver dat doen), maar we zullen het gewoon hebben over de basisprincipes die sowieso niet schadelijk zijn om te weten.

Inleiding tot webscripting

Waarom hebben we scripts nodig? Om de beperkingen van HTML te overwinnen. Niet allemaal natuurlijk, maar één ding.

HTML-beperkingen

Dus waar beperkt HTML ons? Waarom was het nodig om een ​​andere taal uit te vinden? Is het mogelijk om zonder te doen?

Over het algemeen is het mogelijk. We hebben het elf hele hoofdstukken volgehouden met gewone HTML, en niets! Maar het feit is dat we de pagina's niet-interactief hebben gemaakt, dat wil zeggen dat ze geen interactie hebben met de gebruiker en hun inhoud niet veranderen als reactie op zijn acties. Voor dergelijke pagina's is 'pure' HTML voldoende. En zodra je een pagina wilt ‘leren’ om met de gebruiker te communiceren, dat wil zeggen interactief wilt maken, loop je meteen tegen een onoverkomelijke muur aan.

Dit komt omdat HTML u niet toestaat het gedrag van de pagina te specificeren als reactie op bijvoorbeeld een muisklik op een van de elementen ervan. Met zijn hulp wordt alleen het uiterlijk gespecificeerd. En daarin verschilt het fundamenteel van de ‘klassieke’ programmeertalen, die gedrag beschrijven.

Eigenlijk is HTML geen programmeertaal, maar een taal voor het beschrijven van webpagina's - en niets meer. Het beschrijft hoe informatie eruit zou moeten zien in een webbrowservenster, dat is alles. Bovendien is dit uiterlijk strikt gestandaardiseerd; Een webontwerper is, zoals u al begrijpt, veel beperkter in zijn mogelijkheden dan een drukwerkontwerper. Hij zal zich geen bijzondere vrijheden op webpagina's permitteren. (Frames, lay-outbladen en CSS-cascading-stijlbladen nemen veel van de beperkingen weg, maar niet alle.)

Dergelijke beperkingen zijn uiteraard te wijten aan een goed doel: het garanderen van compatibiliteit en uniformiteit in het uiterlijk van pagina's op elk computerplatform. Maar wie heeft compatibiliteit nodig voor zo'n prijs!

Je kunt zeggen dat elke webpagina al interactief is omdat deze reageert op klikken op hyperlinks. Maar dit is geen interactiviteit, maar standaardgedrag gedefinieerd door HTML. Interactiviteit is wanneer, als reactie op het verplaatsen van de muiscursor, een afbeelding erachter "rent", wanneer u op een foto hieronder klikt, verschijnt de beschrijving ervan, wanneer deze direct op de pagina "aanvinkt". digitale klok. Dit is echte interactiviteit: in het eerste en tweede geval reageert de pagina op gebruikersacties, en in het derde geval op gebeurtenissen in de externe omgeving. (Hieronder externe omgeving verwijst naar het besturingssysteem; de systeemtimer die erin draait, zorgt ervoor dat de getekende klok loopt.) En reguliere HTML kan dit niet bieden.

Om deze tekortkoming van ‘pure’ HTML te ondervangen, zijn er twee manieren bedacht.

De eerste manier zijn speciale, meestal niet-standaard, ‘eigen’ tags die de mogelijkheden van de taal uitbreiden. In de overgrote meerderheid van de gevallen voegen ze interactieve mogelijkheden toe aan webpagina's. Bijvoorbeeld een niet-standaard gekoppelde tag. . ., ondersteund Internet Explorer, kunt u “scrollende” tekst op de pagina maken. Maar u moet toegeven dat deze extensies de webontwerper beperken tot de mogelijkheden die de webbrowserontwikkelaars erin stoppen. En je kunt de tekst in een element niet dwingen om niet te scrollen, maar om de kleuren opeenvolgend te veranderen - de ontwikkelaars van Internet Explorer hebben hierin niet voorzien.

We willen het gedrag van pagina-elementen zelf instellen als reactie op gebruikersacties. Wij willen hun gedrag zelf controleren, alle regie in handen houden. HTML kan deze niet aan ons verstrekken; beperkingen vanwege de aard ervan vormen een muur die niet kan worden overwonnen. Als er echter niet over een muur gesprongen kan worden, kun je er wel omheen. Dat is wat we zullen doen.

Webscripts

De tweede manier is om in de HTML-code speciale programma's te introduceren die zijn geschreven in "klassieke" programmeertalen, dat wil zeggen die het gedrag van elementen beschrijven. Dergelijke programma's worden scripts genoemd (of scripts uit het Engels, script - script). (Waarom worden ze zo genoemd? Je kunt ervan uitgaan dat deze programma's scenario's beschrijven voor het gedrag van een bepaald element wanneer een bepaalde gebeurtenis plaatsvindt.) Deze programma's worden in HTML-code geplaatst met behulp van een speciale gepaarde tag die speciaal voor dit geval door de WWWC-commissie is gestandaardiseerd. . .. De webbrowser, die dergelijke HTML-code “ontcijfert”, leest de scripts en voert ze onmiddellijk uit of “legt ze op de plank” zodat ze kunnen worden uitgevoerd nadat een bepaalde gebeurtenis heeft plaatsgevonden.

Het was na de “ontdekking” van het tweede pad naar interactiviteit dat het World Wide Web “levend” werd, en veel webontwerpers werden ook webprogrammeurs.

Er zijn verschillende programmeertalen, scripttalen (of scripttalen) genoemd, speciaal gemaakt voor het schrijven van scripts. De meest populaire zijn er slechts twee: JavaScript en VBScript.

De JavaScript-taal is door Netscape ontwikkeld op basis van de bekende “klassieke” Java-programmeertaal. Daarom verscheen voor het eerst ondersteuning voor de JavaScript-taal in de webbrowser Netscape Navigator 2.0. Microsoft Internet Explorer begon JavaScript te ondersteunen in versie 3.0. Bovendien ontwikkelde Microsoft zijn eigen JavaScript-dialect genaamd JScript, dat alleen verschilt van zijn "voorloper" in de aanwezigheid van verschillende nieuwe commando's. Daarom worden deze twee talen vaak niet onderscheiden en worden ze hetzelfde genoemd: JavaScript.

VBScript is door Microsoft ontwikkeld als een "reactie" op JavaScript. Deze taal wordt alleen ondersteund door Internet Explorer versie 4.0 en hoger. Vanwege zijn 'incompatibiliteit' heeft VBScript niet veel grip gekregen op het web, maar het heeft wel een sterke aanwezigheid verworven in het programmeren op de server, namelijk het schrijven van actieve Microsoft ASP-serverpagina's (zie hoofdstuk 15). Momenteel wordt het praktisch niet gebruikt voor het schrijven van webscripts.

Naast JavaScript en VBScript zijn er pogingen gedaan om Perl, Python en enkele andere te gebruiken om webscripts te schrijven. Deze talen zijn echter niet wijdverspreid geworden.

Momenteel wordt het bijna overal gebruikt voor het schrijven van scripts. JavaScript-taal. Het is vrij eenvoudig te leren en biedt de ontwikkelaar zeer uitgebreide mogelijkheden. Bovendien zijn de programma's die erop zijn geschreven klein van volume, wat belangrijk is in het tijdperk van de onverdeelde dominantie van langzame communicatiekanalen.

Om een ​​scripttaal te ondersteunen, wordt een zogenaamde tolk (of virtuele machine) taal. De webbrowser haalt scripts uit de HTML-code van de pagina en geeft deze ter uitvoering door aan de tolk. Deze laatste analyseert de scriptcode, decodeert ze en voert ze uit, waarbij het uitvoeringsresultaat wordt teruggestuurd naar de webbrowser.

Elke scripttaal die door een webbrowser wordt ondersteund, heeft zijn eigen afzonderlijke tolk nodig. Met deze aanpak kan een webbrowser worden 'geleerd' om scripts te ondersteunen die in vrijwel elke programmeertaal zijn geschreven, zolang er maar een tolk voor die taal is die op een specifieke manier is geschreven.

Scripttalen worden geïnterpreteerd genoemd omdat programma's die erin zijn geschreven elke keer dat ze worden uitgevoerd, worden ontcijferd. Dit is hoe ze fundamenteel verschillen van gecompileerde talen (C++, Pascal, Java en vele andere). Programma's die in gecompileerde talen zijn geschreven, worden één keer gedecodeerd en omgezet in machinecode, die door de computerprocessor zelf wordt uitgevoerd, zonder de hulp van een tolk. Voor een dergelijke conversie worden speciale programma's gebruikt die compilers worden genoemd. Natuurlijk werkt de gecompileerde code veel sneller, maar de specifieke kenmerken van webprogrammering zijn zodanig dat er alleen geïnterpreteerde talen in kunnen worden gebruikt.

Nou, dat gaat allemaal over de programmeertalen waarin webscripts worden geschreven. Laten we het nu hebben over hoe deze webscripts worden uitgevoerd.

Een gebeurtenis in een systeem vindt plaats wanneer een bepaalde toestand, extern of intern, optreedt. Afhankelijk van of deze toestand zich binnen of buiten het systeem heeft voorgedaan, worden externe en interne gebeurtenissen onderscheiden. Externe gebeurtenissen omvatten een muisklik op een pagina of een element ervan, het verplaatsen van de muiscursor, het indrukken van een toets op het toetsenbord, het wijzigen van de grootte van een webbrowservenster, enz. Interne gebeurtenissen zijn de voltooiing van het laden van een webpagina, het volgende ‘tikje’ van de systeemtimer, enz. p. Deze classificatie van gebeurtenissen is alleen gemaakt voor het gemak van het trainen van beginnende programmeurs, omdat vanuit het oogpunt van de scripttaal beide soorten gebeurtenissen niet van elkaar verschillen en worden verwerkt in de systeemtimer. zelfde manier.

Als we alleen rekening houden met gebeurtenissen die plaatsvinden op een webpagina, moeten we in gedachten houden dat gebeurtenissen zowel op de pagina zelf als in de afzonderlijke elementen ervan kunnen voorkomen. Als de gebruiker op een deel van de pagina klikt dat niet door elementen wordt ingenomen, vindt er feitelijk een gebeurtenis plaats op de pagina zelf. Als de gebruiker op een grafische afbeelding of tekstparagraaf klikt, vindt de gebeurtenis plaats in deze grafische afbeelding of tekstparagraaf, dat wil zeggen dat in het eerste geval het bericht over het optreden van de “linkerklik”-gebeurtenis door de pagina zelf wordt ontvangen. en in de tweede door een van zijn elementen.

Wat moeten we met deze gebeurtenissen doen, vraagt ​​u zich af? Proces.

Gebeurtenisverwerking bestaat uit het erop reageren. En om hierop te reageren, worden speciaal geschreven scripts gebruikt, genaamd event handlers. Handlers zijn gebonden aan bepaalde gebeurtenissen die plaatsvinden in elk element van de pagina of op de pagina zelf. En dit gebeurt met behulp van een special HTML-extensies, speciaal ontworpen om webscripts te ondersteunen.

In het bijzonder als u wilt dat de afbeelding hieronder verschijnt wanneer u met uw muis over een afbeelding beweegt korte beschrijving, moet u het volgende doen. Onder de afbeelding wordt een vrij positioneerbaar element met beschrijvende tekst geplaatst, en dit element wordt onzichtbaar gemaakt. Vervolgens worden twee scripts geschreven die verband houden met gebeurtenissen die plaatsvinden wanneer de muiscursor over een grafische afbeelding beweegt en wanneer deze ‘weg wordt verplaatst’. Het eerste van deze scenario's maakt het element met de beschrijving zichtbaar, het tweede - onzichtbaar. Hierna worden de geschreven scripts gekoppeld aan de overeenkomstige gebeurtenissen die plaatsvinden in het grafische element. Dat is alles.

We zullen niet ingaan op de specifieke details van de implementatie van dit effect. Ten eerste: “hang niet te veel af van de keuze van de programmeertaal, maar de eerste (en trouwens de laatste in dit boek) JavaScript-script we zullen schrijven en bestuderen in hoofdstuk 13. Ten tweede moeten we op dit moment een pagina-element animeren, dat wil zeggen, het laten bewegen.

Op de meeste interactieve webpagina's zijn de meeste scripts gebeurtenishandlers. Ze implementeren het grootste deel van de logica van paginagedrag bij interactie met de gebruiker. (Hoewel er een bepaald percentage scripts is dat onmiddellijk na decodering wordt uitgevoerd; meestal is dit code die allerlei voorinstellingen maakt.) Deze benadering, waarbij bijna het hele programma een gebeurtenishandler is, wordt gebeurtenisgestuurd programmeren genoemd.

Maar we dwalen af. Laten we teruggaan naar onze animatie. We zullen ons gesprek over programmeren voortzetten in hoofdstuk 13, dat gewijd is aan webscripts en het werken ermee in de Dreamweaver-omgeving.

Basisprincipes van animatie

Eindelijk is het tijd voor animatie. Laten we eens kijken naar enkele basisconcepten waar we in de toekomst niet meer zonder kunnen.

Er is meer dan eens gezegd dat alleen vrij positioneerbare elementen kunnen worden geanimeerd. Vergeet dit niet. Alleen vrije elementen kunnen overal op de pagina worden geplaatst en alleen deze kunnen worden beheerd vanuit scripts. Onthoud dit.

De eenvoudigste animatie

Hoe wordt het animatie-effect bereikt? Waarom lijkt het alsof een pagina-element eroverheen beweegt?

Feit is dat de coördinaten van het element periodiek veranderen. En ze veranderen heel snel, minstens 12 keer per seconde, waardoor we continue beweging waarnemen. Deze frequentie werd gekozen omdat het bij deze frequentie is dat het menselijk oog het vermogen verliest om individuele stappen, “sprongen” van intermitterende bewegingen te onderscheiden. Kortom, voorbij deze limiet wordt intermitterende beweging voor een persoon visueel continu. (Trouwens, film en televisie werken volgens hetzelfde principe.) Onze computers zijn nu behoorlijk krachtig, dus het is heel goed mogelijk om een ​​dergelijke frequentie van coördinaatveranderingen te garanderen.

Maar het is niet voldoende om alleen de coördinaten van het element te veranderen. Het is noodzakelijk om ze te veranderen volgens een speciale wet die het traject van het element beschrijft. Als het element langs een recht pad beweegt, is deze wet heel eenvoudig. In het geval van kromlijnige beweging wordt het veel ingewikkelder. Daarom moet u geen al te complexe animaties op uw pagina's maken: een computer met een laag vermogen zal eenvoudigweg geen al te ingewikkelde trajecten "trekken".

De wet volgens welke de coördinaten van een geanimeerd element veranderen, met andere woorden, zijn traject, wordt beschreven door een speciale functie (laten we dit de trajectfunctie noemen). Zo'n functie neemt enkele parameters en retourneert de coördinaten van het element. Het lijkt op:

(x, y, z) = f(Q, q, dq)

Met de resultaten die door deze functie worden geretourneerd, is alles eenvoudig: x, y en z zijn de coördinaten van het geanimeerde element, respectievelijk horizontaal, verticaal en overlappend (de z-index is u al bekend). Natuurlijk is een functie die drie coördinaten tegelijk retourneert dat wel algemeen geval. Meestal veranderen een of twee coördinaten van het element - x en y.

Maar met de parameters die door de functie worden geaccepteerd, is alles iets gecompliceerder. In totaal zijn er, zoals je kunt zien, drie, en hun doel is niet duidelijk. Laten we al deze parameters in volgorde bekijken.

De allereerste parameter is Q. Dit is de lengte van het bewegingspad van het geanimeerde element. Het kan worden gemeten in pixels, millimeters, graden of bepaalde relatieve eenheden, zoals percentages. Over het algemeen hangt de meeteenheid af van het traject zelf: voor een rechtlijnig traject zijn pixels of millimeters geschikter, en voor een cirkelvormig traject graden of radialen. Eén ding is belangrijk: de Q-parameter moet op de een of andere manier de volledige lengte aangeven van het traject waarlangs ons element zal bewegen.

De tweede parameter (q) geeft de positie aan op het traject dat ons element op een bepaald moment inneemt. Met andere woorden, dit is de afstand in meeteenheden van het traject Q dat hij al heeft “gelopen”. Nadat we het hebben ontvangen, moet onze functie zeggen: ‘het element is hier’ en, zoals ze zeggen, ‘met de vinger wijzen’ naar een punt op zijn traject.

De laatste, derde parameter is dq. Het specificeert de stap waarmee de afstand q zal veranderen bij elke “sprong” van het geanimeerde element. De waarde van deze parameter bepaalt de bewegingssnelheid van het geanimeerde element.

Dus wat moet de trajectfunctie doen? Hieronder staan ​​alle taken vermeld in volgorde van voltooiing.

Dit algemeen algoritme, die alle trajectfuncties, zelfs de meest complexe, moeten volgen. In feite ligt de grootste moeilijkheid in de implementatie van stap 2, dat wil zeggen het berekenen van de coördinaten op basis van de q-waarde. De overige stappen zijn zeer eenvoudig te implementeren en zullen zelfs voor een beginnende programmeur geen problemen opleveren.

Toen we het hadden over de eenvoudigste animatie, werd gesuggereerd dat er één enkele functie was die deze implementeert. In werkelijkheid kunnen verschillende scriptprogramma's worden gebruikt om animaties te maken. De auteur heeft ze gecombineerd tot één functie om het voor u duidelijker te maken.

Er werd aangenomen dat wanneer het geanimeerde element het einde van het pad bereikt (q wordt gelijk aan of groter dan Q), de animatie stopt. In feite kan de trajectfunctie blijven werken. Ze kan bijvoorbeeld gewoon nog een keer executeren initiële instellingen, plaats het geanimeerde element aan het begin van het pad en start de animatie opnieuw. Maar het is het beste om de dq-waarde om te keren (een positieve waarde in een negatieve te veranderen en omgekeerd) en de animatie achterstevoren uit te voeren. Zo'n animatie, die meerdere of een oneindig aantal keren wordt afgespeeld, wordt looping genoemd.

Natuurlijk ziet looping-animatie er indrukwekkender uit. Maar je moet er geen misbruik van maken, vooral niet eindeloos. Waarom - je zult het nu ontdekken.

Realtime animatie

We hebben zojuist gekeken hoe je een eenvoudige animatie op een webpagina kunt maken. Maar feit is dat dergelijke animatie in het echte leven uiterst zelden wordt gebruikt. Bovendien raadt de auteur categorisch niet aan dat je het zelfs maar probeert.

Waarom? Feit is dat de hierboven beschreven methode voor het maken van animatie slechts één meer dan twijfelachtig voordeel en twee enorme nadelen heeft.

Het voordeel is eenvoud en bovendien voor de hand liggende implementatie. Elke programmeur, zelfs een slecht gekwalificeerde, kan gaan zitten en in vijf minuten een script opschrijven dat de beweging van een element langs een recht pad implementeert. Ja, hij zal dit doen, zelfs als hij nog nooit eerder webprogrammering heeft gedaan.

Maar laat hem gewoon proberen zijn creatie op internet te plaatsen!

Laten we ons twee internetgebruikers voorstellen die besloten zijn pagina met animatie te bezoeken. Men heeft een computer van tien jaar oud, een oude, welverdiende computer, die moderne, complexe webpagina's nauwelijks kan verwerken, zelfs zonder multimediatoeters en bellen. De andere heeft een krachtige, ultramoderne machine die zojuist van de montagetafels van een bekend ‘merk’ is gerold. Dus gaan ze naar de pagina, laden deze en beginnen de animatie te bekijken.

De computer van de eerste bezoeker zal moeite doen om hem te laden en, terwijl de harde schijf knettert, de scripts beginnen uit te voeren die de animatie implementeren, hoe wankel of langzaam ook. Het geanimeerde element beweegt in ieder geval over de pagina, de bezoeker is blij - het werkt. Laten we het nu laten en een kijkje nemen naar bezoeker nummer twee. Zijn computer laadt de pagina onmiddellijk en voert onmiddellijk alle scripts uit. Het geanimeerde element zal zo snel langs zijn traject vliegen dat het menselijk oog zijn beweging niet eens zal opmerken.

De vraag is: wie heeft zo’n animatie nodig?

Maar dat is niet zo erg. Het probleem zal komen als onze ongelukkige programmeur besluit de animatie eindeloos te laten herhalen. Kijk nu wat er gebeurt. De pagina wordt geladen in de webbrowser, de tolk begint met het uitvoeren van de scripts... en voert uit... voert uit... voert uit... En terwijl deze wordt uitgevoerd, kan de gebruiker niets met de pagina doen: noch klik op de hyperlink en blader er zelfs niet doorheen in het venster. De enige manier om de langdurige "film" te onderbreken - sluit de webbrowser zelf.

Maar wat te doen? Webprogrammeurs implementeren tenslotte op de een of andere manier animatie op hun pagina's, en het werkt prima, in die zin dat het de gebruiker er niet van weerhoudt om over de pagina te scrollen en op links te klikken. Misschien kennen ze een geheim?

Ja dat doen ze. En het geheim is dat ze een iets andere trajectfunctie gebruiken:

(x, y, z) = f(Q, q, dq, t)

Het verschilt van de functie waarmee we al bekend zijn doordat er nog een parameter voor nodig is: t. Deze parameter is tijd. Met andere woorden: bij het berekenen van coördinaten houdt de trajectfunctie rekening met de huidige tijd. En de animatie blijkt strikt gebonden te zijn aan de tijd, die overal hetzelfde verloopt, in tegenstelling tot de kloksnelheid van processors, die van computer tot computer verschillen.

Hoe wordt dit geïmplementeerd? Feit is dat de nieuwe functie niet de hele tijd wordt uitgevoerd terwijl de animatie loopt, maar van tijd tot tijd wordt aangeroepen wanneer de volgende "sprong" van de animatie moet worden gemaakt, en daarna stopt met werken, wachtend op de volgende oproep. Deze functie is geïmplementeerd als een handlerscript voor een interne gebeurtenis - een "tik" van de systeemtimer.

De animatie is dus duidelijk gebonden aan tijd. Zowel op de oude computer van bezoeker nummer één als op de ultramoderne machine nummer twee beweegt het geanimeerde element met dezelfde snelheid. (Natuurlijk, voor meer krachtige computer de animatie zal waarschijnlijk vloeiender verlopen, maar met dezelfde snelheid als op een krachtigere animatie.)

Verder. Omdat de padfunctie slechts af en toe wordt aangeroepen en niet voortdurend actief is, kan de gebruiker normaal met de webpagina communiceren. Er zit voldoende tijd tussen het tikken van de timer zodat de webbrowser gebruikersverzoeken kan verwerken.

Laten we de taken van de nieuwe trajectfunctie opsommen in volgorde van uitvoering.

Er zijn twee scripts gebruikt om deze functie te implementeren. Eén ervan wordt uitgevoerd wanneer de pagina wordt geladen en implementeert de taak van stap 1. De tweede, de daadwerkelijke gebeurtenishandler van de systeemtimer, implementeert de taken van stap 2-5.

Deze animatie, gekoppeld aan de systeemtimer in plaats van aan de processor, wordt realtime animatie genoemd. Dit wordt gebruikt om bewegende elementen op webpagina's te creëren. De eenvoudigste animatie die we eerder beschreven, wordt vrijwel nergens gebruikt. Je begrijpt al waarom.

Animatie - De Dreamweaver-aanpak

De hierboven beschreven methode voor het maken van animaties met behulp van scripts die de padfunctie implementeren, heeft veel voordelen. Dergelijke scripts zijn zeer klein van formaat en zeer snel uit te voeren, omdat de programmeur de mogelijkheid heeft om de trajectfunctie op de meest optimale manier te schrijven. Ze hebben er echter één groot nadeel-inflexibiliteit. Om het traject van een geanimeerd element te veranderen, moet je in feite een nieuw script schrijven dat een nieuwe trajectfunctie implementeert.

Maar inflexibiliteit is niet het enige nadeel van deze manier van animatie maken. Als een geanimeerd element een vrij complexe beweging moet maken, blijkt het script dat dit traject implementeert erg groot en langzaam. En hoe complexer het traject, hoe groter en langzamer het scenario blijkt te zijn.

Het derde nadeel is de moeilijkheid om complexe trajecten te implementeren. Sorry voor de tautologie, maar het is waar. Onervaren programmeurs, vooral degenen zonder serieuze wiskundige opleiding, zijn meestal beperkt tot eenvoudige trajecten, meestal lineair. Het maximale wat ze durven is een simpele ellips. Maar voor sommige taken, die hieronder zullen worden besproken, zijn vrij complexe bewegingstrajecten nodig. En rondkomen met eenvoudige trajecten is erg problematisch.

Er is echter een uitweg uit deze situatie. Onervaren programmeurs die geen hogere wiskunde kennen, zullen te hulp komen de nieuwe soort trajectfunctie die slechts twee parameters nodig heeft: een reeks kernpunten van het traject en, natuurlijk, de huidige tijd:

(x, y, z) = f()

Alles is duidelijk over tijd, maar wat is een reeks kernpunten? Niets ingewikkelds: dit is een reeks punten die het traject van ons geanimeerde element bepalen. Laten we dit in meer detail uitleggen.

Laten we zeggen dat we een zeer complexe animatie moeten maken waarbij een pagina-element langs een zeer bizar pad beweegt. Tegelijkertijd kennen we de hogere wiskunde niet, dus we zullen de formule voor dit traject niet kunnen afleiden. Wij zijn er echter op uitgekomen.

Je kunt het een beetje anders doen. Laten we eerst de belangrijkste punten direct op het getekende traject markeren en nummeren. Scheid vervolgens een rechte lijn langs de liniaal en plaats er een coördinatentijdschaal op, waarbij u deze bijvoorbeeld in seconden kalibreert. Markeer op deze schaal de begin- en eindpunten van de animatie langs deze schaal tegenover de overeenkomstige divisies, teken er een dikkere lijn tussen en noem dit het animatiespoor. Hierna hoeft u alleen nog maar de belangrijkste punten te nummeren en op de baan tegenover de bijbehorende tijdstempels te plaatsen. Het resultaat is dat we een reeks punten krijgen waarvan de coördinaten en de reistijd eenvoudig kunnen worden berekend (respectievelijk op het getekende diagram en op de tijdschaal). Mee eens, het is op deze manier veel duidelijker.

We hebben het bewegingstraject van ons element op ruitjespapier getekend, waarna we op dit traject het vereiste aantal sleutelpunten hebben geïdentificeerd die het in feite creëren (buigpunten, het begin en einde van het traject, enz.), en schreven hun coördinaten op een apart vel papier. Als we bovendien de tijd kennen waarin het geanimeerde element het hele traject zal afleggen, kunnen we erachter komen op welk tijdstip het op een of ander belangrijk punt zal verschijnen. Het enige dat overblijft is om deze tijdwaarden op hetzelfde vel papier te noteren en ze tegenover de coördinaten van de overeenkomstige punten te plaatsen. We hebben dus een reeks sleutelpunten die kunnen worden doorgegeven aan de nieuwe trajectfunctie.

Dit is de aanpak die Dreamweaver gebruikt.

Als voorbeeld hebben we een animatie gegeven die één enkel geanimeerd element bevat. Maar met Dreamweaver kunt u zoveel elementen tegelijk op een tijdlijn plaatsen als u wilt, waardoor meerdere animatiesporen ontstaan, die kunnen worden gebruikt om zeer complexe animaties te maken waarin alle elementen samen bewegen. Bovendien kunt u met Dreamweaver meerdere animaties maken die onafhankelijk van elkaar op dezelfde pagina worden uitgevoerd en die elk een willekeurig aantal geanimeerde elementen kunnen bevatten. Dus zelfs de meest kieskeurige animator zal tevreden zijn.

Een padfunctie die een array van sleutelpunten als parameter gebruikt, is erg complex, maar we hoeven deze niet te implementeren. Veel krachtige webeditors bied gebruikers de mogelijkheid om animaties te maken en gebruik hiervoor alleen deze aanpak. In dit geval wordt een reeks webscripts die de trajectfunctie implementeren automatisch in de HTML-code van de pagina ingevoegd, zonder dat de gebruiker het zelfs maar beseft.

Natuurlijk is Dreamweaver geen uitzondering. Het biedt gebruikers ook deze mogelijkheid. En hij doet ook al het gruntwerk zelf.

Het nadeel van deze methode voor het maken van animatie is grote maat en niet erg hoge prestaties van de resulterende code. Daarom zal voor de eenvoudigste animaties waarschijnlijk de eerste benadering gerechtvaardigd zijn: speciaal geschreven scripts die de trajectfunctie rechtstreeks implementeren.

We hebben de technische problemen opgelost. Het blijft de vraag in welke gevallen je animatie kunt gebruiken, en in welke gevallen het beter is om je te onthouden.

Waarom is animatie nodig?

Normaal gesproken dient animatie op webpagina's drie doelen:

• breng pagina's tot leven;
• de aandacht op iets vestigen;
• iets laten zien voor educatieve doeleinden.
• Daarom kunnen we drie doeleinden onderscheiden voor het gebruik van animatie:
• amusement;
• reclame;
• onderwijs.

Entertainment op internet is een vrij jonge tak van webconstructie. Het internet is oorspronkelijk gemaakt als een netwerk voor wetenschappers die uitwisseling nodig hadden tekstdocumenten(in eerste instantie zelfs zonder afbeeldingen) en koppel ze tot een soort structuur. Toen kwam de gemiddelde mens naar het internet, en webontwerpers haastten zich om aan zijn smaak tegemoet te komen. (We zullen niet discussiëren over hoe hoog of laag ze zijn. De persoonlijke mening van de auteur: de gemiddelde persoon is te divers om tot één enkel label te worden gereduceerd.) Audio en video verschenen op internet, en complexe afbeeldingen en animaties kwamen op webpagina's terecht. . Nu worden al deze “toeters en bellen” zo vaak gebruikt dat maar weinig mensen erdoor verrast kunnen worden.

Vaardig en matig gebruik van animatie zal uw pagina's enorm verlevendigen. Het is alleen belangrijk om te begrijpen welk effect u wilt bereiken en er alles aan te doen om ervoor te zorgen dat dit wordt bereikt. Overdrijf het niet: gebruik animatie alleen daar waar het echt nodig is. En, God verhoede het, je pagina zal rimpelen als een tv-scherm met een losgekoppelde antenne - daar is niets goeds aan. Vergeet nooit het principe van “inhoud staat voorop, al het andere is decoratie”, laat versieringen de inhoud niet overschaduwen.

Nu reclame. Ze verscheen op internet samen met entertainment, en daarom samen met de gemiddelde persoon. Ik ben er nu al erg moe van, deze internetreclame is bijna meer dan televisiereclame. Maar laten we hulde brengen aan reclame (zowel internet als televisie) - dankzij deze hebben veel populaire niet-commerciële projecten kunnen bestaan. Als de reclame plotseling verdwijnt, zullen deze projecten onmiddellijk daarna verdwijnen.

Traditioneel worden voor reclamedoeleinden op internet zogenaamde banners gebruikt: kleine grafische afbeeldingen van strikt gestandaardiseerde formaten. Bijna alle banners zijn gemaakt in het “geanimeerde GIF” -formaat, dat wil zeggen dat ze al gebruik maken van de animatiemogelijkheden om de aandacht van een potentiële klant te trekken. Het lijkt erop dat reclame-animatie op basis van webscripts nog niet is gebruikt, en als het al is gebruikt, dan nog maar heel weinig. U heeft dus een uitgestrekt, onontgonnen werkterrein voor u dat wellicht goede vruchten afwerpt.

Animatie gebaseerd op vrij gepositioneerde elementen en webscripts is veel compacter dan welke videobestanden dan ook, of het nu geanimeerde GIF- of videobestanden zijn AVI-formaten of Apple QuickTime. Geanimeerde GIF-bestanden worden echter door vrijwel alle webbrowsers ondersteund, zelfs de oudste, en daarom worden ze zo veel gebruikt. Webscripts zullen alleen werken in vrij nieuwe webbrowsers (die, het moet gezegd, nu door de overgrote meerderheid van de internetgebruikers worden gebruikt).

Op de een of andere manier is het de moeite waard om webscripts in advertenties te proberen. En het lijkt erop dat iemand het al probeert.

Laten we soepel overstappen van reclame naar onderwijs. Programma's - leermiddelen, vaak gebruikt in het onderwijs, zijn meestal geschreven in gecompileerde programmeertalen en zijn gewone MS-DOS- of Windows-applicaties. Leermiddelen gebaseerd op ‘live’ webpagina’s zijn nog steeds vrij zeldzaam, hoewel deze richting veelbelovend is. Dergelijke tutorials kunnen zeer snel worden gemaakt en aangepast; en vergeleken met conventionele programma's zijn ze extreem compact (hoeveel ruimte kunnen een eenvoudige webpagina en een paar afbeeldingen in beslag nemen?). Bovendien worden dergelijke handleidingen rechtstreeks op internet, op websites, opgevraagd, wat betekent dat u dat kunt bijzondere problemen het nu modieuze afstandsonderwijs organiseren.

Deze tutorials hebben echter één groot nadeel. Elke voldoende ervaren internetgebruiker kan eenvoudig de broncode van de pagina zelf en de webscripts bekijken en, indien gewenst, daar een paar van uw bevindingen lenen. Daarom, als je enige kennis in tutorials gaat gebruiken, is het beter om deze in een gewoon, gecompileerd programma te implementeren, dat veel moeilijker te hacken is.

Hier zijn drie gevallen waarin animatie erg nuttig zal zijn. En in sommige gevallen is dat nodig. Als uw geval daar niet op van toepassing is, kunt u beter genoegen nemen met gewone webpagina's en meer aandacht besteden aan de inhoud ervan.

Animatie maken in Dreamweaver

Het is tijd voor ons favoriete programma: Dreamweaver. Nu zullen we u vertellen hoe het zal helpen bij het maken van een geanimeerd element. En als het element dat we gaan “animeren”, nemen we de titel van de default2.htm-pagina die in hoofdstuk 11 is gemaakt.

Maar laten we het eerst eens zijn over de terminologie die in Dreamweaver wordt gebruikt. Het weten ervan zal ons helpen verdere werkzaamheden. Dus:

• een reeks geanimeerde elementen waarvan de beweging is gesynchroniseerd ten opzichte van dezelfde tijdlijn, wordt animatie genoemd. We hebben dit nodig omdat één webpagina verschillende onafhankelijke animaties kan bevatten, dat wil zeggen sets van geanimeerde elementen die zijn gesynchroniseerd ten opzichte van onafhankelijke tijdlijnen;
• Laat de strip die loopt van het startpunt van de animatie van een van de elementen naar het eindpunt een animatietrack worden genoemd. We hebben deze term al geïntroduceerd en nu zullen we deze consolideren. De track laat zien wanneer het geanimeerde element begint te bewegen en wanneer het stopt;
• de vrije ruimte op de animatietijdlijn die door een track kan worden ingenomen, wordt een kanaal genoemd. Het aantal beschikbare kanalen is bepalend maximaal aantal tracks in één animatie, wat betekent dat het maximale aantal geanimeerde elementen erin is opgenomen.

Dat zijn alle voorwaarden. Laten we nu de pagina default2.htm openen in een documentvenster en laten we beginnen...

Een eenvoudige animatie maken

Om te kunnen werken hebben we onmiddellijk het Tijdlijnenpaneel nodig, waarin alle animaties worden weergegeven die op de webpagina zijn gemaakt. Om dit paneel weer te geven, schakelt u het schakelitem Tijdlijnen in het submenu Overige van het menu Venster in of drukt u op de toetsencombinatie +. Het Tijdlijnenpaneel zelf wordt getoond in Fig. 12.1.

Zoals u kunt zien, bevindt het deelvenster Tijdlijnen zich in een ander dock dat zich onderaan het hoofdvenster van Dreamweaver bevindt. Dit betekent dat we het Tijdlijnenpaneel (en alle andere panelen die u in het Dock plaatst) kunnen verbergen als we het niet nodig hebben door op de knop Dock verbergen te klikken en het vervolgens terug naar het scherm te brengen.

Het grootste deel van dit paneel wordt in beslag genomen door een tijdlijn, maar deze is niet in seconden gegradueerd, maar in animatieframes - het is handiger. Tijdwaarden (in frames) worden op de grijze tijdlijn hierboven geschreven. Onder deze schaal allemaal beschikbare kanalen animaties, zowel bezet als onbezet. Bovenaan het paneel bevinden zich verschillende bedieningselementen die zijn ontworpen om enkele parameters van de tracks en de animatie zelf in te stellen.

Rijst. 12.1. Tijdlijnenpaneel

“Maar met Dreamweaver kun je met meerdere tijdlijnen tegelijk werken”, zegt je. “Waar zijn de andere tijdlijnen?” Om ze te zien, moet je het overeenkomstige item selecteren in de gecombineerde lijst met animaties getoond in Fig. 12.2.

Rijst. 12.2. Gecombineerde lijst met animaties

We zullen later met verschillende animaties werken. Laten we er nu een maken, de eenvoudigste.

Om een ​​van de beschikbare, vrij positioneerbare elementen te animeren, moet u deze op de tijdlijn plaatsen, waardoor een animatietrack ontstaat. Om dit te doen, selecteert u het gewenste vrije element en klikt u erop klik met de rechtermuisknop muis en selecteer in contextmenu Toevoegen aan tijdlijnitem. U kunt ook het item Object toevoegen selecteren in het tijdlijncontextmenu of het item Object toevoegen aan tijdlijn in het submenu Tijdlijn van het menu Wijzigen. En ten slotte kunt u eenvoudig op de toetsencombinatie +++ drukken.

Nadat u een gratis element aan een animatie hebt toegevoegd, geeft Dreamweaver de waarschuwing weer die wordt weergegeven in Figuur 1. 12.3. Hiermee bedoelt hij dat hij de volgende parameters van een vrij element tijdens het animatieproces kan controleren:

• horizontale en verticale coördinaten van de linkerbovenhoek (LEFT- en TOP-attributen);
• breedte en hoogte (kenmerken WIDTH en HEIGHT), en dit werkt alleen in Internet Explorer;
• de volgorde van overlap, met andere woorden, de z-index (Z-INDEX attribuut);
• zichtbaarheid (ZICHTBAARHEID attribuut).

Rijst. 12.3. Waarschuwingsbericht van Dreamweaver na het toevoegen van een gratis element aan een animatie

Dit betekent dat u de locatie, grootte en zichtbaarheid van het vrije element kunt bepalen. Zoals je kunt zien zijn de mogelijkheden die Dreamweaver biedt voor animatie nog groter dan we dachten.

Sluit nu deze waarschuwing door op OK te klikken. Als u het niet meer wilt zien, schakelt u voordat u sluit het selectievakje Laat het mij niet zien in dit bericht opnieuw.

Eindelijk, na alle problemen, zullen we een nieuw nummer zien in de lijst van het Tijdlijnenpaneel (Fig. 12.4). Het verschijnt als een lichtblauwe balk met de naam van het vrije element waartoe het behoort geschreven. Aan beide zijden van deze streep zie je lichte cirkels. Dit zijn de belangrijkste punten; Er zijn er tot nu toe slechts twee: het begin en het einde van het traject. Het eerste sleutelpunt – het begin – bevindt zich in het eerste frame; dit betekent dat de animatie voor dit element begint vanaf het eerste frame. Het tweede sleutelpunt - het einde van het traject - bevindt zich op het vijftiende frame; daar zal ons geanimeerde element stoppen met bewegen.

Rijst. 12.4. Nieuwe animatietrack

U kunt beide kernpunten (in in dit geval ze zijn donkerblauw gemarkeerd) en de track zelf (in dit geval wordt alles donkerblauw), eenvoudigweg door erop te klikken met de muis. Bovendien kunt u overal op het animatiespoor klikken en zo een van de frames selecteren. In dit geval verschijnt er een markering van het geselecteerde frame op de tijdlijn, weergegeven in Fig. 12.5.

Rijst. 12.5. Markering van het geselecteerde frame

Als u niet tevreden bent met de locatie van de animatietrack, kunt u deze eenvoudig wijzigen. Om dit te doen, “pakt” u de track (niet de belangrijkste punten!) met de muis en sleept u deze langs de schaal totdat deze de gewenste positie inneemt. U kunt de animatie bijvoorbeeld laten beginnen op frame tien en eindigen op frame vijfentwintig. Je kunt ook de lengte van de track, en dus de duur van de animatie, wijzigen door de nu belangrijkste punten naar de gewenste positie te slepen. En natuurlijk kunt u een overbodige track verwijderen door deze te selecteren en op de toets te drukken, of door het item Object verwijderen te selecteren in het contextmenu of het submenu Tijdlijn van het menu Wijzigen.

Laten we eens kijken naar de nieuw gemaakte animatie. We drukken op de toets om de defaiilt2.htm-pagina in de webbrowser te laden, en... we zien een volledig stilstaand beeld. Wat is er aan de hand?

Maar het feit is dat het begin en het einde van het bewegingstraject van onze geanimeerde titel samenvallen, d.w.z. er is geen traject, de titel staat altijd op hetzelfde punt! We zijn vergeten het traject uit te stippelen!!!

Dat is goed. Het is niet eng. We zullen alles nu in orde maken.

Een pad in Dreamweaver wordt als volgt gedefinieerd. Elk belangrijk punt is als een ‘momentopname’ van de staat waarin het geanimeerde element zich zal bevinden. Door een sleutelpunt te selecteren, specificeert u vereiste parameters vrij positioneerbaar element (coördinaten, afmetingen en zichtbaarheid), en Dreamweaver onthoudt ze en creëert zo deze “momentopname”. Op basis van deze snapshots berekent hij zelf alle tussentoestanden van het geanimeerde element waarin het zich tussen belangrijke punten zal bevinden. Om een ​​animatie van welke complexiteit dan ook te maken, hoeft u de noodzakelijke parameters voor de noodzakelijke pagina-elementen alleen op belangrijke punten in de animatie in te stellen. Dreamweaver doet de rest.

Laten we zeggen dat onze kop uit de rechterbenedenhoek van de pagina "zweeft" en rechtstreeks naar zijn plaats beweegt. rechtmatige plaats. Omdat het traject van zijn beweging heel eenvoudig is (rechte lijn), hebben we slechts twee sleutelpunten nodig om het te definiëren. Bij het eerste belangrijke punt bevindt de titel zich in de rechterbenedenhoek van de pagina, en bij het tweede bevindt deze zich in het bovenste gedeelte van de pagina, waar deze zou moeten staan. Op deze punten moeten we de parameters van onze header instellen, meer precies, slechts twee parameters: horizontale en verticale coördinaten. (Onze header verandert niet van grootte of zichtbaarheid tijdens het verplaatsen.)

Selecteer het eerste sleutelpunt, gelegen aan het begin van de track, door erop te klikken met de muis. Vervolgens “pakken” we de header (het vrije Header-element) met de muis en verplaatsen deze naar de rechter benedenhoek van de pagina, naar het begin van zijn traject. Laten we nu het tweede sleutelpunt selecteren. We hoeven hier niets te veranderen, aangezien de titel al aanwezig is. Dat is eigenlijk alles.

In afb. Figuur 12.6 laat zien wat we krijgen na al deze manipulaties. U kunt duidelijk de dunne grijze padlijn zien die in het documentvenster wordt weergegeven als het geanimeerde Header-element in het documentvenster is geselecteerd. Bovendien bevindt het geanimeerde element zich op de plaats van het traject dat we op het animatiespoor selecteren. Dus als u het tweede belangrijke punt markeert, springt het naar de juiste plaats bovenaan de pagina. En als u een tussenpunt tussen het eerste en het tweede sleutelpunt selecteert, zal dit de plaats innemen die overeenkomt met dit punt.

Rijst. 12.6. Het voltooide pad van het geanimeerde element (het eerste sleutelpunt is gemarkeerd)

Nu kun je onze creatie bekijken. Laad de resulterende pagina in een webbrowser en kijk wat er gebeurt. Maar het zal blijken... alles is hetzelfde - opnieuw een roerloze titel. Wat zijn we deze keer vergeten?

Om de animatie onmiddellijk te laten starten nadat de webbrowser de pagina heeft geladen, moet Dreamweaver een klein script maken dat de animatie daadwerkelijk start. Maar standaard doet hij dit niet. Er wordt van uitgegaan dat u wilt dat de animatie wordt afgespeeld als reactie op een gebruikersactie, zoals het klikken op een afbeelding. Maar we hebben de header nodig om zijn reis te beginnen zodra de pagina is geladen. Om dit te doen, zullen we de juiste instellingen moeten maken.

Het is heel gemakkelijk om ze te maken. Laten we teruggaan naar het Tijdlijnenpaneel en het selectievakje Autoplay bovenaan dit paneel inschakelen. Dreamweaver zal, zoals gewoonlijk, nog een waarschuwing geven dat het overeenkomstige script nu aan de paginacode zal worden toegevoegd. Verwijder deze waarschuwing door op OK te klikken; Als u het niet meer wilt zien, kunt u het selectievakje Laat dit bericht niet meer zien inschakelen voordat u dit doet. Nu is alles echt klaar. Laad de pagina in uw webbrowser en ontdek het zelf.

Hoera! Het werkt!

De geanimeerde titel zal vrolijk langs het traject lopen dat we hebben uitgezet en precies boven de schaduw bevriezen. Het is natuurlijk erg dat de schaduw onafhankelijk van hem bestaat, maar dat zullen we snel oplossen. Het is ook geen goede zaak dat de header onder de rest van de vrije positioneringselementen zweeft, maar je kunt dat nu meteen oplossen door simpelweg de z-index te wijzigen. Laten we de resulterende pagina opslaan. En laten we doorgaan...

Complexere animatie

Toch is het niet goed dat de header en zijn schaduw (het gratis Headershadow-element) afzonderlijk bestaan. Laten we ervoor zorgen dat de schaduw, terwijl de titel ernaartoe beweegt, onzichtbaar is op het scherm en pas op het allerlaatste moment verschijnt. Om dit te doen, moeten we het vrije element dat deze schaduw creëert aan de animatie toevoegen, waardoor een nieuw animatiespoor ontstaat.

Selecteer een vrij Headershadow-element en voeg dit toe aan de animatie. Je weet al hoe je dit moet doen. Het resulterende resultaat is te zien in Fig. 12.7.

Zorg ervoor dat beide sporen precies onder elkaar liggen. Als het tweede spoor afwijkend is van het eerste, wijzig dan de locatie en/of grootte ervan.

Rijst. 12.7. Twee animatietracks

Voor de schaduw creëren we geen bewegingspad, omdat deze niet beweegt, maar stilstaat. Het zou gewoon moeten verschijnen als de kop 'ter zake komt'. Verplaats het dus nergens heen. Wijzig gewoon de zichtbaarheidsparameter.

Dus aan het begin van het titelpad (het eerste sleutelpunt) moet de schaduw onzichtbaar zijn. Selecteer dus het eerste sleutelpunt van het tweede spoor en stel de parameter Vis in de Property Editor in op verborgen. Nu blijft de schaduw onzichtbaar totdat we de zichtbaarheidswaarde op het tweede sleutelpunt (het einde van het titelpad) wijzigen. Omdat de Vis-parameter standaard is ingesteld op erven ("overerving" van de zichtbaarheid van de ouder) en de ouder (de webpagina zelf) zichtbaar is, hoeven we deze waarde niet specifiek in te stellen in het tweede sleutelpunt. Controleer voor het geval dat de schaduw zichtbaar is aan het einde van de tijdlijn (de parameter Vis moet overnemen of zichtbaar zijn).

Sla uw werk op en open het in een webbrowser. Nu zal de schaduw zich bescheiden “verbergen” totdat zijn “eigenaar” “arriveert”.

Alle! We zijn de rechtlijnige, zoals tramrails, bewegingstrajecten van onze elementen beu. We willen iets kronkeligs en zigzaggends, zoals het beruchte pad naar de waarheid. Laat onze header de hele webpagina doorkruisen op weg naar de top. Het ziet er indrukwekkender uit en tegelijkertijd gaan we kijken of deze Dreamweaver ook zo goed is als er wordt geprezen.

Nou, Dreamweaver doorstaat de test van kronkeligheid. En laten we daar zeker van zijn. Maar laten we eerst het traject iets verlengen, bijvoorbeeld tot 50 frames. Laten we het tweede sleutelpunt van het titelnummer met de muis "pakken" en dit naar het overeenkomstige deel van de tijdlijn verplaatsen. En vergeet niet hetzelfde te doen met het schaduwelementpad!

Nu kun je ronddwalen.

Zoals u zich herinnert, bepalen sleutelpunten in feite het traject van het geanimeerde element. We voegen er ook aan toe dat het traject van zijn beweging moet worden gespecificeerd door een minimum aantal sleutelpunten. Voor een rechte lijn zijn, zoals we al hebben gezien, twee punten voldoende, voor een onderbroken lijn drie, en voor een cirkel heb je er minstens een dozijn nodig, zodat de beweging van het geanimeerde element er min of meer soepel uitziet. Over het algemeen zou Dreamweaver, nadat hij een aantal belangrijke punten van u heeft ontvangen, het traject moeten opbouwen van het geanimeerde element dat u nodig heeft. En het aantal van dergelijke punten, zoals aangegeven, zou minimaal moeten zijn.

Op basis van deze regel zullen we een nieuw traject voor onze geanimeerde titel opbouwen. Als je wilt dat het langs een gebogen pad beweegt, plaats dan een vrij groot aantal sleutelpunten op het animatiespoor. De eenvoudigste manier is om eerst het gewenste traject op papier te tekenen, de belangrijkste punten te plaatsen en dit pas daarna in Dreamweaver te implementeren.

Maar laten we aannemen dat we dit allemaal al hebben gedaan. Nu moeten we het traject, zoals ze zeggen, in code implementeren, waarbij we verschillende sleutelpunten op het animatiespoor plaatsen. Hoe je dat doet?

Stel allereerst de markering van het geselecteerde frame (zie figuur 12.5) in op de afdeling van de tijdlijn waar het eerste van de nieuw gemaakte sleutelpunten zich zal bevinden. Klik hiervoor op het spoor tegenover de gewenste divisie. Klik vervolgens met de rechtermuisknop op deze plaats en selecteer Keyframe toevoegen in het contextmenu dat verschijnt. U kunt ook het item met dezelfde naam selecteren in het Tijdlijn-submenu van het Wijzigen-menu of eenvoudigweg op de toets drukken. Op deze locatie verschijnt een nieuw sleutelpunt op de baan (Fig. 12.8).

Rijst. 12.8. Hoofdpunt geplaatst op het animatiespoor (momenteel gemarkeerd)

Laten we nu controleren of ons nieuwe sleutelpunt is geselecteerd, en zo niet, selecteer het dan. Activeer hierna het documentvenster en verplaats de titel naar de plaats op het traject waar deze zich zou moeten bevinden momenteel. De dunne grijze lijn die het pad van de koers aangeeft, buigt onmiddellijk af en volgt de koers (Figuur 12.9).

De resterende sleutelpunten van het traject worden op precies dezelfde manier op het animatiespoor geplaatst. Plaats ze en geef ze een nieuwe geanimeerde titelpositie. Bedenk een complexer traject om Dreamweaver echt te laten werken. Als u een sleutelpunt op een andere plaats plaatst dan u wilde, selecteert u het en selecteert u Sleutelframe verwijderen in het contextmenu. (U kunt hetzelfde item ook selecteren in het submenu Tijdlijn van het menu Wijzigen.) Test daarna de pagina met de nieuwe animatie in een webbrowser. Je zult zien dat de titel precies het pad volgt dat je ervoor hebt ingesteld.

Rijst. 12.9. Positie van de geanimeerde titel op het nieuwe sleutelpunt

Er is hier één interessant punt. Het zal je misschien verbazen dat we om de een of andere reden nieuwe sleutelpunten op het animatiespoor hebben gemaakt in plaats van een markering op het gewenste frame te plaatsen en eenvoudigweg de geanimeerde titel naar de gewenste plaats te verplaatsen. In dit geval zouden we echter het hele pad van onze titel, samen met het begin, het einde en alle belangrijke punten daartussenin, naar een andere locatie hebben verplaatst. Probeer dit te doen - en je zult alles zelf begrijpen.

Handmatig een pad maken door sleutelpunten op het animatiespoor te plaatsen en op deze sleutelpunten nieuwe parameters voor het geanimeerde element in te stellen, is alleen geschikt voor relatief eenvoudige gevallen. Creëer op deze manier in feite iets complexers dan een eenvoudige boog! Bovendien zal zelfs een ervaren webdesigner niet de eerste keer precies het traject creëren dat hij nodig heeft. Juist voor dergelijke gevallen biedt Dreamweaver een geweldige mogelijkheid om eenvoudigweg het gewenste pad in het documentvenster te tekenen. Tegelijkertijd zal hij zelf een animatietrack vormen en daarop het vereiste aantal sleutelpunten plaatsen.

Laten we deze kans proberen. Laten we eerst een paar voorbereidende stappen doen. Selecteer eerst het laatste sleutelpunt (einde) van het traject en onthoud of noteer de uiteindelijke coördinaten van de koers. Dit is nodig zodat we later, wanneer we creëren nieuwe animatie, positioneer deze nauwkeurig. Hierna zullen we het titelanimatiespoor verwijderen, maar het animatiespoor van zijn schaduw laten. Selecteer hiervoor het gewenste spoor en selecteer Object verwijderen in het contextmenu. Nu hoeft u alleen nog maar de titel aan het begin van het beoogde traject te plaatsen - en u kunt aan de slag.

Selecteer de titel en klik er met de rechtermuisknop op. Selecteer Recordpad in het contextmenu dat verschijnt. U kunt ook Recordpad van laag selecteren in het contextmenu van het deelvenster Tijdlijnen; Dit item wordt beschikbaar als er een vrij element in het documentvenster wordt geselecteerd. Bovendien is het item Recordpad van laag ook beschikbaar in het submenu Tijdlijn van het menu Wijzigen. Zoals u kunt zien, biedt Dreamweaver u verschillende opties om uw keuzes te maken.

Wat gebeurt er hierna? Niets. Naast het feit dat wanneer u een titel verplaatst, er een dunne grijze lijn volgt, zal Dreamweaver zijn traject beginnen te volgen en vast te leggen. En zodra u de muisknop loslaat en de titel aan het einde van zijn pad plaatst, wordt er een nieuw animatiespoor gemaakt. Hierna hoeft u alleen nog maar de coördinaten van de titel op het eindpunt in te stellen, met behulp van de eerder opgenomen (opgeslagen) waarden, en de track te “uitrekken” of “versmallen”.

Rijst. 12.10. Complex traject

animatie van de schaduw zodat deze gelijk is aan het spoor van zijn "meester", anders zal de schaduw eerder of later verschijnen dan de titel zijn kronkelende pad heeft voltooid.

U kunt het verkregen resultaat zien in Fig. 12.10. Sla de default2.htm-pagina op, open deze in een webbrowser en bekijk het resultaat van uw inspanningen.

Oké, het is nu allemaal voorbij. We hebben de belangrijkste functies bekeken die Dreamweaver biedt voor het maken van animaties. Complexere animaties, waarbij veel elementen samen langs verschillende paden bewegen, worden op een vergelijkbare manier gemaakt. Alleen dan heb je wat meer werk te doen bij het instellen van trajecten, het instellen van parameters op belangrijke punten in de animatie en het coördineren van de beweging van geanimeerde elementen.

Nu gaan we enkele van de andere functies bekijken die Dreamweaver biedt voor webanimators. Ze zullen u helpen uw werk sneller en gemakkelijker uit te voeren.

Animatiecontrole

U weet al dat u met Dreamweaver meerdere animaties kunt maken die tegelijkertijd worden uitgevoerd en onafhankelijk van elkaar zijn. Ze kunnen zowel synchroon als asynchroon werken, waardoor echte rondedansen van geanimeerde elementen op een webpagina ontstaan. Als er weinig geanimeerde elementen op de pagina staan, kunt u natuurlijk volstaan ​​met slechts één animatie. Maar als hun aantal groter is dan een dozijn, is het veel handiger om met verschillende onafhankelijke animaties te werken, die elk betrekking hebben kleine groep elementen in plaats van ze in één animatie te proppen. Dit is echter een kwestie van smaak...

Laten we nu eens kijken naar de bedieningselementen voor deze onafhankelijke animaties.

U weet al dat het deelvenster Tijdlijnen slechts één animatie tegelijk weergeeft. Om naar een ander te schakelen, selecteert u het overeenkomstige item uit de reeds bekende gecombineerde lijst met animaties, weergegeven in Fig. 12.2.

Als u een nieuwe animatie wilt maken, selecteert u Tijdlijn toevoegen in het contextmenu van het deelvenster Tijdlijnen. U kunt hetzelfde item ook selecteren in het Tijdlijn-submenu van het Wijzig-menu. Als je nu de combobox Animaties opent, zul je zien dat er een nieuw item in zit.

Standaard wijst Dreamweaver opnieuw toe animaties gemaakt namen van het type Тimeline. Als u een animatie een betekenisvollere naam wilt geven, voert u deze rechtstreeks in de animatiekeuzelijst in. Een andere manier is om het item Tijdlijn hernoemen te selecteren, dat zich in het contextmenu van het paneel Tijdlijnen en in het submenu Tijdlijn van het menu Wijzigen bevindt. Hierna verschijnt het dialoogvenster Tijdlijn hernoemen op het scherm (Fig. 12.11). Voer de nieuwe animatienaam in het enkele invoerveld van dit dialoogvenster in en klik op OK.

Rijst. 12.11. Dialoogvenster Tijdlijn hernoemen

Om een ​​onnodige animatie te verwijderen, schakelt u ernaar toe via de lijst met animaties en selecteert u Tijdlijn verwijderen in het contextmenu van het deelvenster Tijdlijnen en in het submenu Tijdlijn van het menu Wijzigen. Houd er echter rekening mee dat de allereerste animatie die Dreamweaver maakt wanneer u het deelvenster Tijdlijnen voor het eerst opent, niet kan worden verwijderd. Dreamweaver zal deze eenvoudigweg wissen in plaats van verwijderen.

Bovenaan het deelvenster Tijdlijnen bevinden zich verschillende bedieningselementen waarmee we nog niet bekend zijn. Laten we er een paar bekijken.

Het Fps-invoerveld wordt gebruikt om de framesnelheid van de animatie in te stellen, die de afspeelsnelheid bepaalt. Deze waarde wordt gemeten in frames per seconde (in het Engels: frames per seconde of fps). De standaardwaarde is 15.

Het selectievakje Autoplay is u al bekend. Het signaleert Dreamweaver om een ​​script aan de paginacode toe te voegen dat de animatie start zodra de pagina in het webbrowservenster wordt geladen. Dit selectievakje is standaard uitgeschakeld en nieuwe Dreamweaver-gebruikers vergeten het vaak in te schakelen. Dus als uw animatie om de een of andere reden niet werkt, controleer dan eerst of u dit selectievakje heeft ingeschakeld.

Met het selectievakje Loop wordt de animatie herhaald. Indien ingeschakeld, wordt de animatie een oneindig aantal keren afgespeeld. Als u het inschakelt, geeft Dreamweaver nog een van zijn talloze berichten weer; voor nu gewoon dichtdoen. Standaard is dit selectievakje uitgeschakeld.

En ten slotte dient een groep van drie knoppen en een invoerveld, rechts van de animatiecombinatiebox, om tussen afzonderlijke frames te schakelen. Laten we het eens nader bekijken (Fig. 12.12).

Rijst. 12.12. Een reeks besturingselementen die worden gebruikt om tussen animatieframes te bewegen

Knoppen die richtingen aangeven verschillende kanten Met pijlen kunt u door afzonderlijke frames van de animatie navigeren. Laten we aannemen dat u het eerste sleutelpunt van de animatie (het begin van het traject) hebt geselecteerd, gelegen op het eerste frame. Als u op de pijl naar rechts klikt, gaat u naar het tweede frame. In dit geval wordt op het tweede animatieframe in het deelvenster Tijdlijnen de markering van het geselecteerde frame geplaatst en wordt de geanimeerde titel in het documentvenster één sprong verplaatst. Als u verder klikt op de pijl naar rechts, gaat u verder naar het einde van het pad. Als u op de pijl naar links klikt, gaat u naar het vorige frame.

U kunt de rechterpijlknop gebruiken om een ​​voorbeeld van de gemaakte animatie rechtstreeks in het documentvenster te bekijken, zonder de pagina in een webbrowser te openen. Om dit te doen, plaatst u de muiscursor erop, drukt u op de linkerknop en laat u deze niet los. In dit geval gaat u van frame naar frame vooruit langs het traject; In het deelvenster Tijdlijnen beweegt een markering langs de track, en in het documentvenster beweegt een geanimeerd element. Laat de knop los wanneer de animatie naar het einde is "gescrolld". Helaas meer handige manier voorbeeld Dreamweaver-animaties biedt niet.

De knop met een pijl naar links die naar een obstakel wijst, wordt gebruikt om snel naar het allereerste frame te gaan.

Als u rechtstreeks naar een bepaald animatieframe wilt springen, bekend onder het nummer, kunt u eenvoudig dat nummer invoeren in het invoerveld tussen de pijlknoppen en op de toets drukken. Het gewenste frame wordt onmiddellijk gevonden en gemarkeerd.

We hebben de animaties uitgezocht. Laten we nu eens kijken naar wat Dreamweaver biedt voor het beheren van afzonderlijke tracks en frames.

U kunt tracks knippen en kopiëren naar de buffer Windows-uitwisseling, en voeg ze in andere kanalen van de huidige animatie in, of zelfs in een andere animatie op een webpagina. Om de geselecteerde track te knippen, selecteert u het item Knippen in het contextmenu of het menu Bewerken, of drukt u op de toetsencombinatie +. Om het geselecteerde nummer te kopiëren, selecteert u Sora in dezelfde menu's of drukt u op de toetsencombinatie +. Om een ​​track op het klembord in een van de reeds bezette kanalen te plakken en deze aan een bestaande track toe te voegen, selecteert u Plakken of drukt u op de toetsencombinatie +. Plak het nummer helaas in gratis kanaal Je kan niet.

Aandacht!

Dreamweaver plaatst niet alleen het animatiespoor op het klembord, maar ook het vrij positioneerbare element waarvoor het is gemaakt, samen met alle parameters en inhoud ervan. En als u dat nummer invoegt op een andere pagina die al een vrij positioneerbaar element met dezelfde naam bevat, wijst Dreamweaver dat nummer daaraan toe. Als een dergelijk element niet op de pagina staat, wordt het gemaakt in de afbeelding en gelijkenis van de gekopieerde.

Nadat u de nieuwe track van het klembord heeft geplakt, wilt u deze misschien aan een ander gratis item toewijzen. Dreamweaver biedt u die optie ook. Selecteer Object wijzigen in het contextmenu of in het submenu Tijdlijn van het menu Wijzigen. Hierna verschijnt het dialoogvenster Object wijzigen, weergegeven in figuur 1, op het scherm. 12.13. Selecteer het gewenste item in de vervolgkeuzelijst Object om te animeren en klik op OK.

Rijst. 12.13. Dialoogvenster Object wijzigen

Soms is het nodig om een ​​deel van de baan over meerdere frames uit te strekken of juist te verkleinen. Om dit te doen, gebruikt u de items Frame toevoegen en Frame verwijderen in het contextmenu en het submenu Tijdlijn van het menu Wijzigen. Het eerste item voegt een frame in op de plaats op het spoor waar de geselecteerde framemarkering zich bevindt, en het tweede item verwijdert het frame daar vandaan.

Dat draait allemaal om het animeren van vrij positioneerbare elementen.

Animatie van grafische afbeeldingen

Hierboven keken we naar de animatie van vrij gepositioneerde elementen. In theorie zijn dit de enige die kunnen worden geanimeerd, omdat alleen zij overal kunnen worden geplaatst en elke grootte kunnen hebben. Dit betekent dat alleen zij over de pagina kunnen worden verplaatst, hun afmetingen kunnen worden gewijzigd en onzichtbaar kunnen worden gemaakt. Met gewone, vaste elementen is dit niet mogelijk.

Het is waar dat er één uitzondering op deze regel bestaat. U kunt afbeeldingen animeren en Dreamweaver biedt deze mogelijkheid. Maar alleen de naam van het weergegeven bestand kan tijdens de animatie veranderen (het SRC-attribuut van de tag ).

Maar zelfs dit is vaak genoeg. Door de naam van een grafisch bestand te wijzigen, kunt u animaties maken met snel veranderende frames. (Op deze manier kunt u in feite een echte film op een webpagina afspelen zonder dat u een videobestand hoeft te maken, zelfs in het “geanimeerde GIF”-formaat.) U hoeft alleen maar het vereiste aantal grafische bestanden in te slaan die verschillende fasen van animatie, maar dit is al een probleem voor de webkunstenaar.

Hoe animeer je een grafische afbeelding? Erg makkelijk. Laten we een nieuwe pagina maken en deze 12.1.htm noemen. Het zal geen relatie hebben met de site van Voorbeeldsite 1, maar zal er grafische bestanden van lenen.

Plaats een afbeelding op deze pagina. Stel het weergegeven bestand in op Email.gif, gelegen in de map Pics, een submap van de map Samplel (die de sitebestanden van Sample site 1 bevat). Dit is heel eenvoudig, dus het heeft geen zin om in lange uitleg te gaan.

Laten we nu een nieuw animatiespoor maken voor de nieuw gemaakte afbeelding. Selecteer het en selecteer het item Object toevoegen in het contextmenu van het deelvenster Tijdlijnen (een dergelijk item bestaat niet in het contextmenu van de grafische afbeelding). Dreamweaver geeft dan nog een bericht weer waarin u wordt gewaarschuwd dat het alleen de instelling voor de weergave van de bestandsnaam kan beheren (Afbeelding 12.14). Sluit het door op OK te klikken.

Rijst. 12.14. Waarschuwingsbericht van Dreamweaver na het toevoegen van afbeeldingen aan een animatie

Uiterlijk verschilt het animatiespoor dat voor een grafische afbeelding wordt gemaakt niet van dat voor een vrij gepositioneerd element. Daarom adviseert de auteur een instelling voor elk geanimeerd pagina-element unieke naam. In het invoerveld kunt u de naam van de grafische afbeelding opgeven Editor's afbeelding eigenschappen.

Laten we de duur van de animatie instellen op vijf seconden of 75 frames (5 seconden maal 15 frames per seconde). Om dit te doen, sleept u de rechterrand (het tweede sleutelpunt) van de track naar links naar de markering “75” op de tijdschaal. En laten we een nieuw grafisch bestand instellen dat wordt weergegeven wanneer het tweede sleutelpunt wordt bereikt. Laten we hiervoor controleren of het tweede punt is geselecteerd en de inhoud van het Src-invoerveld van de eigenschappeneditor wijzigen, zodat deze verwijst naar het bestand Email2.gif, dat zich ook in de map Pics bevindt, genest in de map Samplel. Dit bestand wordt weergegeven als het einde is bereikt... nee, niet het traject, maar het spoor (het beeld beweegt immers niet).

Het enige dat overblijft is het selectievakje Autoplay inschakelen en de 12.1.htm-pagina in een webbrowser laden. Vijf seconden nadat de pagina is geladen, verandert de afbeelding die erop wordt weergegeven - onze animatie werkt.

Als u meerdere afbeeldingen (animatiefasen) achter elkaar moet wijzigen, creëer dan een passend aantal sleutelpunten op de baan. Stel op elk van deze belangrijke punten het Src-invoerveld in op de gewenste waarde.

Nadelen van webgebaseerde animatie en hoe u deze kunt overwinnen

Laten we het tenslotte hebben over de nadelen van de methode die we hebben getest voor het maken van animaties op webpagina's. En we zullen ontdekken wanneer het de moeite waard is om het te gebruiken, wanneer je jezelf kunt beperken tot gewone videobestanden en wanneer je helemaal zonder animatie kunt.

Het grootste nadeel van animaties gebaseerd op webscripts is... nee, helemaal niet incompatibel met oudere webbrowserprogramma's. (Hoewel er ook rekening moet worden gehouden met incompatibiliteit.) Dit is de “zwaarte” van de software die nodig is om ze te verwerken, de intensiteit van de bronnen en niet erg hoge prestaties. Dit kan van cruciaal belang zijn als veel van uw websitebezoekers oude, energiezuinige computers hebben waarop deze zeer langzaam werkt, waardoor de animatie schokkerig wordt afgespeeld. Als het überhaupt...

Zoals u zich herinnert, worden webscripts niet door de webbrowser zelf uitgevoerd, maar door een speciaal tolkprogramma, dat in relatie staat tot de webbrowser. extern programma. De tolk die de scriptcode ontcijfert en uitvoert, vergt behoorlijk veel resources. U moet niet alleen de scriptcode, bron- en ontsleuteld, en uw gegevens ergens opslaan, maar u moet ook de gegevens uit het script zelf verwerken en opslaan. En hoe groter en complexer de scripts, hoe meer de tolk systeembronnen nodig heeft.

Als oplossing voor dit probleem kunnen we alleen maar afraden om onnodig complexe animaties te maken. Als je echter echt niet zonder kunt, moet je nadenken over creëren speciale versie site zonder animatie of scripts te gebruiken. Dan kunnen eigenaren van oude programma's en (of) energiezuinige computers deze bezoeken, en gelukkige eigenaren van moderne technologie zullen genieten van de "volwaardige" versie van de site. Deze aanpak wordt heel vaak gebruikt; Bijna alle grote en populaire internetprojecten hebben speciaal voor dit geval een “scriptloze” versie.

Er is een andere manier. Als uw animatie een reeks opeenvolgende afbeeldingen is of een element dat over een klein gedeelte van de pagina beweegt, probeer deze dan als video te implementeren. Bijna alle webbrowserprogramma's, met uitzondering van zeer oude programma's, ondersteunen het formaat "geanimeerde GIF-bestanden". Dit formaat wordt al zo lang in webafbeeldingen gebruikt dat het zelfs sommige standaarden heeft verpulverd, bijvoorbeeld de standaard voor reclamebanners. Bestaat grote hoeveelheid programma's voor het maken van animaties in GIF-formaat. En om zo’n animatie op een webpagina te plaatsen heb je alleen een bekende tag nodig - en geen scripts!

Op dezelfde manier kunt u het probleem van incompatibiliteit met oudere programma's omzeilen.

Maar er is nog een probleem, waarvan de oplossing erg moeilijk is. Dit is een auteursrechtprobleem programmacode. Meer precies, het probleem van de bescherming van dezelfde auteursrechten.

laat ons nadenken reguliere programma’s dat jij gebruikt. Dit zou de meest populaire teksteditor kunnen zijn Microsoft Word, de Nullsoft WinAmp-mediaspeler, de Quake 3-game of het Windows-besturingssysteem zelf. Al deze programma's zijn gemaakt met behulp van gecompileerde programmeertalen, dat wil zeggen dat een programma geschreven in een bepaalde programmeertaal (C++, Pascal of Assembler) werd gecompileerd tot een reeks instructies op de centrale processor en opgeslagen in een bestand met de extensie exe. Als de gebruiker dit bestand vervolgens uitvoert, wordt het rechtstreeks door de centrale processor uitgevoerd, zonder tussenkomst van tolkprogramma's.

Stel dat u een programma in een gecompileerde taal hebt geschreven en dit wilt verkopen. En verkoop voor veel geld, omdat het programma gebruikmaakt van een aantal van uw eigen knowhow. Als een kwaadwillende hacker nu wil zien hoe jouw programma werkt, zal hij falen. Feit is dat het lezen van processormachinecode niet voor bangeriken is. Het is niet altijd mogelijk om simpelweg te begrijpen wat hij doet. En het is absoluut onmogelijk om de broncode van het programma daaruit te reconstrueren. (Hoewel je het kunt proberen als je het echt wilt. Een positief resultaat van deze pogingen is echter opnieuw niet gegarandeerd.)

Webscriptprogramma's worden geschreven in geïnterpreteerde programmeertalen. Dit betekent dat dergelijke programma's op de webpagina rechtstreeks in het formulier staan broncode. Elke JavaScript-programmeur kan gemakkelijk toegang krijgen tot deze code en uitzoeken hoe het programma werkt. Dit betekent dat er geen geheimen verborgen kunnen worden in de JavaScript-code.

Er is maar één uitweg uit deze situatie: implementeer geen complexe eigen algoritmen als een script. Het internet is per definitie een open omgeving, en het verspreiden van gesloten, geheime informatie via internet is zeer problematisch. Aan de andere kant zijn het daarom geheimen, om ze te beschermen tegen nieuwsgierige blikken Wereld wijde web meer dan genoeg.

Er is eigenlijk nog een nadeel, maar dat is niet inherent aan de animatie zelf op basis van webscripts, maar aan de aanpak die Dreamweaver biedt. Het is een feit dat de set webscripts die nodig is om animaties te maken, in de sectie van de HTML-paginakop (tag) wordt geplaatst. Hieruit volgt dat als u sjablonen gebruikt om pagina's te maken, u geanimeerde (en in het algemeen vrij gepositioneerde) elementen alleen in de sjabloon zelf kunt maken, maar niet in pagina's die op basis daarvan zijn gemaakt. Dreamweaver laat je dit eenvoudigweg niet doen. Het koptekstgedeelte is inderdaad een onveranderlijk gebied, en Dreamweaver laat u geen code in een onveranderlijk gebied plaatsen. Onthoud dit. Hoewel je natuurlijk de animatie kunt weigeren of de pagina van de sjabloon kunt 'losmaken' en er vervolgens mee kunt doen wat je wilt.

De film is voorbij. Lang leve de bioscoop!

Zoals u kunt zien, is het maken van animaties op een webpagina een vrij eenvoudige taak, tenzij u natuurlijk in de Dreamweaver-omgeving werkt. U bepaalt gewoon het traject van het gewenste element, en Dreamweaver doet de rest van het werk, namelijk het “leven” erin blazen. Als je wilt zien wat het in dit geval met je pagina doet, bekijk dan de HTML-broncode in codeweergave. U zult er versteld van staan ​​hoeveel Dreamweaver heeft gedaan om uw paginatitel te laten bewegen, en de enorme webscripts die het heeft gemaakt om precies dat te doen.

Webscripts... We hebben er al zoveel over gesproken! Kunnen ze iets anders doen dan pagina-elementen heen en weer verplaatsen? Zeker! Alleen het volgende hoofdstuk zal uitsluitend aan webscripts worden gewijd...

Animatie is een van de belangrijkste trends bij het bouwen van moderne websites. Animatie-elementen in interfaces tillen hun bruikbaarheid naar een 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.

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

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();

Dit zijn volgens hem geen echte animatiebibliotheken of raamwerken ten minste in de gebruikelijke zin.

Animate.css is slechts een 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 echter misschien wel de beste manier om HTML-elementen te laten bewegen, of met andere woorden, ze te animeren.

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

Ten tweede zijn wow.js en animate.css uiterst eenvoudig te gebruiken. Hoogstwaarschijnlijk hoeft u geen enkele regel extra JS-code te schrijven. Het is voldoende om deze twee scripts met de pagina te verbinden en een paar CSS-klassen toe te voegen aan het element dat moet worden geanimeerd: de 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.

Een demo, meer gedetailleerde documentatie en een volledige lijst met 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 bestaat niet langer alleen uit tekenfilms. Van bewegende beelden op volledig scherm tot hover-effecten, animatie duikt overal op. Animatie is modieus, grappig en interessant.

De obstakels die de implementatie ervan in de weg staan, beginnen te verdwijnen. Met de snelheid van internet en het gemak waarmee je alles kunt maken, van eenvoudige bewegingen of gekke gifjes tot lange geanimeerde video's, is animatie een praktische en bruikbaar gereedschap webontwerp.

Animatie begint wanneer iets dat in een stationaire of tweedimensionale vorm is gemaakt, tot leven wordt gebracht en begint te bewegen volgens de wetten van de natuurkunde. Bijvoorbeeld wanneer een stripfiguur van de ene kant van het scherm naar de andere loopt, of zoals het pictogram van een applicatie die op een Mac wordt geladen, stuitert als een bal.

Disney is bijna synoniem met animatie. Begin jaren tachtig schreven twee animators van het bedrijf een boek waarin ze twaalf animatieprincipes uiteenzetten. Dit boek, Illusion of Life: Disney Animation, geschreven door Frank Thomas en Oli Johnston, is nog steeds relevant.

Dit zijn de principes:

Webanimaties worden vaak opgeslagen in GIF-formaten, CSS, SVG, WebGL of als video. Een animatie kan van alles zijn, van een eenvoudige onderstreping die verschijnt als u met de muis over een woord beweegt, tot een video op volledig scherm of achtergrond afbeelding. Zoals bij elke ontwerptechniek kan animatie zowel subtiel als onvermijdelijk zijn.

Elke dag is er steeds meer animatie in webontwerpen. Kleine, eenvoudige animaties kunnen boeiend en interessant zijn; de gebruiker denkt misschien niet eens dat dit animatie is. Grootschalige animatie kan een interessante, boeiende visuele ervaring zijn. Maar te veel beweging kan tot complete chaos leiden.

Wat animatie trendy maakt, is realisme. In het huidige landschap, met zoveel minimalistische en platte stijlen, hebben gebruikers meer visuele aanwijzingen nodig om te vertellen wat ze moeten doen. Een kleine hoeveelheid animatie kan de gebruiker in de gewenste richting duwen zonder de algehele esthetiek te veranderen. Het brengt orde in een ontwerp dat de gebruikers niet biedt voldoende hoeveelheid visuele aanwijzingen. In dit geval wordt animatie een bemiddelaar tussen eenvoud en bruikbaarheid.

Webanimatie is onderverdeeld in twee eenvoudige categorieën: grote animatie en kleine animatie.

Grote animaties verschijnen vaak in de vorm van lange video's, nemen een aanzienlijk deel van het scherm in beslag en hebben de kenmerken van een kleine video. Dit type animatie vormt het centrale onderdeel van het hele ontwerp. Normaal gesproken hoeven gebruikers geen actie uit te voeren om de beweging te zien. Als je goed naar de animatie op de website van Studio Meta kijkt (eerste screenshot hieronder), zul je merken dat de afbeeldingen inzoomen terwijl je de tekst leest.

Kleine animaties zijn de kleine stukjes die u opmerkt tijdens uw interactie met een website. Kleine animatie is een accent dat bijdraagt ​​aan de algehele esthetiek, maar vormt geen centraal onderdeel van het ontwerp. Op de website van Henry Brown (tweede screenshot) knipperen de ogen in de illustratie.

Het probleem met elke trend, inclusief deze, is weten wanneer je deze moet gebruiken. Animatie kan een grote hulp zijn, maar niet voor elk project. De animatie moet vloeiend zijn, niet mechanisch of schokkerig. Het moet een specifiek doel dienen en mag de inhoud niet verstoren.

De belangrijkste reden voor het gebruik van animatie is het verbeteren van de bruikbaarheid. Eenvoudige animatie kan de gebruiker uitleggen welke knop hij moet indrukken of waar hij vervolgens heen moet.

De tweede reden is esthetiek. Animatie kan een geweldig "landschap" zijn. Dit soort decoratieve animatie kan een verhaal vertellen of een emotionele band creëren tussen de interface en de gebruiker. Het doel van animatie kan zijn om visuele interesse te genereren en de betrokkenheid voor een langere periode vast te houden.

Vertaling van het artikel van Carrie Cousins