Share
Animatie, mits zorgvuldig toegepast, kan website-interfaces en uiteindelijk de gebruikerservaring van een website verbeteren. In deze zelfstudie gaan we kijken naar VelocityJS, een JavaScript-animatiemachine voor snelle uitvoering van animaties. VelocityJS is een van mijn voorkeuren geworden bij het omgaan met animatie op het web, naar mijn mening zijn de redenen:
Accentsconagua
RunSequence is een methode in VelocityJS die we kunnen gebruiken om stapels opeenvolgende animaties uit te voeren. Het is een meer elegante benadering dan het koppelen van animatiefuncties, zoals in jQuery. Dit alleen met CSS doen is onpraktisch.In deze tutorial doorlopen we de essentie voor het uitvoeren van animaties met VelocityJS. We zullen ook enkele functies benadrukken die ons UI-ontwerp kunnen verbeteren. Laten we beginnen!
Met jQuery, ervan uitgaande dat we een dia willen laten glijden div aan de rechterkant zouden we iets schrijven als:
$ ("div"). animeren (left: "500px",, duration: 3000, easing: "linear"); Op vrijwel dezelfde manier zouden we het zo schrijven met VelocityJS:
$ ("div"). velocity (left: "500px",, duration: 3000, easing: "linear"); Beide voorbeelden verplaatsen de div door 500px naar rechts gedurende drie seconden door het element te observeren links eigendom. Het zichtbare verschil in de syntaxis is het gebruik van de methode om het element te animeren, VelocityJS gebruikt .snelheid() in plaats van jQuery's .animeren ().
U kunt ook het prestatieverschil opmerken. jQuery-animatie voelt soms nogal wankel, terwijl VelocityJS van begin tot eind als boter loopt. Geef het een kans:
VelocityJS accepteert een aantal CSS-eigenschappen evenals hun versie met lange hand om het element te manipuleren. We kunnen deze eigenschappen samen gebruiken in één VelocityJS-instantie om geavanceerde animaties uit te voeren. Bijvoorbeeld:
$ ("div"). velocity (borderRadius: "25px", width: "45px", paddingLeft: "0", paddingRight: "0", backgroundColor: "# 8CC152", color: "#fff", borderColor: "# 8CC152", boxShadowX: "0", boxShadowY: "0", duration: 350, easing: "easeInQuad"); In dit tweede voorbeeld hebben we de div met verschillende CSS-eigenschappen, waaronder breedte om het kleiner te maken, Achtergrond kleur, vulling, box-shadow, en border-radius om het in een cirkel te veranderen.
Merk op dat de eigenschappen van twee of meer woorden zijn opgemaakt camelCase formaat, volgens JavaScript-naamgevingsconventie, vandaar border-radius wordt borderRadius enzovoorts. We versnellen ook de duur tot slechts 350 milliseconden en deze keer kiezen we voor easeInQuad omdat VelocityJS de versnel-ling van jQuery UI ingebouwd heeft.
jQuery biedt een paar methoden voor het uitvoeren van algemene animaties, zoals .slideUp () en .Fadeout (), waardoor elementen geleidelijk verdwijnen. Dus het komt niet als een verrassing dat VelocityJS dat ook doet. VelocityJS biedt een paar snelkoppelingen om over te gaan naar een .VelocityJS () aanleg.
We zouden het volgende schrijven om een element omhoog te schuiven om de inhoud te verbergen:
$ ("div"). velocity ("slideUp", duration: 350); Om het te laten verdwijnen, zouden we schrijven:
$ ("div"). velocity ("fadeOut", duration: 350); VelocityJS biedt ook een snelkoppeling genaamd rol wat handig zou kunnen zijn voor het maken van links die naar een bepaald gedeelte op de pagina leiden. De volgende code gaat ervan uit dat we de link willen, #omhoog gaan, om terug te bladeren naar de bovenkant van de pagina wanneer erop wordt geklikt.
var $ up = $ ("# go-up"); $ up.on ("klik", functie () $ ("body"). velocity ("scroll", duration: 2000, easing: "easeInBack");); Dit is hoe dat eruit zou kunnen zien:
Een andere handige snelkoppeling opgenomen komt in de vorm van omgekeerde. Met deze snelkoppeling kunnen we het element terugzetten naar de oorspronkelijke staat zodra de animatie is voltooid. We kunnen het vorige voorbeeld van scrollen toepassen omgekeerde om de pijlpictogrammen te verbeteren. Om dit te doen, ketenen we een nieuw VelocityJS-exemplaar met omgekeerde toegevoegd, het instellen van lus optie om waar.
$ (". icon"). velocity (translateY: "10px", loop: true). velocity ("reverse"); Hierdoor wordt het pictogram naar beneden verplaatst 10px dan onmiddellijk terug naar zijn oorspronkelijke positie. Zoals we ook hebben ingesteld lus optie om waar de animatie zal voor onbepaalde tijd worden uitgevoerd.
Meer animatie-effecten zijn beschikbaar in UI-pakket. Het UI-pakket is beschikbaar als een plug-in, los van de VelocityJS-kern. Zodra je het hebt opgenomen, heb je toegang tot een reeks andere effecten slideUp, fadeout, en rol openstellen van nog groter potentieel voor het bouwen van levendige interfaces.
UI-pakket brengt ook twee nieuwe opties: wankelen en slepen. De wankelen stelt ons in staat om een enkel effect uit te voeren, toegepast op een reeks elementen sequentieel in plaats van tegelijkertijd. De slepen optie geeft, wanneer ingesteld op waar, een idee van slepen voor het laatste element in de array.
Als voorbeeld heb ik een navigatiebalk met een paar menu's gemaakt, waarvan er één een submenu heeft. Om het submenu boeiender te maken, heb ik twee effecten uit de gebruikersinterface toegepast met de wankelen optie ingesteld.
Op een gegeven moment moeten we mogelijk verschillende animaties op verschillende elementen uitvoeren. Om dit te doen, moeten we elke VelocityJS-instantie in de volgende volgorde plaatsen, bijvoorbeeld:
$ ("# offcanvas"). velocity (translateX: 0, duration: 300,, function () $ (". widgets"). VelocityJS (translateX: 0, opacity: 0, duration: 300,, function () $ ("# close"). VelocityJS (translateY: 0, rotateZ: 0, duration: 150););); De bovenstaande functie voert eerst de animatie uit van de $ lichaam, dan $ nav zodra het is voltooid, en ten slotte de $ menu. Helaas is dit geen elegante benadering, noch ideaal. Als je tientallen animaties hebt, zou de code onpraktisch zijn om te beheren.
Naast animatie-effecten wordt het UI-pakket echter geleverd met een methode RunSequence. Dit is precies ontworpen om onze sequencingproblemen op te lossen; om animaties netjes te stapelen en ze in hun relevante volgorde uit te voeren. Als we de bovenstaande code gebruiken, kunnen we deze herschrijven als een JavaScript-object met het geselecteerde element dat is gedefinieerd in een e eigenschap, de CSS-eigenschappen die worden vermeld in a p eigenschap, terwijl de animatieopties zijn ingesteld in de O eigendom.
var animationSequence = [e: $ ("# offcanvas"), p: translateX: 0, o: duration: 300, e: $ (". widget"), p: translateX: 0, opacity: 0, o: duur: 300, e: $ ("# close"), p: translateY: 0, rotateZ: 0, o: duration: 150]; $ .Velocity.RunSequence (animationSequence); Ik heb de bovenstaande code uitgebreid naar een functionerende indeling buiten het canvas. Geef het geleden en bekijk het JavaScript-tabblad om de volledige broncode te zien.fffffff
Ik vind VelocityJS een beter alternatief voor jQuery- en CSS-animatie, met name als het gaat om het bouwen van interactieve interfaces met meerdere animaties. VelocityJS is gemakkelijk te gebruiken, boordevol vooraf gebouwde animaties en vooral snel. Gebruik het op verantwoorde wijze. Zoals vaak wordt gezegd: met geweldige functies komt grote verantwoordelijkheid.
