Share
Le premier tutoriel de la série visait à fournir une introduction conviviale pour les débutants à la bibliothèque KUTE.js. Dans ce tutoriel, nous avons seulement animé le opacité et tournerZ propriété pour nos éléments. Dans ce tutoriel, vous allez apprendre à animer le reste des propriétés CSS à l'aide de KUTE.js..
Certaines de ces propriétés nécessiteront le chargement du plug-in CSS, tandis que d'autres pourront être animées à l'aide du moteur principal. Ces deux scénarios seront discutés séparément dans le tutoriel..
Le moteur principal KUTE.js ne peut animer que les propriétés de modèle de boîte les plus courantes: largeur, la taille, Haut, et la gauche. Vous devrez utiliser le plugin CSS pour animer presque toutes les autres propriétés du modèle de boîte. Voici un exemple qui anime la position du haut, la largeur et la hauteur de nos boîtes à partir du tutoriel précédent:
var animateTop = KUTE.allFromTo (theBoxes, top: 0, top: 100, offset: 100); var animateA = KUTE.fromTo (boxA, hauteur: 100, hauteur: 175); var animateB = KUTE.fromTo (boxB, width: 100, width: 200);
Vous avez peut-être remarqué que j'ai utilisé allFromTo () pour animer la propriété supérieure de toutes les cases. Cependant, j'ai utilisé de à() animer des boîtes individuelles. Rappelez-vous que les cases restent dans leur état final une fois l'animation terminée..
Avec l’aide du plugin CSS, vous pourrez animer marge, rembourrage, et largeur de la bordure ainsi que. Une fois que vous avez inclus le plugin dans votre projet, le reste du processus est exactement le même..
Vous pouvez animer presque toutes les propriétés de transformation mentionnées dans les spécifications à l'aide du moteur principal lui-même. Il n'est pas nécessaire de charger le plugin CSS dans ce cas.
Vous pouvez animer la traduction d'élément dans un espace 2D à l'aide de Traduire. De même, vous pouvez utiliser translateX, traduction, et traduireZ afin d’animer les éléments le long des axes respectifs. Pour le traduireZ propriété pour avoir un effet, vous devrez également définir une valeur pour le parentPerspective propriété. Voici un exemple:
Accentsconagua
var animateAll = KUTE.allFromTo (theBoxes, translateY: 0, translateY: 100, offset: 1000); var animateA = KUTE.fromTo (boxA, translateZ: 0, translateZ: 50, parentPerspective: 100, parentPerspectiveOrigin: "0% 0%"); var animateB = KUTE.fromTo (boxB, translateX: 0, translateX: -200); startButton.addEventListener ("clic", fonction () animateAll.start (); animateA.start (); animateB.start ();, false);Si vous cliquez sur le Lancer l'animation et observez l’animation de près, vous verrez que la case rouge traduit -200 dans la direction X en premier. Après cela, il revient à sa position initiale et commence à traduire dans la direction Y. La raison pour la boîte à animer translateX La première est que nous avons ajouté un délai pour la traduction animation à l'aide du décalage propriété.
Tout comme la traduction, vous pouvez également effectuer des rotations le long d’un axe spécifique à l’aide des touches tourner, rotationX, rotation, et tournerZ Propriétés. Puisque rotationX et rotation sont des rotations 3D, vous devrez utiliser le la perspective propriété pour que l'animation de rotation fonctionne comme prévu. L’exemple suivant montre comment utiliser le la perspective propriété affecte l'animation globale pour ces deux propriétés.
var animateAll = KUTE.allFromTo (theBoxes, rotation: 0, rotation: 360, offset: 1000); var animateA = KUTE.fromTo (boxA, rotationY: 0, rotationY: 180, perspective: 100); var animateB = KUTE.fromTo (boxB, rotationY: 0, rotationY: -180); startButton.addEventListener ("clic", fonction () animateAll.start (); animateA.start (); animateB.start ();, false);Dans l'exemple ci-dessus, les cases A et B commencent leur rotation le long de l'axe Y en même temps, mais l'animation résultante est très différente en raison de la la perspective propriété. Vous avez peut-être remarqué que la boîte orange n’effectue pas la rotation autour de son centre qui lui a été appliquée à l’aide de animateAll. En effet, toutes les animations ont une durée de 500 millisecondes par défaut et nous appliquons les deux animateAll et animerA sur la boîte orange en même temps.
Puisque animerA est appliqué après animateAll, son animation prime sur animateAll. Vous verrez que la rotation commune en utilisant animateAll est toujours appliqué sur la boîte orange une fois que vous avez augmenté la durée de l’animation. En d'autres termes, vous ne pouvez pas animer différentes propriétés de transformation à l'aide de plusieurs objets d'interpolation simultanément. Toutes les propriétés de transformation que vous souhaitez animer doivent être spécifiées dans un seul objet d'interpolation. L'exemple suivant devrait préciser:
// Cela ne fonctionnera pas comme prévu var translateAll = KUTE.allFromTo (theBoxes, translateY: 0, translateY: 100, offset: 1000); var rotateAll = KUTE.allFromTo (theBoxes, rotation: 0, rotation: 360, offset: 1000); startButton.addEventListener ("click", function () translateAll.start (); rotateAll.start ();, false); // Cela fonctionnera comme prévu var rtAll = KUTE.allFromTo (theBoxes, translationY: 0, rotation: 0, translateY: 100, rotation: 360, offset: 1000); startButton.addEventListener ("click", function () rtAll.start ();, false);Comme je l'ai mentionné précédemment, toutes les propriétés CSS ne peuvent pas être animées à l'aide du seul moteur KUTE.js. Vous devez utiliser un plugin CSS supplémentaire pour animer des propriétés telles que le remplissage, la marge, la position de l’arrière-plan des images et d’autres propriétés liées aux bordures. Donc, avant d'essayer l'un des exemples de cette section, vous devez inclure le plugin dans votre projet..
Une fois que vous avez inclus le plugin, vous pourrez animer le rayon de la frontière propriété utilisant borderRadius. Vous pouvez également animer tout le coin rayon de la frontière valeurs individuellement en utilisant borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, et borderBottomRightRadius. Voici un exemple qui montre l'animation en action.
Si vous cliquez sur le Lancer l'animation bouton, vous remarquerez que le bord de la bordure en haut à gauche de la boîte rouge et jaune est animé après un délai. C'est à cause de la décalage propriété. Les autres rayons sont animés dès que vous cliquez sur le bouton. L'exemple ci-dessus a été créé à l'aide du code suivant:
var animateAll = KUTE.allFromTo (theBoxes, borderTopLeftRadius: '0%', borderTopLeftRadius: '100%', offset: 1000); var animateA = KUTE.fromTo (boxA, borderTopRightRadius: '0%', borderTopRightRadius: '100%'); var animateB = KUTE.fromTo (boxB, borderBottomLeftRadius: '0%', borderBottomLeftRadius: '100%'); var animateC = KUTE.fromTo (boxC, borderBottomRightRadius: '0%', borderBottomRightRadius: '100%'); startButton.addEventListener ("click", function () animateAll.start (); animateA.start (); animateB.start (); animateC.start ();, false);Nous n'avons pas enchaîné les objets d'interpolation, donc toutes les animations commencent en même temps cette fois. Vous pouvez également animer la couleur de différentes bordures de la même manière en utilisant couleur de la bordure, borderTopColor, borderLeftColor, borderBottomColor, et borderRightColor.
Dans ce didacticiel, nous avons découvert différentes propriétés CSS pouvant être animées avec et sans l’utilisation du plugin KUTE.js CSS. Si vous avez des questions, s'il vous plaît laissez-moi savoir dans les commentaires.
Le prochain tutoriel couvrira différentes animations pouvant être créées à l'aide du plugin KUTE.js SVG.
