Share
Jusqu'à présent dans cette série, vous avez appris à animer les propriétés CSS de différents éléments, à créer différentes animations relatives à SVG et à animer le contenu textuel de différents éléments sur une page Web. KUTE.js vous permet d’animer les éléments d’une page Web d’une autre manière: en modifiant les valeurs de différents attributs. Cela nécessite que vous incluiez le plugin d'attributs dans votre projet.
Dans ce tutoriel, vous allez apprendre à utiliser le plug-in d'attributs pour animer la valeur de différents types d'attributs dans KUTE.js. Nous aborderons également différentes fonctions d’accélération que vous pouvez utiliser pour contrôler le rythme de différentes animations..
Les objets dans la vie réelle se déplacent très rarement de manière linéaire. Ils accélèrent ou décélèrent. Même l'accélération et la décélération se produisent à des amplitudes différentes. Jusqu'ici, toutes nos animations ont progressé linéairement. Cela ne semble pas naturel du tout. Dans cette section, vous découvrirez toutes les fonctions d’assouplissement que KUTE.js fournit pour contrôler le rythme de différentes animations..
Les fonctions principales d’assouplissement de la bibliothèque sont incluses dans le moteur principal. Disons que vous voulez appliquer le QuadraticInOut assouplissement à une animation. Ceci peut être réalisé de deux manières:
easing: KUTE.Easing.easingQuadraticInOut // OU atténuation: 'easingQuadraticInOut'
Chacune des fonctions d'accélération possède une courbe unique qui détermine la manière dont les éléments vont accélérer pendant l'animation. UNE sinusoïdal courbe implique une accélération linéaire. Gardez à l’esprit que c’est différent du linéaire fonction d'accélération. le linéaire fonction implique une vitesse d'animation linéaire, tandis qu'une courbe sinusoïdale implique une vitesse d'accélération linéaire pour l'animation. En d'autres termes, la vitesse de l'animation augmentera ou diminuera de manière linéaire. De même, quadratique implique une accélération avec une puissance de deux, cubique implique une puissance de trois, quart implique un pouvoir de quatre, et quintic implique un pouvoir de cinq. Il y a aussi circulaire et exponentiel fonctions d'assouplissement.
Vous pouvez annexer Dans, En dehors, ou InOut à l'une des fonctions d'assouplissement. La valeur Dans implique que l’animation commence très lentement et continue à accélérer jusqu’à la fin. La valeur En dehors implique que l’animation commence à la vitesse maximale puis décélère lentement jusqu’à ce qu’elle s’arrête à la fin. La valeur InOut signifie que l'animation va accélérer au début et ralentir à la fin.
Vous pouvez aussi utiliser rebondir et élastique allégement des fonctions dans vos animations et ajout Dans, En dehors, ou InOut à l'un d'eux. Dans la démo suivante, j'ai appliqué toutes ces fonctions d'accélération sur différents cercles afin que vous puissiez voir comment elles affectent le rythme de l'animation..
Il est possible qu'aucune des fonctions d'accélération principales ne fournisse le rythme d'animation que vous recherchez. Dans de tels cas, vous pouvez inclure les fonctions Cubic Bezier dans votre projet à partir de la branche Experiences et commencer à utiliser ces fonctions d'accélération..
De même, KUTE.js fournit également des fonctions d’accélération basées sur la physique et importées de la bibliothèque Dynamics.js. Vous pouvez en savoir plus sur toutes ces fonctions d’accélération et sur la façon de les utiliser correctement sur la page correspondante de la bibliothèque..
Les attributs en SVG peuvent accepter des nombres ainsi que des chaînes comme valeur. Les chaînes peuvent être des valeurs de couleurs ou des nombres suffixés avec une unité comme px, em, ou %. Les noms des attributs eux-mêmes peuvent également consister en deux mots reliés par un trait d'union. Tenant compte de ces différences, KUTE.js nous fournit différentes méthodes pouvant être utilisées pour spécifier les valeurs de différents attributs..
Accentsconagua
var tween = KUTE.to ('sélecteur', attr: 'r': 100); var tween = KUTE.to ('sélecteur', attr: 'r': '10% '); var tween = KUTE.to ('sélecteur', attr: 'stroke-width': 10); var tween = KUTE.to ('sélecteur', attr: strokeWidth: 10);Comme vous pouvez le constater, les valeurs suffixées doivent être placées entre guillemets. De même, les attributs contenant un trait d'union dans leur nom doivent être placés entre guillemets ou spécifiés sous la forme camelCase.
Beaucoup d'attributs acceptent les valeurs sans unité. Par exemple, le largeur du trait d'un chemin pourrait être sans unité. De même, vous n'avez pas à spécifier une unité pour le r, cx, et cy attributs d'un élément de cercle. Vous pouvez animer tous ces attributs d'une valeur à une autre en utilisant le plugin d'attributs.
Maintenant que vous savez utiliser différentes fonctions d'accélération, vous pourrez animer différents attributs à des rythmes différents. Voici un exemple:
var radiusAnimation = KUTE.allTo ("circle", attr: r: 75, repeat: 1, yoyo: true, offset: 1000, easing: 'easingCubicIn'); var centerxAnimationA = KUTE.to ("# cercle-a", attr: cx: 500, répétition: 1, yoyo: vrai, easing: 'easingCubicInOut',); var centerxAnimationB = KUTE.to ("# cercle-b", attr: cx: 100, répétition: 1, yoyo: vrai, easing: 'easingCubicInOut'); var centeryAnimation = KUTE.allTo ("circle", attr: cy: 300, repeat: 1, yoyo: true, offset: 1000, easing: 'easingCubicOut');La première interpolation anime le rayon des deux cercles à la fois à l'aide de la touche touspour () méthode, nous avons discuté dans le premier tutoriel. Si réglé à vrai, la yo-yo attribut joue l'animation en sens inverse.
le cx L'attribut des deux cercles est animé individuellement. Cependant, ils sont tous deux déclenchés par le même clic de bouton. Finalement, le cy L’attribut des deux cercles est animé à la fois par un décalage de 1000 millisecondes.
À partir de la version 1.5.7, le plug-in d'attribut de KUTE.js vous permet également d'animer le remplir, accident vasculaire cérébral, et stopColor les attributs. Vous pouvez utiliser des noms de couleurs valides ou des valeurs hexadécimales pour les couleurs. Vous pouvez également fournir les valeurs de couleur au format RVB ou HSL.
Il est important de garder à l’esprit que les animations ne fonctionneront que si vous ne définissez pas la valeur de ces propriétés en CSS. Dans la démo suivante, le remplir la couleur n'aurait pas du tout été animée si j'avais ajouté le CSS suivant dans notre démo.
rect remplissage: marron;
La démo que j'ai créée est très basique, mais vous pouvez la rendre plus intéressante en appliquant des transformations et en utilisant plus de couleurs..
Beaucoup d'attributs SVG comme r et largeur du trait peut travailler avec et sans suffixes. Par exemple, vous pouvez définir la valeur de r être un nombre comme 10 ou en termes d'unités comme 10em. Il y a quelques attributs comme décalage attribut pour les arrêts de couleur qui nécessitent toujours l’ajout d’un suffixe. Lorsque vous spécifiez une valeur pour les attributs avec suffixe dans KUTE.js, veillez toujours à placer la valeur entre guillemets..
Dans l'exemple suivant, j'ai animé la valeur de décalage du premier arrêt dans un dégradé et la couleur du deuxième arrêt. Puisque décalage nécessite un suffixe, j'ai joint la valeur entre guillemets.
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');Il y a trois gradients différents dans la démo et chacun de ces gradients a deux arrêts de couleur avec les noms de classe. stop1 et stop2. J'ai également appliqué une transformation d'échelle à l'aide du svgTransform attribut, que nous avons discuté dans le troisième tutoriel de la série.
Dans ce didacticiel, vous avez découvert différentes fonctions d’accélération disponibles dans KUTE.js et comment les utiliser pour contrôler le rythme de vos propres animations. Vous avez également appris à animer différents types d'attributs.
J'ai essayé de couvrir tous les aspects importants de KUTE.js de cette série. Cela devrait être suffisant pour vous aider à utiliser KUTE.js avec confiance dans vos propres projets. Vous pouvez également lire la documentation pour en savoir plus sur la bibliothèque..
Je vous recommanderais également de consulter le code source et de voir comment fonctionne réellement la bibliothèque. Si vous avez des questions ou des conseils en rapport avec ce didacticiel, n'hésitez pas à les partager dans les commentaires..
