Accueil > > > ANIMATION VIA LES ÉQUATIONS DE ROBERT PENNER
ANIMATION VIA LES ÉQUATIONS DE ROBERT PENNER
Information sur la source
Description
Cette source est une 'base' pour ceux et celles qui désirent créer leur moteur d'animations en Javascript. Robert Penner, mathématicien en herbe plus connu dans l'univers du Flash, a mis au point il y a déjà quelques temps une serie d'équations permettant l'animation d'objets sous divers effets. On retrouve ces équations dans plusieurs librairies JS connues (mootools par exemple). Mon exemple fournis 4 des effets les plus sympa et leur système d'utilisation. Vous trouverez l'ensemble des équations à l'adresse suivante : http://www.robertpenner.com/easing/
Source
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>Effets</title>
- <style type="text/css">
- body{ font: 11px/16px Arial, "Trebushet MS", Helvetica; color: #333; }
- h2{ font-weight: bold; font-size: 14px; }
- td.libelle{ width: 180px; }
- td.valeur{ width: 100px; }
- td.inputs, td.select{ width: 100%; }
- #animation{ height: 32px; width: 32px; background: #aaccf6; margin: 22px; }
- </style>
- </head>
- <body>
- <table>
- <tr>
- <td class="libelle">Durée de l'animation (en ms)</td>
- <td class="valeur"><input type="text" id="duration" value="800"/></td>
- </tr>
- <tr>
- <td class="libelle">Nombre de pixels à animer</td>
- <td class="valeur"><input type="text" id="nbPix" value="180"/></td>
- </tr>
- <tr>
- <td class="libelle">Transition</td>
- <td class="valeur">
- <select id="transition">
- <option value="linear" selected="selected">Lineaire</option>
- <option value="elastic">Elastique</option>
- <option value="bounce">Bonds</option>
- <option value="skid">Liquide</option>
- </select>
- </td>
- </tr>
- <tr>
- <td class="libelle">Valeur à modifier</td>
- <td class="valeur">
- <select id="cssRule">
- <option value="height" selected="selected">Hauteur</option>
- <option value="width">Largeur</option>
- <option value="both">Hauteur et largeur</option>
- </select>
- </td>
- </tr>
- </table>
-
- <input type="button" value="GO" onclick="animate()"/> <input type="button" value="Reset" onclick="reset()"/>
-
- <div id="animation"></div>
-
- <script type="text/javascript">
- function $(idObj){
- return document.getElementById(idObj);
- };
-
- var transitions = {
- linear: function(t, b, c, d){ return c*t/d + b; },
- elastic: function (t,b,c,d,a,p){
- if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
- if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
- else var s = p/(2*Math.PI) * Math.asin (c/a);
- return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
- },
- bounce: function(t,b,c,d){
- if((t/=d) < (1/2.75)) {
- return c*(7.5625*t*t) + b;
- }else if (t < (2/2.75)) {
- return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
- }else if (t < (2.5/2.75)) {
- return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
- }else{
- return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
- }
- },
- skid: function(t,b,c,d){
- var s = 1.70158;
- return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
- }
- };
-
- function reset(){
- $('animation').style.height = '32px';
- $('animation').style.width = '32px';
- };
-
- function animate(){
- var target = $('animation');
- var tmr = (1000/80); //assure une moyenne de 80 images par secondes
- var nbSteps = Math.round($('duration').value/tmr);
- var step = Math.abs(32 - $('nbPix').value)/nbSteps;
- var mapping = [];
- //On remplis un tableau contenant toutes les étapes de l'animation
- for(var i=1; i<=nbSteps; i++){
- mapping.push(transitions[$('transition').value](i*tmr, 32, $('nbPix').value - 32, $('duration').value));
- }
- var currentStep = 0;
- var timer = window.setInterval(function(){
- if(mapping[currentStep]){
- if($('cssRule').value=='both'){
- $('animation').style['height'] = mapping[currentStep]+'px';
- $('animation').style['width'] = mapping[currentStep]+'px';
- }else $('animation').style[$('cssRule').value] = mapping[currentStep]+'px';
- currentStep++;
- }else{
- window.clearInterval(timer);
- return;
- }
- }, tmr);
- };
-
- </script>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Effets</title>
<style type="text/css">
body{ font: 11px/16px Arial, "Trebushet MS", Helvetica; color: #333; }
h2{ font-weight: bold; font-size: 14px; }
td.libelle{ width: 180px; }
td.valeur{ width: 100px; }
td.inputs, td.select{ width: 100%; }
#animation{ height: 32px; width: 32px; background: #aaccf6; margin: 22px; }
</style>
</head>
<body>
<table>
<tr>
<td class="libelle">Durée de l'animation (en ms)</td>
<td class="valeur"><input type="text" id="duration" value="800"/></td>
</tr>
<tr>
<td class="libelle">Nombre de pixels à animer</td>
<td class="valeur"><input type="text" id="nbPix" value="180"/></td>
</tr>
<tr>
<td class="libelle">Transition</td>
<td class="valeur">
<select id="transition">
<option value="linear" selected="selected">Lineaire</option>
<option value="elastic">Elastique</option>
<option value="bounce">Bonds</option>
<option value="skid">Liquide</option>
</select>
</td>
</tr>
<tr>
<td class="libelle">Valeur à modifier</td>
<td class="valeur">
<select id="cssRule">
<option value="height" selected="selected">Hauteur</option>
<option value="width">Largeur</option>
<option value="both">Hauteur et largeur</option>
</select>
</td>
</tr>
</table>
<input type="button" value="GO" onclick="animate()"/> <input type="button" value="Reset" onclick="reset()"/>
<div id="animation"></div>
<script type="text/javascript">
function $(idObj){
return document.getElementById(idObj);
};
var transitions = {
linear: function(t, b, c, d){ return c*t/d + b; },
elastic: function (t,b,c,d,a,p){
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
},
bounce: function(t,b,c,d){
if((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
}else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}else{
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
skid: function(t,b,c,d){
var s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
};
function reset(){
$('animation').style.height = '32px';
$('animation').style.width = '32px';
};
function animate(){
var target = $('animation');
var tmr = (1000/80); //assure une moyenne de 80 images par secondes
var nbSteps = Math.round($('duration').value/tmr);
var step = Math.abs(32 - $('nbPix').value)/nbSteps;
var mapping = [];
//On remplis un tableau contenant toutes les étapes de l'animation
for(var i=1; i<=nbSteps; i++){
mapping.push(transitions[$('transition').value](i*tmr, 32, $('nbPix').value - 32, $('duration').value));
}
var currentStep = 0;
var timer = window.setInterval(function(){
if(mapping[currentStep]){
if($('cssRule').value=='both'){
$('animation').style['height'] = mapping[currentStep]+'px';
$('animation').style['width'] = mapping[currentStep]+'px';
}else $('animation').style[$('cssRule').value] = mapping[currentStep]+'px';
currentStep++;
}else{
window.clearInterval(timer);
return;
}
}, tmr);
};
</script>
</body>
</html>
Historique
- 26 juin 2008 13:58:29 :
- Petit oubli corrigé...
Sources du même auteur
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
différents effets sur les liens d'une meme page [ par geoffroy ]
Salut, J'aimerais savoir comment fait on pour qu'un lien devienne plus gros au survolage de la souris . Mais j'aimerais que cet effet ne marche que su
chargement dans cadre différent à la fin d'une animation [ par zygene ]
bonjour,je souahite charger un menu dans un cadre de gauche, une fois que l'animation flash du cadre principal est terminée...euh, comment faire? (sac
du flash dans un fichier .JS [ par bernard09 ]
Salut.Je cherche à inserer les lignes d'appel d'une animation flash dans un fichier .JS pour pouvoir ensuite lancer l'animation sur plusieurs page et
animation flash [ par nico606 ]
Slt g un problème g une animation flash sur mon mon site mais je n'ai pas le logiciel flash.Alors si vous l'avez je vous envoie mon fichier en fete je
pbm avec window.open [ par matoo ]
bonjour,j'ai une animation flash contenant des boutons, appelant des popup.swf à l'aide d'un : getURL("javascript:popup('anim1.swf','popup',',left
equation du second degre [ par ouaton ]
SALUT!j'aimerais resoudre une equation du second degré du type Ax²+Bx+C=0 en java ou html.on entre A,B et C et afficher dans Sje n'arrive pas a le fai
lien html / flash ? [ par pistoff ]
Voila mon problème:j'ai une animation flash qui commence dans une premiere page html... et j'aimerais qu'en passant sur une deuxieme page html la meme
Passer des variables dans <param> ? [ par WhiteMagus ]
Salut.Je fais un site en Flash, mais j'aimerai que l'animation se repoitionne avec une animation au centre de la page si celle-ci est redimensionnée.
Class Defilement auto d'images avec animation [ par MeTh ]
Je suis sur d'etre pret du but et je suis également convaincu que ce script peut servir à bcp de personne. Ceci ma première tentative
lien 2 effets [ par chaps29 ]
bonjour, je souhaiterais faire un lien avec une double action qui necessiterait du javascript je m'explique c'est pour modifier un element dans une b
|
Derniers Blogs
[WF4] PASSAGE D'ARGUMENTS LITERAL, VISUALBASICVALUE OU LAMBDAVALUE?[WF4] PASSAGE D'ARGUMENTS LITERAL, VISUALBASICVALUE OU LAMBDAVALUE? par JeremyJeanson
Avec la sortie de la RC de Visual Studio 2010, Microsoft a mis un peu les points sur leS i en ce qui concernait le passage d'arguments. Mais nous somme un certain nombre à avoir pris ce changement comme un coup dur. Pour résumer la situation : à la sortie...
Cliquez pour lire la suite de l'article par JeremyJeanson [RIA SERVICES] INCLUDE ET DOMAINDATASOURCE[RIA SERVICES] INCLUDE ET DOMAINDATASOURCE par Audrey
Dans un de mes articles précédents , j'avais parlé des DomainDataSource avec RIA Services dans le cas d'une interface Maître - Détail. Dans le même principe, je vais parler d'une autre manière de mettre en forme ce cas d'interface avec RIA Services. Et po...
Cliquez pour lire la suite de l'article par Audrey ZUNE : VERSION ZUNE SOFTWARE V 4.2 ET LA SOCIALISATIONZUNE : VERSION ZUNE SOFTWARE V 4.2 ET LA SOCIALISATION par ROMELARD Fabrice
Une des nouveautés de la version V 3.0 était l'apparition de l'onglet Social qui ne fonctionnait que si le MarketPlace était activé sur son poste. Cela limitait donc son intérêt, car hors du cadre commercial USA-CANADA, peu de monde trouva...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice PRATIQUE DE SILVERLIGHT PAR ERIC AMBROSIPRATIQUE DE SILVERLIGHT PAR ERIC AMBROSI par MPOWARE
Je viens de finir la lecture du dernier livre d'
Eric Ambrosi
éditions PEARSON
Son livre donne une approche pratique de Silverlight qui sera aussi bien comprise par le développeur que par le designeur.
Tous les aspects du développement RIA sont abor...
Cliquez pour lire la suite de l'article par MPOWARE APPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NETAPPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NET par odewit
2 déclinaisons de Silverlight et 2 déclinaisons de Mono permettent dorénavant (ou permettront prochainement) de développer des applications .NET mobiles pour les principales plates-formes du marché :
Silverlight pour Symbian, basé sur Silverlight 2...
Cliquez pour lire la suite de l'article par odewit
Forum
RE : CONVERSIONRE : CONVERSION par peter2010
Cliquez pour lire la suite par peter2010
Logiciels
Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|