Share
HTML is de taal waarin het web is ingebouwd en het is een beetje een raar beest. Hoewel het oorspronkelijk bedoeld was als een manier om academische informatie eenvoudig over het internet te delen, is het langzaam getransformeerd om tegemoet te komen aan de mediarijke omgeving die we kennen en waar we van houden. Vanwege het lukrake karakter van HTML (en JavaScript, de programmeertaal die elementen in HTML manipuleert en deze interactief maakt), moeten we soms een beetje out of the box denken. In deze tutorialserie laat ik je zien hoe je cross-browseranimatie doet met een methode genaamd spriting. En omdat dit een leermogelijkheid is, zullen we het allemaal doen zonder externe bibliotheken (zoals jQuery).
Dit zal een vierdelige serie zijn. Ik zal het spriting zelf in deel één (dit artikel) uitleggen met wat basis JavaScript, maar dan in latere afleveringen gaan we verder met enkele tussenliggende technieken zoals inkapseling, gebeurtenisafhandeling en ondersteuning van touchscreens.
Dus laten we beginnen!
Animatie is gebaseerd op een fenomeen genaamd doorzettingsvermogen van visie, wat in feite zegt dat als je brein veel vergelijkbare stilbeelden snel genoeg ziet, het lijkt alsof het een bewegend beeld is. Elke soort film of video gebruikt deze basistechniek - veel licht verschillende frames worden snel achter elkaar weergegeven om ervoor te zorgen dat iets lijkt te bewegen. Film wordt meestal weergegeven met 24 frames per seconde (₁), terwijl uitgezonden televisie in Noord-Amerika wordt weergegeven met 29,97 frames per seconde (₂). Dus, met andere woorden, wat we willen doen is iets maken dat soortgelijke frames heel snel laat zien (meerdere keren per seconde).
Er zijn twee belangrijke redenen waarom animatie op internet moeilijk te gebruiken is:
Een manier om deze problemen te omzeilen is om een sprite-sheet te maken. In elementen zoals divs, we kunnen een achtergrondafbeelding instellen voor de div dat kan groter zijn dan het element zelf. We kunnen ook de achtergrondpositie instellen, zodat we precies bepalen welk deel van de grotere afbeelding wordt weergegeven. Een sprite-sheet is een grotere afbeelding gemaakt van meerdere kleinere afbeeldingen die we kunnen verplaatsen zodat deze de plaats kan innemen van veel kleine afbeeldingen. Bekijk het onderstaande voorbeeld met J, de mascotte van mijn bedrijf Joust Multimedia:
Hoewel er tien verschillende afbeeldingen van J zijn, worden ze bij elkaar geplaatst in een groter PNG-bestand (we gebruiken PNG's omdat ze transparantie kunnen tonen). Als we een hebben div dat is alleen de grootte van een van de afbeeldingen, en we zetten deze PNG als de achtergrond, het zal eruit zien als een enkele afbeelding.
Zie de hazdm op CodePen.
Hoewel dit een hoop moeite lijkt om door te gaan om een afbeelding te tonen, corrigeert deze methode de twee problemen die we eerder hadden. Met heel weinig JavaScript (één regel!) Kun je de achtergrondpositie van een veranderen div, en het werkt overal op. Omdat al deze frames zich op dezelfde afbeelding bevinden, is er maar één verzoek nodig om die afbeelding op de pagina te laden. Dus zodra de pagina wordt geladen, kan deze zonder problemen tussen sprites schakelen.
Dus hoe kunnen we dit gemakkelijk animeren? De eerste stap is het maken van het sprite-blad. Je zult willen weten wat de uiteindelijke dimensies van je afbeelding zouden moeten zijn, en de sprites dienovereenkomstig in een raster plaatsen. Mijn J-afbeelding zal bijvoorbeeld 40 px breed en 50 px hoog zijn, dus ik heb mijn sprites exact 40px uit elkaar geplaatst horizontaal en exact 50px uit elkaar verticaal. Het zal waarschijnlijk het gemakkelijkst zijn als u uw startscript in de linkerbovenhoek instelt.
Dan zullen we een div met een beetje CSS om ervoor te zorgen dat alles correct verschijnt:
En hier is onze CSS om ervoor te zorgen dat de sprite correct wordt weergegeven:
Accentsconagua
.karakter / * * Heel belangrijk dat we de hoogte en breedte van * onze karakters instellen op de hoogte en breedte van de sprites * / hoogte: 50px; width: 40px; / * * We moeten ze absoluut positioneren, zodat we volledige controle over hun positie in het stadium kunnen hebben * / positie: absoluut; left: 100px; top: 120px; #j / * * En nu stellen we de achtergrondafbeelding in voor het teken div * om de eerste sprite te zijn (in de linkerbovenhoek) * / background-image: url ('j.png'); background-repeat: no-repeat; achtergrondpositie: 0 0; Let op de volgende dingen:
div tot de grootte van onze sprite'No-repeat' '0 0'-dit toont de sprite in de linkerbovenhoekNu heeft het slechts één regel JavaScript nodig om de achtergrondpositie te wijzigen om de volgende sprite te tonen.
document.getElementById ('j'). style.backgroundPosition = '-40px 0px'; Hier selecteren we het element (met id = 'j') en het instellen van het stijlkenmerk 'BackgroundPosition'. Merk op dat het gespeld is 'BackgroundPosition' in JavaScript, en niet zoals 'Background-position' in CSS. Merk ook op dat in JavaScript, de 'Px' is vereist voor zowel het x- als het y-bedrag - we kunnen niet alleen de cijfers doorgeven. En omdat we het achtergrondbeeld verplaatsen, moeten we het in de tegenovergestelde richting verplaatsen van wat u zou verwachten. Om naar de sprite aan de rechterkant te gaan, moeten we de afbeelding 40 px naar links verplaatsen.
Als we nu iets eenvoudigs hebben om deze code uit te voeren (zoals een knop), kunnen we de frames in actie zien veranderen: check de DIsgk op Codepen.
Wellicht bent u ook geïnteresseerd in het bekijken van de broncode voor deze pagina. Het heeft alle voorbeelden hier met grondige opmerkingen. En hier is de sprite sheet die ik gebruik.
Wat we in deze tutorial hebben behandeld, is een goed begin, maar het is niet echt een goede animatie. In deel twee van deze serie zullen we zelfs wat rennen en springen animeren, door lussen te maken met de verschillende sprites.
In deel vier zullen we mouseovers maken voor een beetje robotactie. Zie de ByGtv Codepen voor een preview.
Hoewel dit een geweldige methode kan zijn om op internet te animeren, zijn er enkele nadelen. Ten eerste kan het vereisen dat u elk individueel animatieframe maakt, wat tijdrovend kan zijn. Ten tweede hebben browsers niet de meest nauwkeurige timers voor animatie, dus als het cruciaal is dat je animatie perfect getimed wordt, dan werkt dit misschien niet. Ten slotte heeft mobiele Safari (gebruikt op iPhones en iPads) een "functie", waarbij als u een achtergrondafbeelding hebt die groter is dan 2 MB of groter is dan 1024 x 1024 x 3 pixels (of 3.145.728 totale pixels), deze automatisch de beeld, verpest het spriting-effect. Dit betekent dat echt grote sprites, of animaties met een zeer groot aantal sprites, uitgesloten zijn. Maar voor eenvoudige, kleine animaties die je erg interactief wilt maken, is dit een gemakkelijke en geweldige manier om iets te krijgen dat overal werkt.
1. Voordat geluid met film werd geïntroduceerd, was er niet echt een standaard beeldsnelheid. De camera's werden bediend met een handslinger, dus als je een rookie-cameraman had, zou de framesnelheid mogelijk vertragen en onbedoeld versnellen. Evenzo waren minder gerenommeerde theaters berucht omdat ze hun projectionisten hadden verteld om de projector sneller te laten draaien om de show te versnellen, zodat ze in meer vertoningen konden passen. Dit is ook de reden waarom we stereotiep denken dat films vóór het geluid komisch snel rondgaan - de meesten werden gefilmd rond 16 tot 18 fps, dus wanneer we ze vandaag met 24 frames per seconde spelen, bewegen ze sneller dan ze oorspronkelijk bedoeld waren.
2. Televisie werd oorspronkelijk uitgezonden met 30 fps in Noord-Amerika, maar kleurentelevisie veroorzaakte een glitch wanneer deze snelheid werd weergegeven. Ingenieurs kwamen erachter dat ze dit konden repareren door de framesnelheid met 0,1% te vertragen, daarom is deze nu ingesteld op 29,97 fps. Naast alle gekke technische problemen bij het omzetten van een film in 24 fps naar weergave op televisie met 29,97 fps, heeft televisie met een snellere fps een interessant effect op het publiek. Veel mensen die naar de testvoorstellingen van "The Hobbit" aan 48 fps keken, rapporteerden dat de verhoogde framerate de film "goedkoper" deed lijken, hoewel het een veel hogere kwaliteit had dan een typische film, gewoon omdat ze waren gegroeid om snellere framesnelheden te associëren met iets op tv te kijken.
