Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Parar y arrancar animación

JavaScript - Parar y arrancar animación

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 20
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Parar y arrancar animación

Publicado por Jordi (18 intervenciones) el 30/08/2018 15:50:45
Hola a todos,

Tengo una animación con un botón play y un stop en Firefox me funciona bien pero no me funciona en Chrome. No tengo claro si es un error de JS o del html.

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
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <link href="css/forma.css" rel="stylesheet" type="text/css">
        <title>ANIMACIÓN</title>
        <script type="text/javascript">
        //Buscamos el elemento animado en el DOM.

        window.onload = function () {
        cuadro = document.getElementById("recuadro1");
        }
        //parar la animación: propiedad animation-play-state: paused;

        function parar() {
        cuadro.style.animationPlayState = "paused";
        cuadro.style.MozAnimationPlayState = "paused";
        cuadro.style.WebkitAnimationPlayState = "paused";
        }
        //reiniciar la animación: propiedad animation-play-state: running;

        function seguir() {
        cuadro.style.animationPlayState = "running";
        cuadro.style.MozAnimationPlayState = "running";
        cuadro.style.WebkitAnimationPlayState = "running";
        }
        //Cambiar la velocidad: propiedad animation-duration: “num”

        function velocidad(num) {
        valor = num + "s";
        cuadro.style.animationDuration = valor;
        cuadro.style.MozAnimationDuration = valor;
        cuadro.style.WebkitAnimationDuration = valor;
        }
        </script>
            </head>
        <body>
            <article>
              <div id="recuadro1">
      <h3>ANIMACIONES</h3>
      <p>Esta va a ser nuestra primera animación</p>
    </div>
        <p>
        <input type="button" name="stop" value="stop" onclick=""="parar()"/>
        <input type="button" name="play" value="play" onclick=""="seguir()"/>
        <b>Elige la velocidad:</b>
        <select name="vel">
        <option selected="selected" onclick="velocidad(4)">Normal</option>
        <option onclick=""="velocidad(10)">Muy lento</option>
        <option onclick=""="velocidad(8)">Lento</option>
        <option onclick=""="velocidad(2)">Rápido</option>
        <option onclick=""="velocidad(1)">Muy Rápido</option>
        </select>
        </p>
        </article>
        </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 xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Parar y arrancar animación

Publicado por xve (2100 intervenciones) el 30/08/2018 16:23:26
En el javascript no veo ningún error... puedes publicar el contenido de tu archivo forma.css para poder probarlo?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 20
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Parar y arrancar animación

Publicado por Jordi (18 intervenciones) el 30/08/2018 16:26:12
Yo buscando por Google he visto que el evento onclick no funciona en Chrome Pero no he visto ninguna solución clara.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Parar y arrancar animación

Publicado por ScriptShow (692 intervenciones) el 30/08/2018 20:59:19
Saludos Jordi,

en lo básico parece funcionar...

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
<!DOCTYPE html>
<html>
<head>
<style>
#recuadro {

width: 100px;
height: 100px;
background: gray;
position: relative;
-webkit-animation: test 2s infinite;
-webkit-animation-play-state: paused;
animation: test 2s infinite;
animation-play-state: paused;
}
 
@-webkit-keyframes test {
from {left: 0px;}
to {left: 200px;}
}
 
@keyframes test {
from {left: 0px;}
to {left: 200px;}
}
</style>
<script>
function seguir() {
document.getElementById("recuadro").style.WebkitAnimationPlayState = "running";
document.getElementById("recuadro").style.animationPlayState = "running";
}
 
function parar() {
document.getElementById("recuadro").style.WebkitAnimationPlayState = "paused";
document.getElementById("recuadro").style.animationPlayState = "paused";
}
</script>
</head>
<body>
<p>
<button onclick="seguir()">Play</button>
<button onclick="parar()">Stop</button>
</p>
<div id="recuadro">T e s t</div>
</body>
</html>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 20
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Parar y arrancar animación

Publicado por Jordi (18 intervenciones) el 30/08/2018 22:31:18
Muchísimas gracias, el play y es stop me funciona pero creo que las velocidades no si escojo rápido o muy lento hace los mismo.
1
2
3
4
5
<option selected="selected" onclick="velocidad(4)">Normal</option>
<option onclick=""="velocidad(10)">Muy lento</option>
<option onclick=""="velocidad(8)">Lento</option>
<option onclick=""="velocidad(2)">Rápido</option>
<option onclick=""="velocidad(1)">Muy Rápido</option>

Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Parar y arrancar animación

Publicado por ScriptShow (692 intervenciones) el 31/08/2018 00:48:28
Sería algo así:

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
<!DOCTYPE html>
<html>
<head>
<style>
#recuadro {

