1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
| <!DOCTYPE html>
<html lang="fr"></html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>roue</title>
<style>
html, body {margin: 0;padding: 0;background: rgb(7, 169, 234);}
#stage{
display:block;
background :white;
margin: 15vh auto 0 auto;
border:2px solid black;
}
input{
display: block;
margin: 8vh auto 0 auto;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</head>
<body>
<svg width="60vh" height="60vh" viewBox="0 0 400 400" id="stage"></svg>
<input type="button" value="Arrêter progressivement">
<script>
let f=40,
omega=2*Math.PI*f,
dec_f=.1,
arret=false;
const s = Snap("#stage");
const roue=s.g(
s.circle(200,200,150).attr({
'stroke-width' :3,
stroke: 'black',
fill: "none"
}),s.g(
s.line(50,200,350,200),
s.line(200,50,200,350)).attr({
'stroke-width' :2,
stroke: 'blue'
})
);
let theta=0,
dtheta,
dt=.01; //10 ms fictif ici il faudrait le faire calculer à chaque frame avec Date()...
const deuxPi=2*Math.PI;
function anime(){
roue.transform(`r${theta}`);
}
function arret_progressif(){
if (arret) {
f-=dec_f;
omega=deuxPi*f
} else return;
}
function callback(){
arret_progressif();
dtheta=omega*dt;
theta+=dtheta;
anime();
omega>0 ? window.requestAnimationFrame(callback) : window.cancelAnimationFrame(callback);
}
window.requestAnimationFrame(callback);
const button=document.querySelector("input");
button.addEventListener('click',()=>{arret=true});
</script>
</body>
</html> |
Partager