Créez une animation basée sur JavaScript à l'aide de la bibliothèque Anime.js. Partie 1

Nœuds DOM ou NodeList : vous pouvez également utiliser un nœud DOM ou NodeList comme valeur pour le mot-clé cibles. Regardez un exemple d'utilisation d'un nœud DOM pour les cibles.

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

Dans le premier cas, la fonction getElementById() était utilisée pour accéder à un élément spécifique. La fonction querySelector() a été utilisée pour accéder à un élément avec la classe blue . Et la fonction querySelectorAll() a été utilisée pour accéder à tous les éléments du document qui correspondent à un groupe de sélecteurs spécifiques ou, à l'inverse, n'y sont pas inclus.

Il existe de nombreuses fonctions que vous pouvez également utiliser pour sélectionner l'élément cible. Par exemple, vous pouvez accéder aux éléments d'une classe spécifique à l'aide de la fonction getElementsByClassName(). Ou aux éléments avec une balise spécifique en utilisant la fonction getElementsByTagName().

Toute fonction qui renvoie un nœud DOM ou NodeList peut être utilisée pour définir la valeur des cibles dans Anime.js.

Objet : vous pouvez utiliser des objets JavaScript comme valeur pour les cibles. La clé de cet objet est utilisée comme identifiant, et la valeur est utilisée comme numéro à animer.

Vous pouvez ensuite afficher l'animation dans un autre élément HTML à l'aide de code JavaScript supplémentaire. Vous trouverez ci-dessous un exemple d'animation des valeurs de deux clés différentes du même objet.

Var filesScanned = (nombre : 0, infecté : 0) ; var scanning = anime(( cibles : filesScanned, nombre : 1000, infecté : 8, round : 1, mise à jour : function() ( var scanCount = document.querySelector(".scan-count"); scanCount.innerHTML = filesScanned.count ; var infectéCount = document.querySelector(".infected-count"); infectéCount.innerHTML = filesScanned.infected; ) ));

Le code ci-dessus fera passer le compteur de fichiers analysés de 0 à 1 000 et le compteur de fichiers infectés de 0 à 8. N'oubliez pas que vous ne pouvez animer des valeurs numériques de cette façon. Si vous essayez d'animer une clé de AAA à BOY, un message d'erreur s'affichera.

De plus, le code utilisait une fonction de rappel de clé de mise à jour qui est appelée à chaque image pendant l'animation. Ici, il a été utilisé pour mettre à jour le nombre de fichiers analysés et infectés. Cependant, vous pouvez aller plus loin et afficher un message d'erreur aux utilisateurs lorsque le nombre de fichiers infectés dépasse un certain seuil.

Tableau : la possibilité de spécifier un tableau JavaScript comme valeur cible est utile si vous devez animer de nombreux éléments appartenant à différentes catégories. Par exemple, si vous souhaitez animer un nœud DOM, un objet et divers autres éléments basés sur des sélecteurs CSS, vous pouvez le faire en les plaçant dans un tableau, puis en définissant le tableau comme valeur pour target . L'exemple ci-dessous devrait rendre les choses plus claires.

Var multipleAnimations = anime(( cibles : , traduireY : 250 ));

Quelles propriétés peuvent être animées à l'aide d'Anime.js

Vous savez désormais identifier les différents éléments à animer. Il est temps de découvrir quelles propriétés et attributs peuvent être animés à l'aide de la bibliothèque.

Propriétés CSS

Ceux-ci incluent, par exemple, la largeur, la hauteur et la couleur de différents éléments cibles. Les valeurs finales de diverses propriétés animées comme background-color sont déterminées à l'aide de lowerCamelCase. Ainsi, background-color devient backgroundColor . Le code ci-dessous illustre l'animation de la position de l'objet de gauche et de la couleur d'arrière-plan (backgroundColor) de l'objet cible.

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

Les propriétés peuvent prendre différents types de valeurs qu'elles prendraient en utilisant du CSS classique. Par exemple, la propriété left peut avoir les valeurs suivantes : 50vh , 500px ou 25em . Vous pouvez également omettre l'unité de mesure après le nombre, mais dans ce cas elle deviendra px par défaut. Vous pouvez faire la même chose avec background-color , en spécifiant la couleur sous forme de valeur hexadécimale ou en utilisant du code RVB ou HSL.

Transformation CSS

La transformation le long des axes X et Y est réalisée à l'aide des propriétés TranslateX et TranslateY. De même, vous pouvez mettre à l'échelle, incliner ou faire pivoter un élément le long d'un axe spécifique à l'aide des propriétés d'échelle, d'inclinaison ou de rotation appropriées à cet axe spécifique.

Il est possible de définir différents angles soit en degrés, soit en utilisant la propriété turn. Une valeur de virage de 1 correspond à 360 degrés. Cela facilite les calculs car vous savez de combien faire pivoter les éléments par rapport à leur axe. L'exemple ci-dessous montre comment animer la mise à l'échelle, la transition ou la rotation d'une seule propriété ou de toutes à la fois.

Var animateScaling = anime(( cibles : ".square", échelle : 0,8 )); var animateTranslation = anime(( cibles : ".square", traduireX : window.innerWidth*0.8 )); var animateRotation = anime(( cibles : ".square", rotation : "1 tour" )); var animateAll = anime(( cibles : ".square", échelle : 0,8, translationX : window.innerWidth*0.8, rotation : "1turn" ));

Attributs SVG

La seule condition est que la valeur de l'attribut soit numérique. La possibilité d'animer différents attributs ouvre la possibilité de créer des effets sympas. Cet article étant uniquement à titre informatif, il contiendra des exemples simples.

En approfondissant la bibliothèque, vous apprendrez comment des animations plus complexes sont créées. Vous trouverez ci-dessous le code pour animer les attributs du cercle cy , cx et Stroke-width . Comme pour les autres propriétés CSS, la largeur de trait doit utiliser CamelCase pour que le code fonctionne correctement.

Var animateX = anime(( cibles : ".circle", cx : window.innerWidth*0.6 )); var animateStrokeWidth = anime(( cibles : ".circle", StrokeWidth : "25" ));

Attributs DOM

Vous pouvez animer des attributs DOM numériques, de la même manière que vous avez animé des attributs SVG. Cela peut être utile pour travailler avec l'élément progress en HTML5. Il a deux attributs : value et max . L'exemple ci-dessous animera l'attribut value pour montrer la progression du déplacement d'un fichier vers le disque dur.

Var animateProgress = anime(( cibles : "progress", valeur : 100, assouplissement : "linéaire" ));

Conclusion

Vous avez découvert toutes les options de sélection d'éléments dans Anime.js et vous avez également appris à animer différentes propriétés CSS et les attributs qui leur sont associés.

Dans le prochain article, vous apprendrez comment contrôler la fluidité, le délai et la durée des animations pour les propriétés uniques et les groupes. Ensuite, vous apprendrez à contrôler tous ces paramètres pour chaque élément individuel.

Vous ne pouvez pas participer au #ChromeDevSummit cette année ? Regardez tout le contenu (et plus encore !) sur la diffusion en direct ou rejoignez vos pairs pour un événement CDS Extended dans un lieu hébergé à proximité. Pour en savoir plus, consultez le site Web Chrome Dev Summit 2019.

Animations CSS et JavaScript

Paul est un défenseur du design et de la performance

Évangélise Chrome et le Web mobile au sein de l'équipe Developer Relations de Google.

Il existe deux manières principales de créer des animations sur le Web : avec CSS et avec JavaScript. Celui que vous choisissez dépend vraiment des autres dépendances de votre projet et des types d'effets que vous essayez d'obtenir.

TL;DR

• Utilisez des animations CSS pour des transitions « one-shot » plus simples, comme basculer les états des éléments de l'interface utilisateur.
• Utilisez des animations JavaScript lorsque vous souhaitez obtenir des effets avancés tels que le rebond, l'arrêt, la pause, le rembobinage ou le ralentissement.
• Si vous choisissez d'animer avec JavaScript, utilisez l'API Web Animations ou un framework moderne avec lequel vous êtes à l'aise.

La plupart des animations de base peuvent être créées avec CSS ou JavaScript, mais la quantité d'effort et de temps diffère (voir également Performances CSS vs JavaScript). Chacun a ses avantages et ses inconvénients, mais voici de bonnes lignes directrices :

