JavaScript - Animacion en canvas

 
Vista:
sin imagen de perfil
Val: 45
Ha disminuido su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Animacion en canvas

Publicado por valentin (24 intervenciones) el 23/09/2019 22:13:37
¿Como hago para que la pelota rebote con menos intensidad cada vez hasta quedarse quieta?


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
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/estilo_canvas.css">
 
		<title>animacion</title>
 
		<script>
 
			var y=300;
 
			var estado="bajando";
 
			function comenzar(){
 
				var elemento=document.getElementById("lienzo");
				lienzo=elemento.getContext("2d");
 
 
				setInterval(animacion,50);
			}
 
			function animacion(){
 
				if (y<600 && estado=="bajando"){
 
				lienzo.clearRect(0,0,800,600);
 
				lienzo.beginPath();
 
				lienzo.arc(400,y,50,0,2*Math.PI,false);
 
				lienzo.fill();
 
				y=y+50;
 
				}
 
				if(y==600){
 
					estado="subiendo";
 
				}
 
				if(y>=0 && estado=="subiendo"){
 
				lienzo.clearRect(0,0,800,600);
 
				lienzo.beginPath();
 
				lienzo.arc(400,y,50,0,2*Math.PI,false);
 
				lienzo.fill();
 
				y=y-50;
 
 
				}
 
				if(y==0) {
 
					estado="bajando";
				}
 
			}
 
 
 
			window.addEventListener("load",comenzar,false);
 
		</script>
 
	</head>
	<body>
		<section>
		<center>
 
			<canvas width="800" height="600" id="lienzo"></canvas>
 
		</center>
		</section>
	</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 1.334
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Animacion en canvas - Como disminuir la velocidad de la pelota

Publicado por Alejandro (289 intervenciones) el 23/09/2019 23:46:07
Al parecer vas empezando, en lugar de setInterval se recomienda requestAnimationFrame.
En tu código mientras mayor sea el numero de setInterval mas lento sera el movimiento.
No se puede modificar el tiempo pero puedes eliminar el setInterval y crearlo con nuevo tiempo.

1
velocidad=setInterval(animacion,tiempo);

en tu función animacion
1
2
3
4
clearInterval(velocidad);
if(tiempo<maximo){
   velocidad=setInterval(animacion,tiempo++);
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar