<style type="text/css">
div#fps {
position: absolute;
top:25px;
right:25px;
background-color:#ccc;
box-shadow: 1px 1px 1px #333;
width:80px;
padding:5px;
}
div#conteneur {
width:100%;
height:300px;
border:1px solid #000;
background: #eee;
padding:0px;
margin:0px;
}
div#ballon {
width:100px;
height:100px;
background: #a00;
border-radius:50%;
left:0;
top:0;
position: relative;
}
div#coords {
position: absolute;
top:25px;
left:25px;
width:80px;
padding:5px;
font-size: 12px;
}
div.center {
margin-top:20px;
margin-left: auto;
margin-right: auto;
width:200px;
}
</style>
<div id="conteneur">
<div id="ballon"></div>
</div>
<div id="fps">FPS</div>
<div id="coords"></div>
<div class="center btn btn-sm radius cursor-pointer color-white radius background-color-green" onclick="toggleAnimation()" id="toggle">Arrêter l'animation</div>
<script type="text/javascript">
/* Variables globales de traitement */
var IDanimation, NBanimation = 0, nbFPS = 10;
var x = 0, y = 0;
var deltaX = 2, deltaY = 5, diametre = 100, bordure = 1;
var conteneur =
document.
getElementById("conteneur").
getBoundingClientRect();
var largeur = conteneur.
width - 2*bordure , hauteur = conteneur.
height - 2*bordure;
console.
log("largeur="+largeur+"px hauteur="+hauteur+"px");
function animer() {
NBanimation++;
/* déplacement des coordonnées du ballon */
x+=deltaX;
y+=deltaY;
document.
getElementById("coords").
innerHTML="("+x+", "+y+")";
document.
getElementById("ballon").style.left = x+"px";
document.
getElementById("ballon").style.
top = y+"px";
/* Si le ballon dépasse le conteneur, on inverse le sens pour générer le rebond */
if ((x+diametre>largeur) || (x<0)) {
deltaX=-1*deltaX;
}
if ((y+diametre>hauteur) || (y<0)) {
deltaY=-1*deltaY;
}
// Toutes les nbFPS animations, maj du contenu div#fps
if (NBanimation % nbFPS == 0) {
var microtime2=
window.
performance.
now();
// Temps écoulé depuis le dernier appel
var delai=microtime2-microtime1;
// Conversion en FPS (frame par seconde)
var fps =
Math.
round(1/delai*1000*nbFPS);
document.
getElementById("fps").
innerHTML=fps + " FPS";
microtime1=microtime2;
}
IDanimation =
requestAnimationFrame(animer);
}
function toggleAnimation() {
console.
log(IDanimation)
if (IDanimation==0) { // Animation stoppée : on la relance
animer();
document.
getElementById("toggle").
innerHTML="Arrêter l'animation";
}
else { // Arrêt de l'animation
cancelAnimationFrame(IDanimation);
IDanimation=0;
document.
getElementById("toggle").
innerHTML="Relancer l'animation";
}
}
var microtime1=
window.
performance.
now();
animer();
</script>
Le ballon rebondit dans le conteneur. Le div#fps contient le nombre d'images par seconde que le navigateur parvient à maintenir.