• Utilisez CSS lorsque vous disposez d’états plus petits et autonomes pour les éléments de l’interface utilisateur. Les transitions et animations CSS sont idéales pour afficher un menu de navigation sur le côté ou afficher une info-bulle. Vous finirez peut-être par utiliser JavaScript pour contrôler les états, mais les animations elles-mêmes seront dans votre CSS.
• Utilisez JavaScript lorsque vous avez besoin d'un contrôle important sur vos animations. L'API Web Animations est une approche basée sur des standards, disponible aujourd'hui dans la plupart des navigateurs modernes. Cela fournit des objets réels, idéaux pour les applications complexes orientées objet. JavaScript est également utile lorsque vous devez arrêter, mettre en pause, ralentir ou inverser vos animations.
• Utilisez requestAnimationFrame directement lorsque vous souhaitez orchestrer manuellement une scène entière. Il s'agit d'une approche JavaScript avancée, mais elle peut être utile si vous créez un jeu ou si vous dessinez sur un canevas HTML.

Alternativement, si vous utilisez déjà un framework JavaScript qui inclut des fonctionnalités d'animation, comme via la méthode .animate() de jQuery ou TweenMax de GreenSock, vous trouverez peut-être globalement plus pratique de vous en tenir à cela pour vos animations.

Animer avec CSS

Animer avec CSS est le moyen le plus simple de faire bouger quelque chose à l’écran. Cette approche est décrite comme déclaratif, parce que vous spécifiez ce que vous aimeriez qu'il se passe.

Vous trouverez ci-dessous du CSS qui déplace un élément de 100 pixels sur les axes X et Y. Cela se fait en utilisant une transition CSS définie pour prendre 500 ms. Lorsque la classe de déplacement est ajoutée, la valeur de transformation est modifiée et la transition commence.

Boîte ( transformer : traduire (0, 0); transition : transformer 500 ms ; ) .box.move ( transformer : traduire (100px, 100px); )

Outre la durée de la transition, il existe des options pour assouplissement, c'est essentiellement ce que ressent l'animation. Pour plus d’informations sur l’assouplissement, consultez le guide Les bases de l’assouplissement.

Si, comme dans l'extrait ci-dessus, vous créez des classes CSS distinctes pour gérer vos animations, vous pouvez ensuite utiliser JavaScript pour activer et désactiver chaque animation :

Box.classList.add("déplacer");

Cela offre un bon équilibre à vos applications. Vous pouvez vous concentrer sur la gestion de l'état avec JavaScript et simplement définir les classes appropriées sur les éléments cibles, laissant le navigateur gérer les animations. Si vous suivez cette voie, vous pouvez écouter les événements de fin de transition sur l'élément, mais seulement si vous pouvez renoncer à la prise en charge des anciennes versions d'Internet Explorer ; la version 10 a été la première version à prendre en charge ces événements. Tous les autres navigateurs prennent en charge l'événement depuis un certain temps.

Le JavaScript requis pour écouter la fin d'une transition ressemble à ceci :

