IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Bonsai
La bibliothèque JavaScript graphique et animée

Le , par vermine

0PARTAGES

2  0 
Bonsai
la bibliothèque JavaScript graphique et animée.


Bonsai est une nouvelle bibliothèque JavaScript graphique qui contient une API intuitive. Elle permet de définir des formes vectorielles et de les animer de manière assez surprenante. L'architecture est divisée en deux parties. Tout d'abord, il y a le moteur de rendu (SVG) et ensuite il y a le moteur de calcul. De cette façon, l'exécution des calculs lourds se fait en arrière-plan tandis qu'on retrouve uniquement le rendu visuel sur le thread principal.

En voici quelques particularités :

  • une exécution dans une iFrame, avec Node ou avec Worker ;
  • une classe Paths pour générer des chemins ;
  • elle accepte les vidéos, les images, les polices, ... ;
  • des fonctions mathématiques pour les animations ;
  • etc.


Exemple d'utilisation :

Code javascript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
  
var square = new Rect(0, 0, 100, 100); 
  
square.addTo(stage); 
square.fill('red'); 
square.animate('1.5s', { 
  rotation: Math.PI, 
  x: 700, 
  fillColor: 'green' 
});

Ce code crée un carré rouge qui va se déplacer tout en tournant sur lui-même et changer progressivement de couleur jusqu'à devenir vert. Vous pouvez voir son exécution dans le premier encadré de la documentation.

Démo.
Site officiel.
Téléchargement.
Documentation.

Source : article sur BadAss JavaScript

Une erreur dans cette actualité ? Signalez-nous-la !