Cómo lograr un efecto de animación de gráfico de rotación infinita en CSS (ejemplo de código)
En el artículo anterior, cómo lograr el efecto de visualización de rotación de imágenes con CSS, presentamos el método para hacer imágenes de rotación infinita manual. En este artículo, echemos un vistazo al método de producción automática infinita. animación de imagen de rotación. Echemos un vistazo a cómo se logra el efecto de animación.
1. Prepare el escenario para la animación
HTML es muy similar al ejemplo del artículo anterior. Tenemos un escenario para animación (#stage), un contenedor div para rotación y una serie de imágenes:
lt;div id="stage"gt;
lt;div id ="rotador" style="-webkit-animation-name: rotator;"gt;
lt;a href="1.jpg"gt;lt;img src="1. jpg" width= "140"gt；lt;/agt;
lt;a href="2.jpg"gt;lt;img src="2.jpg" width="140"gt;/agt; ;
lt;a href="3.jpg"gt;lt;img src="3.jpg" width="140"gt;lt;/agt;
lt ;a href="4.jpg"gt;lt;img src="4.jpg" width="140"gt;lt;/agt;
lt;a href=" 5.jpg" gt;lt;img src="5.jpg" width="140"gt;lt;/agt;
lt;a href="6.jpg"gt;lt;img src="6 .jpg" width="140"gt;lt;/agt;
lt;a href="7.jpg"gt;lt;img src="7.jpg" width= "140"gt ;lt;/agt;
lt;a href="8.jpg"gt;lt;img src="8.jpg" width="140"gt;lt;/agt ;
lt;/divgt;
lt;/divgt; El atributo de estilo en línea hace referencia a la animación @keyframes a continuación, que debe estar en línea en lugar de CSS para que podamos usar JavaScript Detener y reiniciar animaciones .
2. Organizar fotografías en un espacio 3D
Este estilo CSS se utiliza para colocar varias fotografías, primero girándolas alrededor del eje Y (girando la página verticalmente hacia arriba) y luego radialmente. hacia afuera Foto panorámica:
#stage {
margen: 2em auto 1em 50
altura:
-webkit-perspective; : 1200px;
-webkit-perspective-origin: 0 50
}
#rotador a {
posición: absoluta;
izquierda: -81px;
}
#rotador a img {
relleno: 10px; borde: 1px sólido #ccc;
fondo: #fff;
-webkit- backface-visibility: oculto
}
# rotador a：nth-of-type(1) img {
-webkit-transform： rotarY(-90deg) traducirZ(300px
}
-webkit-transform：rotateY(-60deg) traducirZ(300px
}
<); p > #rotator a：nth-of-type(3) img {-webkit-transform: rotarY(-30deg) traducirZ(300px);
#rotador a: nth-of-type(4) img {
-webkit- transformar: traducirZ(300px);
fondo: #000;
}
#rotador a: enésimo tipo(5) img {
-webkit-transform: rotarY(30deg) traducirZ(300px);
}
#rotator a: nth-of-type(6) img {
-webkit-transform: rotarY(60deg) traducirZ(300px);
}
#rotator a: nth-of-type(n 7) { display: none } El valor de la foto se establece en -81px, lo que significa moverse hacia la izquierda y colocar el Foto orientada hacia adelante El centro del eje de rotación. La distancia es la mitad del ancho de la imagen (140 px/2) más el relleno izquierdo de la imagen (10 px) y el borde (1 px).
Esta etapa implica la configuración de la animación tridimensional. Esta etapa comienza desde el centro de la página, por lo que el elemento de anclaje debajo del elemento rotado debe moverse hacia atrás para centrar la animación.
Comenzaremos con seis fotos, tres a la izquierda, una en el medio y dos a la derecha. La fotografía más a la izquierda (posición 1) comienza desde la izquierda y, por lo tanto, sólo es visible después de la primera rotación.
Después de girar la foto, desaparecerá (Pantalla: Ninguna) y se adjuntará una nueva foto a la izquierda, lista para girar comenzando en la posición 1. Las posiciones 7 y superiores pueden tener cualquier cantidad de fotos. Sólo aparecen cuando se mueven a una posición visible.
Incluso puedes usar Ajax para cargar nuevas fotos mientras la animación está en progreso.
3. Añade efectos de animación
Como probamos antes, en lugar de girar la rueda de fotos 360 grados, la giramos 30 grados (suficiente para obtener la animación de una foto. Ir al siguiente foto):
@-wekit-keyframes rotator {
de { - webkit-transform: turnY(0deg }
de { -webkit-transform); : rotarY(0deg); }
a { -webkit-transform: rotarY(30deg }
}
#rotador {
<); p> -webkit-transform- origen: 0 0;-webkit-transform-style: preserve-3d;
-webkit-animation-timing-function : cubic-bezier( 1, 0.2, 0.2, 1);
-webkit-animation-duration: 1s;
-webkit-animation-delay: 1s; /p>
#rotator:hover {
-webkit-animation-play-state.paused;
} Para hacer que los fotogramas clave funcionen en otros navegadores Para trabajar, copie todos estilos y reemplace -webkit- con -moz- y -ms-, como se muestra en el siguiente bloque de código de muestra.
Cuando se completa la animación, activa un evento de JavaScript, que podrás conocer en la siguiente sección. El controlador de eventos se mueve a lo largo de la foto, de modo que cuando la animación se reinicia, la foto no vuelve a su estado inicial, sino que se mueve un paso alrededor del círculo.
Para tener una idea más clara de lo que está pasando, la foto del medio está resaltada en la demostración a continuación. A medida que avanza la animación, verá que el nodo resaltado gira y luego se reinicia a la posición inicial, pero con una foto diferente.
4. Agregar controlador de animación mediante JavaScript
En este ejemplo, necesitamos que JavaScript detecte cuándo finaliza la animación para coordinar el reinicio de la foto en movimiento mediante la rueda de desplazamiento. Si no hace esto, la rueda de desplazamiento simplemente alternará entre las dos primeras fotos.
document.addEventListener("DOMContentLoaded", function() {
var rotateComplete = function() {
target.style.insertBefore(arr[arr. longitud-1], arr[0]);
setTimeout(function(el) {
el.style.webkitAnimationName = "rotador";
} , 0, objetivo);
};
var objetivo = document.getElementById("rotador");
var arr = objetivo .getElementsByTagName("a) ");
target.addEventListener("webkitAnimationEnd", rotateComplete, false);
}, false); Para cada estilo de WebKit y otras referencias, Firefox (-moz- o Alternativas existen para Moz), Opera (-o- u O) e incluso Internet Explorer (-ms- o ms), y vamos a tener que vivir con este lío hasta que se finalice el estándar.
Para utilizar esta función en Safari, Chrome, Firefox, Opera e Internet Explorer 10, debemos incluir las siguientes configuraciones adicionales:
var rotarComplete = function() {
p>
with(target .style) {
webkitAnimationName = MozAnimationName = msAnimationName = ""
}
objetivo. insertBefore(arr[arr .length-1], arr[0] );
setTimeout(function(el) {
with(el.style) {
webkitAnimationName = MozAnimationName = msAnimationName = "rotador";
}
}, 0, destino
}; .
var target = document.
target.addEventListener("animationend", rotateComplete, false);
No está claro por qué se necesita setTimeout. No lo necesitamos para establecer el retraso ya que lo hacemos usando CSS, pero sin setTimeout (incluso 0 ms) la animación no se puede reactivar.
5. Visualización del efecto
Esto es solo rotación horizontal. En artículos posteriores, se mejorará la animación de rotación infinita tridimensional implementada por CSS y se crearán diferentes rotaciones en función. sobre el método de rotación en este artículo.