Var box = document.querySelector(".box"); box.addEventListener("transitionend", onTransitionEnd, false); function onTransitionEnd() ( // Gère la finition de la transition. )

En plus d'utiliser des transitions CSS, vous pouvez également utiliser des animations CSS, qui vous permettent d'avoir beaucoup plus de contrôle sur les images clés, les durées et les itérations des animations individuelles.

Remarque : si vous débutez dans les animations, les images clés sont un ancien terme issu des animations dessinées à la main. Les animateurs créaient des images spécifiques pour une action, appelées images clés, qui capturaient des éléments comme la partie la plus extrême d'un mouvement, puis ils commençaient à dessiner toutes les images individuelles entre les images clés. Nous avons aujourd'hui un processus similaire avec les animations CSS, dans lequel nous indiquons au navigateur quelles valeurs les propriétés CSS doivent avoir à des moments donnés, et il comble les lacunes.

Vous pouvez, par exemple, animer la boîte de la même manière avec des transitions, mais la faire animer sans aucune interaction de l'utilisateur comme un clic et avec des répétitions infinies. Vous pouvez également modifier plusieurs propriétés en même temps :

Box ( /* Choisissez l'animation */ animation-name: movingBox; /* La durée de l'animation */ animation-duration: 1300ms; /* Le nombre de fois que nous voulons que l'animation s'exécute */ animation-iteration-count: infinite; /* Provoque l'inversion de l'animation à chaque itération impaire */ animation-direction: alternate; ) @keyframes movingBox ( 0% ( transform: translation(0, 0); opacity: 0.3; ) 25% ( opacity: 0.9; ) 50 % ( transformation : traduire(100px, 100px); opacité : 0,2; ) 100 % ( transformation : traduire(30px, 30px); opacité : 0,8; ) )

Avec les animations CSS, vous définissez l'animation elle-même indépendamment de l'élément cible et utilisez la propriété animation-name pour choisir l'animation requise.

Si vous souhaitez que vos animations CSS fonctionnent sur des navigateurs plus anciens, vous devrez ajouter des préfixes de fournisseur. De nombreux outils peuvent vous aider à créer les versions préfixées du CSS dont vous avez besoin, vous permettant d'écrire la version sans préfixe dans vos fichiers sources.

Animer avec JavaScript et l'API Web Animations

En comparaison, la création d'animations avec JavaScript est plus complexe que l'écriture de transitions ou d'animations CSS, mais elle offre généralement aux développeurs beaucoup plus de puissance. Vous pouvez utiliser l'API Web Animations pour animer des propriétés CSS spécifiques ou créer des objets d'effet composables.

Apprenez à créer des animations HTML à l'aide de JavaScript.

Page Web de base

Pour montrer comment créer des animations HTML avec JavaScript, nous utiliserons une simple page Web :

Création d'une animation de conteneur

Toutes les animations doivent être relatives à l'élément conteneur.

Éléments de style

L'élément conteneur doit être créé avec style="position:relative".

L'élément d'animation doit être créé avec style="position:absolute".

exemple

#récipient (
largeur : 400 px ;
hauteur : 400px ;
position : relative ;
fond : jaune ;
}
#animer (
largeur : 50 px ;
hauteur : 50px ;
position : absolue ;
fond : rouge ;
}

Essayez-le vous-même " Code d'animation

Les animations JavaScript sont réalisées en programmant des changements progressifs dans le style d'un élément.

Les modifications sont déclenchées à l'aide d'une minuterie. Lorsque l'intervalle de minuterie est petit, l'animation apparaît continue.

Code principal:

exemple

fonction frame() (
if (/* test pour terminé */) (
clearInterval(id);
) autre (
/* code pour changer le style de l'élément */
}
}

Création d'une animation à l'aide de JavaScriptExemple

