Durante mi pasantía anterior, tenía el requisito de incrustar una página H5 en el lado de Android para realizar la entrada de voz e incluir animación y bolas de salto durante la entrada. Consultando varios materiales y basándose en escenarios de demanda reales, finalmente se realizó su función. Revisémoslo y registrémoslo aquí.
Primero, realiza el golpe de una sola bola.
Análisis: La pelota comienza arriba, llega abajo en el período medio y finalmente regresa a arriba, y es un bucle infinito. Se logra combinando el posicionamiento relativo con fotogramas clave CSS3.
<div class="bola"></div>
.pelota {
ancho: 20 píxeles;
altura: 20 píxeles;
radio fronterizo: 50%;
posición: relativa;
nombre de animación: rebote; // nombre de la animación duración de la animación: 1,6 s; // duración de la animación única recuento de iteraciones de animación: infinito; fondo del bucle infinito de la animación: rgb (244, 7, 7); color}
//Animación de fotogramas clave @keyframes rebotando {
0% {
arriba: 0px; //Inicialmente en la parte superior}
50% {
arriba: 100px; // medio en la parte inferior}
100% {
arriba: 0px; // Finalmente regresa al principio}
}Análisis: varias bolas pequeñas golpean al mismo tiempo y la posición relativa debe ser diferente. En segundo lugar, hay una diferencia de tiempo en la animación de cada bola pequeña.
/** bolas = [1,2,3,4,5] múltiples bolas*/
<div v-for="bola en bolas" :key="bola" :class="['bola', `bola${bola}`]"></div> // Extracción de estilo público.ball {
ancho: 20 píxeles;
altura: 20 píxeles;
radio fronterizo: 50%;
posición: relativa;
nombre de animación: rebote; // nombre de la animación duración de la animación: 1,6 s; // duración de la animación única recuento de iteraciones de animación: infinito;
.bola1 {
@extender .ball;
izquierda: 0;
fondo: rgb(244, 7, 7);
}
.bola2 {
@extender .ball;
retraso de animación: 0,25 s; // retraso de animación izquierda: 30px;
fondo: rgb(16, 106, 241);
}
.bola3 {
@extender .ball;
retraso de animación: 0,5 s; // retraso de animación restante: 60 px;
fondo: rgb(251, 236, 13);
}
.bola4 {
@extender .ball;
retraso de animación: 0,75 s; // retraso de animación izquierda: 90 px;
fondo: rgb(233, 23, 233);
}
.bola5 {
@extender .ball;
retraso de animación: 1.0s; // retraso de animación izquierda: 120px;
fondo: rgb(6, 247, 6);
}
//Animación de fotogramas clave @keyframes rebotando {
0% {
arriba: 0px; //Inicialmente en la parte superior}
50% {
arriba: 100px; // medio en la parte inferior}
100% {
arriba: 0px; // Finalmente regresa al principio}
}Manifestación
Análisis: monitoreo de eventos de enlace, se muestra la animación de presionar prolongadamente el botón y se oculta la animación de soltar el botón.
Finalmente llega el momento de ponerlo en uso y ver el efecto conseguido.
<el-button id="bouncingBallBtn">Entrada de voz</el-button> <pelota-que-rebota v-if="mostrarBounce" />
/** datos muestranBounce: falso */
montado() {
let theBouncingBtn = document.getElementById("bouncingBallBtn");
//Terminal móvil theBouncingBtn.addEventListener("touchstart", this.startBouncing, false);
theBouncingBtn.addEventListener("touchend", this.endBouncing, falso);
// lado de la PC theBouncingBtn.addEventListener("mousedown", this.startBouncing, false);
theBouncingBtn.addEventListener("mouseup", this.endBouncing, falso);
}
/** Visualización de animación*/
empezar a rebotar (evento) {
evento.preventDefault();
this.showBouncing = verdadero;
},
/** Ocultación de animación*/
finalBounce(evento) {
evento.preventDefault();
this.showBouncing = falso;
},Con esto concluye este artículo sobre la animación CSS3 para implementar múltiples bolas que rebotan (animación de entrada de voz). Para obtener más información sobre las bolas que rebotan CSS3, busque artículos anteriores en downcodes.com o continúe explorando los artículos relacionados a continuación. Espero que admita códigos descendentes. com más en el futuro!