Share
Tot nu toe in deze serie, heb je geleerd hoe je de CSS-eigenschappen van verschillende elementen kunt animeren, hoe je verschillende SVG-gerelateerde animaties kunt maken en hoe je de tekstinhoud van verschillende elementen op een webpagina kunt animeren. Er is nog een manier waarop je de elementen op een webpagina kunt animeren met KUTE.js, en dat is door de waarden van verschillende attributen te veranderen. Dit vereist dat u de attributen-plugin in uw project opneemt.
In deze zelfstudie leert u hoe u de invoegtoepassing attributen gebruikt om de waarde van verschillende soorten kenmerken in KUTE.js. te animeren. We bespreken ook verschillende easing-functies die u kunt gebruiken om het tempo van verschillende animaties te regelen.
Objecten in het echte leven bewegen zelden lineair. Ze versnellen of vertragen. Zelfs de versnelling en vertraging komen in verschillende grootten voor. Tot nu toe zijn al onze animaties lineair verlopen. Dit voelt helemaal niet natuurlijk aan. In deze sectie leert u over alle easing-functies die KUTE.js biedt voor het regelen van het tempo van verschillende animaties.
De kernversnellingsfuncties in de bibliotheek zijn direct in de kernmotor inbegrepen. Laten we zeggen dat je de QuadraticInOut versoepelen tot een animatie. Dit kan op twee manieren worden bereikt:
easing: KUTE.Easing.easingQuadraticInOut // OF easing: 'easingQuadraticInOut'
Elk van de easing-functies heeft een unieke curve die bepaalt hoe de elementen tijdens de animatie zullen versnellen. EEN sinusvormige curve impliceert lineaire versnelling. Houd er rekening mee dat dit verschilt van het lineair versoepelfunctie. De lineair functie impliceert een lineaire animatiesnelheid, terwijl een sinusoïdale curve een lineaire versnellingssnelheid voor de animatie impliceert. Met andere woorden, de snelheid van de animatie wordt lineair verhoogd of verlaagd. evenzo, vierkant impliceert versnelling met een kracht van twee, kubiek impliceert een macht van drie, quartic impliceert een macht van vier, en Vijfdegraadsvergelijking impliceert een kracht van vijf. Er zijn ook circulaire en exponentiële versoepelende functies.
U kunt toevoegen In, Uit, of In uit naar een van de versnellingsfuncties. De waarde In impliceert dat de animatie erg langzaam begint en tot het einde blijft versnellen. De waarde Uit impliceert dat de animatie met de maximale snelheid begint en dan langzaam vertraagt totdat deze aan het einde stopt. De waarde In uit betekent dat de animatie aan het begin sneller gaat en aan het eind langzamer wordt.
Je kan ook gebruiken stuiteren en elastisch functies in uw animaties verlichten en toevoegen In, Uit, of In uit voor een van hen. In de volgende demo heb ik al deze easing-functies in verschillende kringen toegepast, zodat je kunt zien hoe deze het tempo van de animatie beïnvloeden.
Het is mogelijk dat geen van de kernversnellingsfuncties het animatietempo biedt dat u zoekt. In dergelijke gevallen kunt u de Cubic Bezier-functies opnemen in uw project vanuit de tak met experimenten en deze easing-functies gaan gebruiken.
Op dezelfde manier biedt KUTE.js ook een aantal physics-gebaseerde easing-functies geïmporteerd uit de Dynamics.js-bibliotheek. U kunt meer lezen over al deze easing-functies en hoe u deze op de easing-functiepagina van de bibliotheek kunt gebruiken.
Attributen in SVG kunnen zowel getallen als reeksen als hun waarde accepteren. De tekenreeksen kunnen kleurwaarden of getallen zijn met het achtervoegsel van een eenheid zoals px, em, of %. De namen van de attributen zelf kunnen ook uit twee woorden bestaan, verbonden door een koppelteken. Met het oog op deze verschillen biedt KUTE.js ons verschillende methoden die kunnen worden gebruikt om de waarden van verschillende kenmerken te specificeren.
Accentsconagua
var tween = KUTE.to ('selector', attr: 'r': 100); var tween = KUTE.to ('selector', attr: 'r': '10% '); var tween = KUTE.to ('selector', attr: 'stroke-width': 10); var tween = KUTE.to ('selector', attr: strokeWidth: 10);Zoals je kunt zien, moeten suffix-waarden tussen aanhalingstekens worden geplaatst. Evenzo moeten attributen die een koppelteken in hun naam bevatten, worden ingesloten in aanhalingstekens of worden gespecificeerd in camelCase-vorm.
Veel attributen accepteren eenheidsloze waarden. Bijvoorbeeld de streekbreedte van een pad kan een eenheidloos zijn. Op dezelfde manier hoeft u geen eenheid op te geven voor de r, cx, en cy attributen van een cirkelelement. Je kunt al deze attributen van de ene naar de andere waarde animeren met behulp van de plug-in attributen.
Nu u weet hoe u verschillende easing-functies moet gebruiken, kunt u verschillende kenmerken met verschillende snelheden animeren. Hier is een voorbeeld:
var radiusAnimation = KUTE.allTo ("circle", attr: r: 75, repeat: 1, yoyo: true, offset: 1000, easing: 'easingCubicIn'); var centerxAnimationA = KUTE.to ("# circle-a", attr: cx: 500, repeat: 1, yoyo: true, easing: 'easingCubicInOut',); var centerxAnimationB = KUTE.to ("# circle-b", attr: cx: 100, repeat: 1, yoyo: true, easing: 'easingCubicInOut'); var centeryAnimation = KUTE.allTo ("circle", attr: cy: 300, repeat: 1, yoyo: true, offset: 1000, easing: 'easingCubicOut');De eerste tween animeert de straal van beide cirkels tegelijk met de allen naar() methode die we in de eerste zelfstudie hebben besproken. Indien ingesteld op waar, de yoyo attribuut speelt de animatie in omgekeerde richting af.
De cx kenmerk van beide cirkels wordt afzonderlijk geanimeerd. Ze worden echter allebei geactiveerd door dezelfde klik op de knop. eindelijk, de cy kenmerk van beide cirkels wordt meteen geanimeerd met een compenseren van 1000 milliseconden.
Vanaf versie 1.5.7 kunt u met de kenmerkplug-in in KUTE.js de animatie ook animeren vullen, beroerte, en stopkleur attributen. U kunt geldige kleurnamen of hex-waarden gebruiken voor de kleuren. U kunt ook de kleurwaarden in RGB- of HSL-indeling opgeven.
Een belangrijk ding dat u in gedachten moet houden is dat de animaties alleen lijken te werken als u de waarde van deze eigenschappen niet in CSS instelt. In de volgende demo, de vullen kleur zou helemaal niet geanimeerd zijn als ik de volgende CSS in onze demo had toegevoegd.
rect fill: brown;
De demo die ik heb gemaakt is erg eenvoudig, maar je kunt het interessanter maken door transformaties toe te passen en meer kleuren te gebruiken.
Veel SVG-attributen zoals r en streekbreedte kan werken met en zonder achtervoegsels. U kunt bijvoorbeeld de waarde van instellen r om een getal zoals 10 te zijn of in termen van em-eenheden zoals 10em. Er zijn enkele attributen zoals compenseren kenmerk voor kleurenstops waarvoor u altijd een achtervoegsel moet toevoegen. Terwijl u een waarde opgeeft voor suffixed attributes in KUTE.js, zorg er altijd voor dat u de waarde tussen aanhalingstekens plaatst.
In het volgende voorbeeld heb ik de offsetwaarde van de eerste stop in een verloop en de kleur van de tweede stop geanimeerd. Sinds compenseren vereist een achtervoegsel, ik heb de waarde tussen aanhalingstekens ingesloten.
var offsetAnimation = KUTE.allTo (".stop1", attr: offset: '90% ', repeat: 1, offset: 1000, yoyo: true, easing:' easingCubicIn '); var colorAnimation = KUTE.allTo (".stop2", attr: stopColor: 'black', repeat: 1, offset: 1000, yoyo: true, easing: 'easingCubicIn'); var scaleAnimation = KUTE.allTo ("circle", svgTransform: scale: 2, repeat: 1, offset: 1000, yoyo: true, easing: 'easingCubicIn');Er zijn drie verschillende gradiënten in de demo en elk van deze verlopen heeft twee kleurstops met de klassenamen stop1 en stop2. Ik heb ook een schaaltransformatie toegepast met behulp van de svgTransform kenmerk, dat we hebben besproken in de derde zelfstudie van de serie.
In deze tutorial leer je over verschillende easing-functies die beschikbaar zijn in KUTE.js en hoe je ze kunt gebruiken om het tempo van je eigen animaties te bepalen. Je hebt ook geleerd hoe je verschillende soorten attributen kunt animeren.
Ik heb geprobeerd om alle belangrijke aspecten van KUTE.js in deze serie te behandelen. Dit zou genoeg moeten zijn om u te helpen KUTE.js met vertrouwen te gebruiken in uw eigen projecten. U kunt ook de documentatie lezen om meer over de bibliotheek te weten te komen.
Ik zou ook aanraden dat je de broncode doorloopt en ziet hoe de bibliotheek echt werkt. Als je vragen of tips hebt over deze tutorial, kun je deze in de reacties delen.