Fonction monDéplacement() (
var elem = document.getElementById("animer");
varpos = 0 ;
var id = setInterval(frame, 5);
fonction frame() (
si (pos == 350) (
clearInterval(id);
) autre (
pos++;
elem.style.top = pos + "px" ;
elem.style.left = pos + "px";

Vous pouvez utiliser JavaScript pour créer des animations complexes, mais vous n'êtes pas limité aux éléments suivants :

• Feux d'artifice
• Effet occultant
• Réduire ou déplier.
• Aller ou quitter une page
• Mouvements d'objets

Vous pourriez être intéressé par une bibliothèque d'animation existante basée sur JavaScript : Script.Aculo.us.

Cet article fournit une compréhension de base de la façon d'utiliser JavaScript pour créer des animations.

JavaScript peut être utilisé pour déplacer plusieurs éléments DOM ( , ou tout autre élément HTML) sur les pages selon un modèle défini par une équation ou une fonction logique.

JavaScript fournit les deux fonctions suivantes qui sont souvent utilisées dans les programmes d'animation.

• setTimeout (fonction, durée) – cette fonction appelle la fonction après une durée de quelques millisecondes à partir du moment où elle a été appelée.
• setInterval (fonction, durée) – cette fonction appelle la fonction après chaque milliseconde de durée.
• clearTimeout(setTimeout_variable) – Cette fonction entraîne l'effacement de toute minuterie définie par les fonctions setTimeout().

JavaScript peut également définir plusieurs attributs d'un objet, notamment sa position sur l'écran. Vous pouvez définir l'attribut haut et à gauche de l'objet pour le placer n'importe où sur l'écran. Voici sa syntaxe.

// Définit la distance depuis le bord gauche de l'écran. object.style.left = distance en pixels ou en points ; ou // Une distance spécifiée à partir du bord supérieur de l'écran. object.style.top = distance en pixels ou en points ;

Animation de la main

Implémentons donc une animation simple en utilisant les propriétés des objets DOM et les fonctions JavaScript comme suit. La liste suivante contient diverses méthodes DOM.

• Nous utilisons la fonction JavaScript getElementById() pour obtenir un objet DOM, puis l'attribuons à la variable globale imgObj .
• Nous avons initialisé la fonction init() pour initialiser l'imgObj, où nous définissons sa position et ses attributs gauche.
• Nous appelons la fonction d'initialisation lorsque la fenêtre est chargée.
• Enfin, nous appelons la fonction moveRight() pour augmenter la distance gauche de 10 pixels. Vous pouvez également lui attribuer une valeur négative pour le déplacer vers la gauche.

Exemple

Essayez l'exemple suivant.

Animations en JavaScript

Cliquez sur le bouton ci-dessous pour déplacer l'image vers la droite

Animation automatique

Dans l'exemple ci-dessus, nous avons vu comment l'image se déplace vers la droite à chaque clic. Nous pouvons automatiser ce processus en utilisant la fonction setTimeout() en JavaScript comme ceci :

• La fonction moveRight() appelle la fonction setTimeout() pour définir la position imgObj.
• Nous avons ajouté une nouvelle fonction stop() pour effacer le timer défini par setTimeout() et remettre l'objet à sa position d'origine.

Exemple

Essayez l'exemple de code suivant.

Animations en JavaScript

Cliquez sur les boutons ci-dessous pour traiter l'animation

Survol avec événement de souris

Voici un exemple simple montrant le survol d’une image avec un événement de souris.

Voyons ce que nous utilisons dans l'exemple suivant :

• Pendant le chargement de cette page, l'instruction "if" vérifie la présence d'un objet image. Si l'objet image n'est pas disponible, ce bloc ne sera pas exécuté.
• Le constructeur Image() crée et précharge un nouvel objet image nommé image1.
• La propriété src est définie sur le nom du fichier image externe, appelé /images/html.gif.
• De même, nous avons créé un objet image2 et attribuons /images/http.gif à cet objet.
• Le # (signe dièse) désactive le lien pour empêcher le navigateur d'essayer de naviguer vers l'URL lorsque vous cliquez dessus. Ce lien est une image.
• Le gestionnaire d'événements OnMouseOver est appelé lorsque l'utilisateur déplace la souris sur le lien, et le gestionnaire d'événements onMouseOut est appelé lorsque la souris de l'utilisateur s'éloigne de la ligne (image).
• Lorsque la souris survole l'image, l'image passe de la première image à la seconde. Lorsque la souris s'éloigne de l'image, l'image originale s'affiche.
• Lorsque la souris est éloignée du lien, l'image html.gif originale apparaîtra à l'écran.

Survol avec les événements de souris

Survolez l'image pour voir le résultat

Par le terme « animation », nous entendons le plus souvent les films d'animation - les « dessins animés » que nous aimons depuis l'enfance. Mais si l'on regarde le dictionnaire explicatif, on découvre que traduit du français cela signifie « renaissance », « animation ». Et ici, il s'avère que cette signification correspond étonnamment précisément non seulement à l'industrie cinématographique, mais aussi aux technologies Web.

L'utilisation de divers effets d'animation (transitions, mouvements, transformations, etc.) « anime » considérablement le site Web, permet de contrôler l'attention de l'utilisateur, de le faire basculer vers l'élément souhaité et de donner certains repères visuels.

Parlant d'animation, on ne peut manquer de mentionner les 12 principes bien connus formulés par les animateurs du studio Disney, dont l'utilisation est extrêmement importante pour une utilisation raisonnable et de haute qualité des effets d'animation.

En parlant de technologies qui permettent d'utiliser l'animation dans les pages Web, nous pouvons en souligner plusieurs, mais peut-être qu'aucune d'entre elles n'est aussi puissante que . Il y a quelques années à peine, la technologie d’animation Flash était une concurrente redoutable et très populaire. Mais maintenant, il semble que ses meilleures années soient derrière lui et qu'il soit progressivement remplacé des pages des sites par des scripts Java plus puissants et plus flexibles. Et si vous décidez d'utiliser sérieusement l'animation sur votre site Web, vous devez alors vous fier à JavaScript. Et afin de faire un choix judicieux de bibliothèque, j’ai fait la revue d’aujourd’hui.

Dynamics.jsJe vais commencer par Dynamics.js. Il s'agit d'une bibliothèque sérieuse et puissante qui permet de créer des animations physiquement réalistes (comme les oscillations harmoniques amorties d'un point sur la page principale d'un site Web). La bibliothèque est capable de gérer les propriétés de n'importe quel élément du DOM. Dynamics.js est utilisé pour créer des menus, des boutons, des indicateurs de processus, des marqueurs. Dans ce cas, une grande variété de paramètres sont disponibles, tels que la fréquence, le décrément d'amortissement, les paramètres caractérisant l'élasticité ou la durée du processus, etc.

Cta.jsLa petite bibliothèque cta.js est conçue pour créer des effets d'animation de type « action-effect » sur la page, c'est à dire. survoler ou cliquer avec le pointeur de la souris sur un objet produit un effet spécifique. Il est très pratique à utiliser lors du développement d'interfaces en mosaïque, lorsqu'un clic sur un élément entraîne son ouverture sous forme de fenêtre modale, sur la page entière ou sous forme de panneau coulissant latéral.

Beep.jsUne bibliothèque intéressante qui utilise l'API WebAudio pour créer un synthétiseur de musique sur une page. Peut être utilisé pour développer un manuel de musique en ligne ou comme jouet amusant.

Rainyday.jsEffet de pluie incroyablement beau avec des gouttes de différentes tailles coulant vers le bas. Cependant, à mon avis, les grosses gouttes manquent de réalisme (peut-être la même physique qui est présente dans Dynamics.js ?). Cependant, l'API existante vous permet de créer vos propres objets et de contrôler leur comportement, créant ainsi des effets encore plus incroyables.

Dom-Animator.jsDom-Animator.js est ce qu'on appelle un « œuf de Pâques ». L’effet qu’il produit n’est pas visible à l’œil « nu », c’est-à-dire pour ceux qui consultent la page dans une fenêtre de navigateur classique. Mais ceux qui analysent votre code le verront dans la console (si vous ne comprenez toujours pas de quoi nous parlons, il y a une vidéo ici qui clarifiera tout).

FamousFamous est une bibliothèque JS basée sur les événements pour créer une animation moderne. Il possède un noyau géométrique puissant qui vous permet de manipuler divers objets 3D - ponctuels et volumétriques - de leur appliquer des forces et des accélérations, d'imposer des restrictions et de contrôler les collisions.

Bounce.js Une bonne bibliothèque JavaScript pour créer des animations impressionnantes en utilisant CSS. Vous permet d'appliquer différents types de mouvement, de rotation, de mise à l'échelle et de transformation aux objets.

Snabbt.js Une bibliothèque légère et rapide qui, selon les développeurs, produit 60 ips même sur les appareils mobiles. À l'aide de matrices de transformation, CSS vous permet de déplacer, faire pivoter, mettre à l'échelle et effectuer d'autres manipulations avec des objets. Il vous permet également d'appliquer des effets spéciaux aux objets qui attirent l'attention, qui peuvent être utilisés lors du remplissage de formulaires.

RekapiRekapi vous permet d'utiliser à la fois l'animation d'images clés CSS (règle des images clés) et l'animation DOM à l'aide de JavaScript. Cette bibliothèque vous permet de créer des objets dynamiques assez complexes, tels que des diagrammes circulaires et linéaires, des chronologies et d'autres éléments d'interface utilisateur.

ShiftyShifty est une bibliothèque contenant tout le nécessaire pour une animation d'images clés à part entière (ce qu'on appelle le « jumelage »), et le nombre d'objets peut être tout simplement énorme. Il s'agit d'une bibliothèque de bas niveau qui peut être utilisée comme noyau pour des plates-formes ou des bibliothèques de niveau supérieur. En fait, Shifty est utilisé comme noyau du Rekapi susmentionné.