Vergelijking van animatie met CSS en JavaScript. Hoe ik een animatiescript ontwikkelde voor het verplaatsen van een element langs een Bezier-curve in Javascript

Goededag. Voor je is het erg goede bouw geanimeerde achtergronden voor de site in zeven verschillende variaties. Animatie gaat vooral over de beweging, het verschijnen en verdwijnen van figuren, woorden of tekeningen. Ik zal elk effect afzonderlijk beschrijven en onderaan elke geanimeerde achtergrond zal er een "Demo" -knop en een "Download" -knop zijn, en onderaan de site is er een knop voor het downloaden van alle variaties + bonus: een één- paginapagina waarop al deze achtergronden op één pagina worden gepresenteerd. En dus, hier gaan we:

We hebben een afbeelding op de achtergrond die automatisch wordt aangepast aan de monitorresolutie, en tegen deze achtergrond ‘zwevende’ transparante cirkels verschillende maten. Ze verschijnen en verdwijnen. Verschijning, beweging en verdwijning zijn volkomen willekeurig. Het ziet er stijlvol uit, belast het oog niet en kan uw site levendiger maken. Ik vraag het alleen - plaats nergens zo'n geanimeerde achtergrond op, want als de site puur informatief is en er veel informatie op staat, namelijk tekst, dan zal zo'n achtergrond een beetje afleidend zijn en de aandacht afleiden.

Realisatie van de sterrenhemel met jQuery gebruiken, html en css. De animatie is van voldoende kwaliteit, deze kan worden vervangen achtergrondafbeelding op de nachtelijke hemel en het effect zal nog koeler zijn. Probeer het :))

Geen slecht 3D-effect, zeker niet met de afbeelding die al in de demoversie zit. Het lijkt misschien onhandig, maar je kunt altijd experimenteren en ermee doen met behulp van css vierkanten of andere vormen en maak het zoals jij wilt. Dit animatie-effect werkt op dezelfde manier als andere effecten.

Waarschijnlijk de meest mislukte implementatie van dit effect, maar het kan voor iemand nuttig zijn!

Er is iets nieuws gekomen. Hier implementeren we animatie van woorden die kunnen worden gewijzigd in een js-bestand. Het ziet er interessant uit en ik denk dat het voor velen nuttig kan zijn. Ik denk dat er veel mogelijkheden zijn om zo’n achtergrondeffect op een website te gebruiken. Laten we het nemen!

Mooi achtergrondeffect, zoals bubbels. Ze worden groter en verdwijnen dan. Het lijkt echt alsof er bellen barsten.

Als een lint dat in de wind waait, wekt dit achtergrondeffect de indruk dat deze “figuur” naar binnen wordt getrokken online-modus. Dit patroon is prachtig met elkaar verweven en heeft de neiging groter te worden en binnen ongeveer een minuut het hele oppervlak van de achtergrond te bedekken. Bekijk de demo en download!

Ik denk niet dat je ooit naar zoiets hebt gezocht, maar ik heb persoonlijk altijd al een aantal promotiesites willen versieren met een geanimeerde achtergrond, zoiets als 'Rondes'. In deze montage vind je een achtergrondeffect voor jezelf.

En dit is precies waar ik het over had. Als u op "Demo" klikt, wordt u naar een pagina geleid met een volwaardige website van één pagina, waar alle opties voor achtergrondanimatie-effecten in dit artikel worden gepresenteerd. En als u op de knop ‘Downloaden’ klikt, downloadt u een archief met alle opties voor geanimeerde achtergronden en plus een websitesjabloon van één pagina. Beste wensen!

Een kort overzicht van veelbelovende JavaScript-bibliotheken en plug-ins voor animatie.

Scripty2 is een krachtige, flexibele JavaScript-workbench waarmee u uw eigen mooie creaties kunt maken visueel effect of gebruikersinterface.

Neem de regel op in uw HTML-code:

De volgende regels worden gebruikt op de scripty2 demopagina.

//Voor het snake-effect op kaarten in de demo document.observe("cards:snake", function())( var d = 20; name.sortBy(Math.random).each(function(card, index)( $ (kaart) .morph("margin-left:"+[-300.300,-150.150]+"px;margin-top:"+ (272+(index-names.length/2)*d)+"px;left :371px z-index:"+index, ( propertyTransitions: ( marginLeft: "mirror", marginTop: "bouncePast", links: "swingFromTo", zIndex: zIndexTransition ), duur:2 )).morph("margin-top; :272px; left:"+(371+(index-names.length/2)*d)+"px", ( propertyTransitions: ( marginTop: "easeInCirc", links: "lineair"), duur:1, vertraging: index/15 )).morph("margin-top:"+(272-(index-names.length/2)*d)+"px;left:371px", ( propertyTransitions: ( marginTop: "easeOutCirc", left : "lineair " ), duur:1 ));

(function())( document.fire("kaarten:slang"); )).delay(2);

))(); Het is een krachtige en toch eenvoudig te gebruiken bibliotheek die het mogelijk maakt indrukwekkende animaties aan websites toe te voegen zonder concessies te doen aan de standaarden of compatibiliteit. Met een omvang van ongeveer 25 KB is het jsAnim-pakket een serieus hulpmiddel voor zo'n kleine applicatie. Schakel in

volgende regels naar jouw code: Maak een bestand

Var-manager = nieuwe jsAnimManager(); aniMe = document.getElementById("animateMe"); aniMe.style.position = "relatief"; var anim = manager.createAnimObject("animateMe"); anim.add((eigenschap: Prop.left, to: 500, duur: 2000));

Een eenvoudige plug-in die er maar twee heeft belangrijkste methoden, sprite() en pan() . Beide methoden zijn bedoeld voor eenvoudige eigenschapsanimatie Achtergrond-CSS elementafbeeldingen. Het verschil tussen deze twee methoden is dat een 'sprite'-afbeelding twee of meer 'animatieframes' bevat, terwijl een 'pan'-afbeelding er één bevat. continu beeld, die de overgangen van links naar rechts herhaalt. Meestal, binnen eenvoudig geval, kan worden gebruikt png-bestanden hiervoor (met of zonder transparantie). Je kunt gebruiken transparant gifje Voor Internet Explorer 6, hoewel het er niet erg goed uit zal zien. Uw HTML-element moet hebben juiste maat, maar de achtergrondafbeelding is meestal groter dan het HTML-element en de sprite()-methode verandert de positie achtergrondafbeelding volgens het HTML-element.

Hier is een eenvoudig voorbeeld. De volgende methode zorgt ervoor dat een van de vogelsprites over de pagina vliegt. De 'sprite'-methode verzamelt drie frames png-afbeelding met transparantie, waarbij elk frame zijdelings is gepositioneerd:

Nu hoef je alleen maar een div te maken met de naam 'bird', geef deze op juiste maat(180×180 px in in dit geval), en animeer het met spriet(). De twee opties die moeten worden ingesteld zijn 'fps' (frames per seconde) en 'no_of_frames', dat wil zeggen drie frames voor onze afbeelding:

$("#bird").sprite((fps: 12, no_of_frames: 3));

Om afbeeldingen naar de muiscursor te "trekken" wanneer er op het scherm wordt geklikt, gebruikt u:

$("#bird").sprite((fps: 12, no_of_frames: 3)).activeOnClick().active(); $("body").flyToTap();

De active() methode maakt deze sprite de actieve sprite wanneer de pagina wordt geladen, anders wordt een sprite met activeOnClick() alleen actief wanneer erop wordt geklikt.

De methode $("body").flyToTap() volgt een tik op de pagina, waarna de huidige beweging eindigt en de sprite naar de locatie van de tik beweegt. Na een paar seconden begint de willekeurige bewegingsmethode te worden gebruikt.

$fx() is een kleine, op zichzelf staande Javascript-bibliotheek voor het animeren van HTML-elementen. Het vereist geen andere bibliotheken om te werken en zou goed moeten samenwerken met andere bibliotheken (Prototype, JQuery, Moo-tools, enz.)

Met $fx() kunt u elke CSS-eigenschap gedurende de animatie wijzigen, zodat u animatie-effecten opeenvolgend kunt afspelen, dat wil zeggen, zoals u dat wilt. $fx() verzorgt ook het timerbeheer en maakt het animatieproces eenvoudig en elegant.

$fx() biedt ook de mogelijkheid om CSS-eigenschapsinstellingen te combineren om effecten te combineren en maakt het mogelijk meerdere callbacks in te stellen, wat flexibiliteit toevoegt aan het gebruik van de bibliotheek.

Hoe u een eenvoudig effect kunt toevoegen en animeren

Ten eerste hebben we een element nodig. Iedereen zal het doen element (bijvoorbeeld: ). U kunt vervolgens $fx() aanroepen en een verwijzing naar het element doorgeven.

$fx("mijnDiv")

Vervolgens voegen we effecten toe door $fxAdd(...) aan te roepen.

$fx("mijnDiv").fxAdd((type: "fontSize", van: 12, tot: 72, stap: 1, vertraging: 20));

Laten we nu lanceren!

$fx("mijnDiv").fxAdd((type: "fontSize", van: 12, tot: 72, stap: 1, vertraging: 20)).fxRun(null,-1);

moo.fx is een superlichtgewicht en ultrakleine bibliotheek met JavaScript-effecten die wordt gebruikt in werkomgeving prototype.js of mootools.

Het is heel gemakkelijk te gebruiken, razendsnel, cross-browser, voldoet aan de standaarden en biedt wijzigingscontrole voor iedereen CSS-eigenschappen elk HTML-element, inclusief kleuren, heeft het een ingebouwde controle die voorkomt dat de gebruiker het effect onderbreekt met talloze, gekke muisklikken. Geoptimaliseerd om zoveel mogelijk te creëren kleiner formaat codes, nieuw moo.fx biedt de mogelijkheid om elk type effect te creëren.

Onderstaande code wordt gebruikt om een ​​versleepbare bal op te maken startpagina moo.fx.

Var bal = $("header").getElement("h1");

var ballfx = nieuwe Fx.Styles(ball, (duur: 1000, "overgang": Fx.Transitions.Elastic.easeOut)); nieuwe Drag.Base(ball, ( onComplete: function())( ballfx.start(("top": 13, "left": 358)); ) )); Een kleine JavaScript-bibliotheek die uw werk eenvoudiger kan maken vectorafbeeldingen bij webprojecten. Als u bijvoorbeeld uw eigen diagram of widget wilt maken voor het roteren en bijsnijden van afbeeldingen

deze bibliotheek zal u helpen het probleem eenvoudig en gemakkelijk op te lossen. Raphael gebruikt SVG en VML als basis voor het maken van afbeeldingen. Dus iedereen grafisch object, dat wordt gemaakt, is ook een DOM-object en er kan een handler aan worden gekoppeld JavaScript-gebeurtenissen of wijzig wanneer

Demonstratie van animatie gemaakt met behulp van deze prachtige bibliotheek.

De onderstaande code wordt gebruikt om een ​​cirkel in een ellips te transformeren en tegelijkertijd van de ene plaats naar de andere te gaan:

// Ellipse (functie () ( r.circle(40, 90, 20).attr(stippellijn); r.ellipse(140, 90, 20, 10).attr((vul: "geen", lijn: "# 666", "stroke-dasharray": "- ", rotatie: 45)); var el = r.ellipse(40, 90, 20, 20).attr((vul: "geen", lijn: "#fff" , "lijnbreedte": 2)), elattrs = [(ry: 10, cx: 140, rotatie: 45), (ry: 20, cx: 40, rotatie: 0)], nu = 0 (90, 90).node.onclick = function () ( el.animate(elattrs, 1000); if (nu == 2) ( nu = 0; ) )();

Op de startpagina van de bibliotheek vindt u een demo van andere animatie-effecten.

Dit is een OpenSource-vectorengine voor animatie in grafische elementen HTML5. Burst biedt FLASH-achtige functionaliteit voor webapplicaties en is gebaseerd op lagen, zoals in Na effecten, animatiesysteem. Burst maakt gebruik van een zeer compacte JavaScript-engine, waardoor animaties snel kunnen worden geladen en het proces kan worden bestuurd met behulp van eenvoudige methoden JavaScript.

Met Burst kunt u zeer snel complexe reeksen animaties bouwen en deze eenvoudig koppelen aan weergave en beheer in elke webapplicatie.

Burst.timeline("feest", 0, 800, 1, false) .shape("balloon", "balloon3.svg", "svg", 0, 0, .5, 0) .shape("cake", " cake2.svg", "svg", 0, 0, 1, 0) .track("left") .key(1, -320, "easeInOutQuad") .key(200, 0) .shape("ballon") .track("boven") .key(0,320) .key(100,320) .key(800, -320) .track("links") .key(0,0) .key(100, 0, "easeOutBounce") .sleutel(800.120);

Burst.play();

8. Canvas 3D JS-bibliotheek (C3DL)

Canvas 3D JS Libary (C3DL) is een JavaScript-bibliotheek waarmee u eenvoudig 3D-applicaties kunt maken die WebGL gebruiken. Het biedt een reeks klassen voor 3D-wiskunde, objecten en scènes die WebGL toegankelijker maken voor ontwikkelaars die 3D-inhoud in hun applicaties insluiten, maar die niet diep in 3D-wiskunde willen duiken om hun doelen te bereiken. In dit artikel willen we u kennis laten maken met enkele van de nuttigste JavaScript-bibliotheken die kunnen worden gebruikt om de inhoud van webapplicaties te animeren. Deze bibliotheken zijn ontworpen om animaties te maken voor vervolgkeuzemenu's, schuifelementen, parallaxanimaties en zelfs lettertypen. En het belangrijkste is dat alles 100% is gratis middelen, zodat u ze in al uw projecten kunt gebruiken.

Schakel gewoon dynamics.js in op de pagina en vervolgens kunt u CSS-eigenschappen op elk DOM-element animeren. U kunt ook SVG-eigenschappen animeren.

Dynamics.js bevat een eigen setTimeout-eigenschap. De reden is dat requestAnimationFrame en setTimeout worden gekenmerkt door ander gedrag. De eigenschap wordt ondersteund door alle JavaScript-objecten. De bibliotheek is getest op compatibiliteit met Safari 7+, Firefox, Chrome 35+ 34+, IE10+.

Een krachtige JavaScript-bibliotheek waarmee u CSS-eigenschappen en SVG-kenmerken kunt animeren.

Animate Plus is ideaal voor het organiseren van snelle interactie tussen alle interfacebedieningen, evenals voor lange animatiereeksen voor desktop- en mobiele apparaten.

Een compacte, krachtige JavaScript-bibliotheek voor het animeren van elk element (“actie”) binnen elk ander element (“effect”) op de pagina.

Beep.js is een set tools voor het maken van browsergebaseerde JavaScript-synthesizers met behulp van de WebAudio API.

Een krachtige JavaScript-bibliotheek voor animatie en transformatie van cross-browser iconen. iconate.js ondersteunt ook modulaire sjablonen van AMD en CommonJS.

Een JavaScript-bibliotheek voor het weergeven van kleine ASCII-animatie-elementen in DOM-opmerkingen. Dit is een zelfstandige bibliotheek die alleen JavaScript gebruikt (animatie wordt gedaan in commentaarknooppunten, alleen in de DOM).

Met Rainyday.js kunt u realistisch ogende regendruppeleffecten op glas creëren met behulp van HTML5-canvas en JavaScript. De bibliotheek bevat een uitbreidbare API en ingebouwde foutdetectie.

Rainyday.js maakt gebruik van de kracht van HTML5 en wordt daarom door de meeste moderne browsers ondersteund.

Met Anima.js kunt u vertragingen en duur gebruiken, zelfs voor CSS-animaties. De bibliotheek gebruikt CSS-transformaties en 3D-transformaties om animaties te maken Javascript inschakelen. U kunt animaties starten, stoppen, annuleren en zelfs gebeurtenisgestuurde effecten creëren.

blinkTitle.js kan een knipperende HTML-titel, waarschuwing of melding in de titel maken.

De Javascript-bibliotheek is ontworpen om elementen te verplaatsen, te verschuiven, te roteren, te schalen, scheef te trekken en het formaat te wijzigen. Dankzij matkunnen transformaties in elke gewenste combinatie worden gecombineerd. Het eindresultaat wordt vervolgens gespecificeerd met behulp van CSS3-transformatiematrices.

Vivus is een compacte JavaScript-klasse (zonder afhankelijkheden) voor SVG-animaties door te tekenen. Vivus bevat veel verschillende animatie-effecten en de mogelijkheid om een ​​aangepast script te maken is geïmplementeerd.

Een JavaScript-bibliotheek voor het bouwen van dynamische interacties op basis van echte natuurkunde, met de nadruk op mobiele apparaten. In plaats van animatie-eigenschappen die een tijdsperiode specificeren, verandert Impulse van positie en snelheid. Het bevat niet grote hoeveelheid afhankelijkheden. Vereist geen jQuery, maar kan er goed mee communiceren.

AniJS is een declaratieve JavaScript-bibliotheek voor het verwerken van CSS-animaties. Het is volledig gedocumenteerd en gemakkelijk te gebruiken.

Een tool voor het maken van prachtige keyframe-animaties op basis van CSS3. Voeg een component toe, selecteer een optie en ontvang een korte URL of exporteer de code naar CSS.