width: 100px;
height: 100px;
background: gray;
position: relative;
-webkit-animation: test 2s infinite;
-webkit-animation-play-state: paused;
animation: test 2s infinite;
animation-play-state: paused;
}
 
@-webkit-keyframes test {
from {left: 0px;}
to {left: 200px;}
}
 
@keyframes test {
from {left: 0px;}
to {left: 200px;}
}
</style>
 
<script>
window.onload = function () {
cuadro = document.getElementById("recuadro");
}
 
function seguir() {
cuadro.style.WebkitAnimationPlayState = "running";
cuadro.style.animationPlayState = "running";
}
 
function parar() {
cuadro.style.WebkitAnimationPlayState = "paused";
cuadro.style.animationPlayState = "paused";
}
 
function velocidad(num) {
cuadro.style.WebkitAnimationDuration = num+"s";
cuadro.style.animationDuration = num+"s";
}
</script>
</head>
<body>
<p>
<button onclick="seguir()">Play</button>
 
<button onclick="parar()">Stop</button>
 
<select onclick="velocidad(this.value)">
<option value="2">Velocidad</option>
<option value="8">Muy lento</option>
<option value="4">Lento</option>
<option value="2">Rápido</option>
<option value="1">Muy Rápido</option>
</select>
</p>
<div id="recuadro">T e s t</div>
</body>
</html>

Espero sea útil.

Un saludo
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
sin imagen de perfil
Val: 20
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Parar y arrancar animación

Publicado por Jordi (18 intervenciones) el 31/08/2018 16:23:54
Muchas gracias, la ultima pregunta para hacerlos con dos imágenes seria lo mismo, yo he hecho este código pero no me funciona con imágenes.

Gracias

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
<article>
  <style>
/* DEFINIMOS LAS ESTRUCTURAS BASICAS */
#visor

{
width: 400px;
height: 400px;
background-color: silver;
overflow: hidden;
position: absolute;
}
#playa

{
position: relative;
width: 1200px;
height: 400px;
}
#avion

{
position: absolute;
top: 180px;
left: 180px;
width: 80px;
}
 
@keyframes playa {
 
from { left: 0px; }
 
}
to { left: -600px; }
@-moz-keyframes playa {
 
from { left: 0px; }
 
}
to { left: -600px; }
@-webkit-keyframes playa {
 
from { left: 0px; }
 
}
 
#playa

{
	animation-name: playa ;
	animation-duration: 5s ;
	animation-iteration-count: infinite ;
	animation-timing-function: linear ;
	-moz-animation-name: playa ;
	-moz-animation-duration: 5s ;
	-moz-animation-iteration-count: infinite ;
	-moz-animation-timing-function: linear ;
	-webkit-animation-name: playa ;
	-webkit-animation-duration: 5s ;
	-webkit-animation-iteration-count: infinite ;
	-webkit-animation-timing-function : linear;
}
</style>
 
 
 
<article>
  <h2>Avión volando:</h2>
  <div id=”visor”>
    <img id="playa" src="img/playa.jpeg" alt="playa">
    <img id="avion" src="img/avion.png" alt="avion">
  </div>
</article>
 
</article>

Muchas gracias por tu ayuda
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Parar y arrancar animación

Publicado por ScriptShow (692 intervenciones) el 01/09/2018 23:24:09
Saludos Jordi,

revisa las etiquetas de la estructura; los nombres de imágenes, sus extensiones, rutas, etc... Es muy importante.

El ejemplo:

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
<!DOCTYPE html>
<html>
<head>
<style>
#visor {

width: 400px;
height: 400px;
background-color: silver;
overflow: hidden;
position: absolute;
}
 
#playa {

position: relative;
width: 1200px;
height: 400px;
}
 
#avion {

position: absolute;
top: 180px;
left: 180px;
width: 80px;
}
 
@keyframes playa {
from { left: 0px; }
to { left: -600px; }
}
 
@-moz-keyframes playa {
from { left: 0px; }
to { left: -600px; }
}
 
#playa {

animation-name: playa;
-webkit-animation: playa 8s infinite;
-webkit-animation-play-state: running;
animation: playa 8s infinite;
animation-play-state: running;
}
</style>
</head>
<body>
<h2>Avión volando:</h2>
<div id=”visor”>
<img id="playa" src="img/playa.jpg" alt="playa">
<img id="avion" src="img/avion.png" alt="avion">
</div>
</body>
</html>

Espero sea útil.
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
sin imagen de perfil
Val: 20
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Parar y arrancar animación

Publicado por Jordi (18 intervenciones) el 31/08/2018 23:04:07
Muchas gracias por todo me funciona todo perfecto!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar