Dynamique.js pour faire de jolie animation ))

Télécharger le projet
Commenter

Description

Librairie d'animation compatible prototype, basé sur une structure JSON.
Plein d'interpolation, une syntaxe intuitive, et une définition proche de celle d'un logiciel d'animation, avec définitions de piste et keyframing.
Reste encore quelque beug, au niveau des replayInverse pour l'animation, ainsi que les fonctions onStart.
Reste a faire la fonction affectContent , plus les reports proportionné du contenue si reportOrigine définit. Dimanche ou en début de semaine, j'espère avoir finit ce script, la doc est pour le moment assé peu détaillé, rdv dans quelque jours pour la version 1.

Source / Exemple : 


//construction de la json des animations,on lui indique l'id de l anim + le delay + les replay //(replay , replayLessDelay, replayInverse, replayInverseLessDelay)
structureColor=[{	
        id:'color',
	delay:0,
        //tableau d'effet (tout effet pouvant etre animé au format javascript //ex:paddingTop,borderColor ...)
	effects:[{
		effect:'backgroundColor',
		startValue:'#5e6fa1',//valeur de départ
		key:[{ //tableau de clé (frame)
                        value:'#ff3587',//valeur de la clé
			duration:3000,//durée en millisicond
                        interpolation :{//interpollation voir la fin du code source pour                //connaitre toute les possibilité
				type : 'spline'
			}
                 },{
                        value:'#5e6fa1',
			duration:3000,
                        interpolation :{
				type : 'spline'
			}
                 }]
         }]
}];

new Dynamique.createAnimations(structureColor,30);//initialization de l anim(JSON + fps)
//definition du player (les animation sont enregistrer dans un tableau associatif 
// Dynamique.animation passé lui l'id de l anim + appel de la fonction addPlayer avec dedans le 
//nom du player de votre choix , + un tableau d'objet d' id d'element html)
Dynamique.animation['color'].addPlayer('colorPlayer',[{
	element :'test1'
  }]);

//lancé l 'anim avec comme argument le player
Dynamique.animation['color'].play('colorPlayer');
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_Kimjoa)