Sticker.js is een JavaScript-bibliotheek waarmee u verwijderbare stickereffecten kunt creëren. De bibliotheek werkt het grootste deel van de tijd populaire browsers, die CSS3 ondersteunen (inclusief IE10+). Gedistribueerd onder de MIT-licentie.

WOW.js geeft CSS-animatie weer terwijl u naar beneden scrollt op de pagina. Standaard zou u deze actie moeten gebruiken om animate.css uit te voeren, maar u kunt deze instellingen eenvoudig wijzigen.

Parallax.js is een compacte oplossing voor het creëren van parallax-effecten. De bibliotheek werkt ook op smartphones en tablets (met een gyroscoop of hardwarematige bewegingsdetector). Parallax.js heeft verschillende opties om het effect aan te passen met behulp van "data-attributen" of via JavaScript. De bibliotheek kan standalone of als JQuery-plug-in en Zepto (er bestaan ​​twee versies).

Een kleine bibliotheek voor het maken van animaties JavaScript gebaseerd. Het kan worden gebruikt om CSS-eigenschappen, SVG-afbeeldingen of DOM-boomkenmerken op een webpagina te animeren. Met de bibliotheek kunt u alle aspecten van animatie beheren en kunt u op vele manieren elementen aanwijzen die in beweging moeten worden gezet.

Je hebt volledige controle over de volgorde waarin de animatie wordt afgespeeld en bepaalt hoe de animaties van verschillende elementen ten opzichte van elkaar worden gesynchroniseerd. De bibliotheek ondersteunt alles moderne browsers, inclusief IE10 en hoger.

In deze reeks tutorials leert u alle functies van Anime.js kennen en kunt u de bibliotheek in uw projecten gebruiken.

Opmerking Als u helemaal nieuw bent met JavaScript, raden wij u aan vertrouwd te raken met deze programmeertaal.

Om te installeren kunt u npm- of bower-opdrachten gebruiken:

Npm installeer animejs prieel installeer animejs

U kunt de bibliotheek ook downloaden en in uw project opnemen of ernaar linken nieuwste versie via CDN.

Na een succesvolle installatie kun je Anime.js gebruiken om interessante animaties aan je elementen toe te voegen. Laten we beginnen met de basismogelijkheden van de bibliotheek.

Als u een animatie wilt maken met Anime.js, roept u de functie anime() aan en geeft u deze een object door met sleutel-waardeparen die de doelelementen en eigenschappen definiëren die u wilt animeren. U kunt het trefwoord Targets gebruiken om de bibliotheek te laten weten wat u moet animeren. Dit trefwoord kan een waarde aannemen in verschillende formaten.

CSS-selectors: u kunt één of meerdere selectors als waarden doorgeven trefwoord doelen.

Var blauw = anime(( doelen: ".blue", translationY: 200 )); var redBlue = anime((doelen: ".red, .blue", translationY: 200 )); var even = anime(( doelen: ".square:nth-child(even)", translationY: 200 )); var notRed = anime(( doelen: ".square:not(.red)", translationY: 200 ));

In het eerste geval animeert Anime.js alle elementen met de blauwe klasse. In de tweede - blauw of rood. In het derde geval animeert Anime.js alle even onderliggende elementen met het class square . En binnen het laatste geval de bibliotheek zal communiceren met alle elementen met klassevierkant die geen klasse rood hebben.

DOM-knooppunten of NodeList: u kunt ook een DOM-knooppunt of NodeList gebruiken als waarde voor het trefwoord Targets. Bekijk een voorbeeld van het gebruik van een DOM-knooppunt voor doelen.

Var special = anime((doelen: document.getElementById("speciaal"), translationY: 200 )); var blue = anime((doelen: document.querySelector(".blue"), translationY: 200 )); var redBlue = anime((doelen: document.querySelectorAll(".red, .blue"), translationY: 200 )); var even = anime(( doelen: document.querySelectorAll(".square:nth-child(even)"), translationY: 200 )); var notRed = anime(( doelen: document.querySelectorAll(".square:not(.red)"), translationY: 200 ));

In het eerste geval werd de functie getElementById() gebruikt om toegang te krijgen specifiek onderdeel. De functie querySelector() werd gebruikt om toegang te krijgen tot een element met klasse blue . En de functie querySelectorAll() werd gebruikt om toegang te krijgen tot alle elementen in het document die overeenkomen met een groep specifieke selectors of die er omgekeerd niet in zijn opgenomen.

Er zijn veel functies die u ook kunt gebruiken om het doelelement te selecteren. U kunt bijvoorbeeld toegang krijgen tot elementen met een specifieke klasse met behulp van de functie getElementsByClassName(). Of naar elementen met een specifieke tag met behulp van de functie getElementsByTagName().

Elke functie die een DOM-knooppunt of NodeList retourneert, kan worden gebruikt om de waarde van doelen in Anime.js in te stellen.

Object: je kunt gebruiken JavaScript-objecten als de waarde voor doelstellingen. De sleutel van dit object wordt gebruikt als identificatie en de waarde wordt gebruikt als het nummer dat moet worden geanimeerd.

Vervolgens kunt u de animatie in een ander HTML-element weergeven met behulp van aanvullende JavaScript-code. Hieronder ziet u een voorbeeld van het animeren van de waarden van twee verschillende sleutelséén voorwerp.

Var-bestanden gescand = (aantal: 0, geïnfecteerd: 0); var scanning = anime(( doelen: filesScanned, aantal: 1000, geïnfecteerd: 8, ronde: 1, update: function() ( var scanCount = document.querySelector(".scan-count"); scanCount.innerHTML = filesScanned.count ; var geïnfecteerdeCount = document.querySelector(".infected-count"); geïnfecteerdeCount.innerHTML = filesScanned.infected;

De bovenstaande code stuurt de teller van de gescande bestanden van 0 naar 1.000 en de teller van de geïnfecteerde bestanden van 0 naar 8. Houd er rekening mee dat u op deze manier alleen numerieke waarden kunt animeren. Als u probeert een sleutel van AAA naar BOY te animeren, wordt er een foutmelding weergegeven.

Bovendien gebruikte de code de functie terugbellen update-sleutel, die elk frame tijdens de animatie wordt genoemd. Hier werd het gebruikt om het aantal gescande en geïnfecteerde bestanden bij te werken. U kunt echter verder gaan en gebruikers een foutmelding laten zien wanneer het aantal geïnfecteerde bestanden een bepaalde drempel overschrijdt.

Array: mogelijkheid om te specificeren JavaScript-array doelen zijn handig als u veel elementen moet animeren die tot verschillende categorieën behoren. Als u bijvoorbeeld een DOM-knooppunt, een object en een verscheidenheid aan andere elementen wilt animeren op basis van CSS-selectors, kunt u dit doen door ze in een array te plaatsen en vervolgens de array te definiëren als de waarde voor targets . Het onderstaande voorbeeld zou de zaken duidelijker moeten maken.

Var multipleAnimations = anime((doelen: , translationY: 250 ));

Nu weet je hoe je moet bepalen verschillende elementen die geanimeerd moeten worden. Het is tijd om uit te zoeken welke eigenschappen en attributen kunnen worden geanimeerd met behulp van de bibliotheek.

Deze omvatten bijvoorbeeld breedte, hoogte en kleur voor verschillende doelelementen. De uiteindelijke waarden van verschillende geanimeerde eigenschappen zoals achtergrondkleur worden bepaald met behulp van lowerCamelCase. Achtergrondkleur wordt dus backgroundColor . De onderstaande code illustreert het animeren van de positie van het linkerobject en de achtergrondkleur (backgroundColor) van het doelobject.

Var animateLeft = anime((doelen: ".square", left: "50%" )); var animateBackground = anime((doelen: ".square", backgroundColor: "#f96" ));

Eigenschappen kunnen nemen verschillende soorten de waarden die ze zouden aannemen bij gebruik van reguliere CSS. De linkereigenschap kan bijvoorbeeld de volgende waarden hebben: 50vh , 500px of 25em . Je kunt de maateenheid achter het getal ook weglaten, maar in dit geval wordt dit standaard px. Soortgelijke acties kan worden gedaan met background-color , waarbij de kleur wordt opgegeven als hexadecimale waarde of met behulp van RGB- of HSL-code.

Transformatie langs de X- en Y-assen wordt bereikt met behulp van de eigenschappen 'translateX' en 'translateY'. Op dezelfde manier kunt u een element langs een specifieke as schalen, schuintrekken of roteren met behulp van de eigenschappen voor schalen, schuintrekken of roteren die geschikt zijn voor die specifieke as.

Het is mogelijk om verschillende hoeken te definiëren in graden of met behulp van de eigenschap turn. Een draaiwaarde van 1 komt overeen met 360 graden. Dit maakt berekeningen eenvoudiger omdat u weet hoeveel u de elementen ten opzichte van hun as moet roteren. In het onderstaande voorbeeld ziet u hoe u de schaal, overgang of rotatie van een enkele eigenschap of van allemaal tegelijk kunt animeren.

Var animateScaling = anime((doelen: ".square", schaal: 0.8 )); var animateTranslation = anime((doelen: ".square", translateX: window.innerWidth*0.8 )); var animateRotation = anime((doelen: ".square", roteren: "1turn" )); var animateAll = anime((doelen: ".square", schaal: 0,8, translateX: window.innerWidth*0,8, roteren: "1turn" ));

De enige voorwaarde is dat de attribuutwaarde numeriek moet zijn. De mogelijkheid om verschillende attributen te animeren opent de mogelijkheid om er enkele te creëren coole effecten. Omdat dit artikel alleen ter informatie is, bevat het eenvoudige voorbeelden.

Er zijn heel veel kant-en-klare oplossingen waarmee je met beweging langs Bezier Curves kunt werken. In de meeste gevallen praktische toepassing kant-en-klare oplossingen er zal genoeg zijn. Maar onafhankelijke implementatie is erg handig voor zelfontwikkeling, dus toen ik zo'n animatie in een van mijn projecten moest maken, nam ik een omweg.

In dit artikel beschrijf ik alleen mijn bewustzijnsstroom, geen lesmateriaal. Ik kan niet garanderen dat de uiteindelijke berekeningen de meest optimale zijn, maar ze werken — en dat is het belangrijkste.

Als je besluit te schrijven eigen functie Om de beweging langs Bezier-curven te berekenen, moet je altijd beginnen met het bestuderen van het materiaal.

De Bezier-curve is vernoemd naar de Franse ingenieur Pierre Bezier, een van de auteurs ervan. Een kubieke Bezier-curve is een parametrische curve gedefinieerd door de uitdrukking (), bestaande uit 4 paar waarden, waarbij elk paar de x- en y-coördinaten is van de punten waarlangs de curve wordt gevormd.

Een Bezier-curve bestaat dus uit twee punten en ten minste één vector. De lengte van de vector geeft aan hoeveel de buiglijn in zijn richting moet worden getrokken. Idealiter heeft één curve twee vectoren, de initiële en de eindpunt:

Net als bij het tekenen van een curve, geldt dezelfde formule voor het verplaatsen langs een curve, die te vinden is op Wikipedia:

Om berekeningen uit te voeren, hebben we de waarde van de bewegingsvoortgang (t) nodig (dat wil zeggen, we verdelen de voorwaardelijke animatie in een aantal frames dat voor ons handig is, of gebruiken de relatieve waarde van elk frame).

Laten we zeggen dat we van plan zijn om in vier seconden van punt naar punt te gaan op een curve met twee segmenten met een framesnelheid 12 fps. Dan D We delen de seconde door 12 en krijgen een tijdsperiode, die we nemen als een animatie-eenheid (frame).

Var frameduur = 1000/12;

Nu we de tijd kennen waarop we de curve willen doorlopen en het aantal frames, kunnen we het totale aantal frames in de gehele animatie verkrijgen. Om dit te doen, deelt u 4 seconden door het aantal frames per seconde.

Als we het totale aantal frames kennen, kunnen we de voortgangswaarde van de animatie verkrijgen met behulp van de huidige framecursor T, eenvoudigweg door het huidige frame te delen door het totale aantal animatieframes ;

Var t = currentFrame/framesCount;

Zo hebben wij e er is een startpuntwaarde —  P0x, P0y; eerste controlepunt —  P1x, P1y; tweede controlepunt —  P2x, P2y; en het laatste punt —  P3x,P3y, en animatievoortgangswaarde T. Het blijft om dit allemaal in de formule te vervangen

en we krijgen de coördinaten van het object dat we op elk moment nodig hebben (t).

X = (Wiskunde.pow((1 - t), 3) * P0x) +
(3 * Math.pow((1 - t), 2) * t * P1x) +
(3* (1 - t) * Math.pow(t, 2) * P2x) +
(Wiskunde.pow(t, 3) * P3x) y = (Wiskunde.pow((1 - t), 3) * P0y) +
(3 * Math.pow((1 - t), 2) * t * P1y) +
(3* (1 - t) * Math.pow(t, 2) * P2y) +
(Wiskunde.pow(t, 3) * P3y)

Wanneer ons object beweegt, heeft het een bepaalde richtingsvector. Een vogel kan niet zijwaarts vliegen; hij moet altijd in de bewegingsrichting kijken. En dit is precies wat we missen voor een kwaliteitsresultaat.

Om de hoek van een vector te bepalen, moeten we de hoek vinden die wordt gevormd door de twee dichtstbijzijnde punten op de curve ten opzichte van elkaar. Die. we nemen de coördinaten van de huidige positie van het object, en de coördinaten van de positie van het object in het vorige frame. Laten we ze bellen x0,y0 En x,y.

Eigenlijk x0-x, y0-y -  dit zijn twee zijden van een driehoek, als we weten welke hoek we kunnen vinden met behulp van de formule voor het oplossen van een driehoek met behulp van twee zijden en een rechte hoek ertussen.

Maar hier is het probleem: de hoek van een vector kan variëren van 0 tot 360, en de hoek in een driehoek varieert van 0 tot 179,9. We moeten de hoek tussen twee vectoren vinden:

Ik ging de experimentele route en bekeek elk van de mogelijke opties rotatie van de vector en raakte ervan overtuigd dat één formule niet voor iedereen zou werken.

Wanneer de gids van onder naar boven en van links naar rechts kijkt, wordt de gewenste hoek van onze denkbeeldige driehoek linksonder gevonden. In dit geval kant A wordt het verschil tussen X En x0, A B verschil tussen j En j0. We verkrijgen de effectieve hoek door de som van de kwadraten van alle zijden gedeeld door de dubbele som van het been en de hypotenusa.

A=boogjes((b2+c2-a2)/2bc)

Maar als de vector van links naar rechts kijkt, van boven naar beneden, veranderen onze zijden van de driehoek van plaats. In dit geval kant A wordt het verschil tussen j En j0, A B x en x0 respectievelijk. Die. alles is het tegenovergestelde van het vorige geval. Maar de oplossing blijft hetzelfde.

Alles zou in orde zijn, maar wanneer de gids van boven naar beneden, van links naar rechts, begint te bewegen, werkt het vorige schema niet meer. Eerst wisselen we de zijkanten opnieuw en de gewenste hoek wordt het tegenovergestelde. En we vinden het met behulp van de hulpformule 90-$A, daarnaast voegen we 90 toe zodat ons object in de goede richting kijkt.

In het vierde geval, wanneer de gids van onder naar boven en van rechts naar links kijkt, zoeken we opnieuw naar de hoek $B, maar deze keer voegen we 180 graden toe aan de waarde ervan.

Bovendien mogen we niet vergeten dat er opties zijn voor zijden met lengte nul, wat tot rekenfouten zal leiden. Daarom is het belangrijk om niet te vergeten een van de 4 bewegingsrichtingen te controleren, en bovendien te controleren of de zijden nul zijn, bij hoekwaarden 0, 90, 180 en 270.

De functie voor het berekenen van de rotatie met behulp van de bewegingsvector was niet erg compact, maar kon de taak wel aan.

Svg parseren

Het enige dat overblijft is ervoor te zorgen dat het script dat de animatie maakt, onmiddellijk als traject kan worden aanvaard SVG-pad. Ik kon geen enkele hoogwaardige SVG-PATH naar CUBIC-BEZIER POINTS-converter vinden, dus schreef ik mijn eigen implementatie van het parseren van SVG-paden naar een javascript-leesbaar formaat.

Ik zal niet dieper op dit proces ingaan, ik zal alleen zeggen dat de Engelse letter M het begin van de regel aangeeft, waarna je met de commando's s/S (gladde curveto) of c/C (curvet) kunt creëren controlepunten, en de waarden kunnen zowel absoluut als relatief zijn. En hoewel er nogal wat opdrachttypen zijn in SVG PATH (M, L, H, V, C, S, Q, T, A, Z), heb ik voor slechts drie daarvan een parser bestudeerd en gemaakt. Het resultaat van zes uur inspanning was de functie svgPathToCubicBezierPoints, die het SVG-pad omzet in een array van punten in percentage-equivalent.

Dat is waarschijnlijk alles. Als je alleen maar animaties wilt maken op basis van bewegingen op Bezier-curven, dan moet je het wiel niet opnieuw uitvinden, maar bestaande bibliotheken gebruiken zoals Raphael of .

Maar als uw geval speciale aandacht vereist of als u gewoon van het onderzoekende pad houdt, hoop ik dat mijn artikel nuttig voor u was.