prefacio
No hace mucho, vi un pequeño programa relativamente interesante, Jingshen Muyu, que puede realizar golpes en línea en peces de madera, golpes automáticos en peces de madera, cuentas de plato de mano, cuenco de meditación.
La función de todo el applet es relativamente pequeña y simple, y ha sido popular durante un tiempo. No importa en el mercado de aplicaciones de aplicaciones o en el applet, algunos desarrolladores han ganado mucho dinero para aliviar la ansiedad de los jóvenes contemporáneos. La descompresión budista se considera entretenimiento, puedes pensar que este tipo de aplicaciones son inútiles y alejadas de los negocios, pero por el contrario, en términos de expansión y extensión del negocio, algunas personas todavía están dispuestas a pagar por ellas.
Revelemos la implementación del ejemplo de golpear peces de madera en este pequeño programa.
ejemplo concreto
Se pueden ver ejemplos específicos de animación flotante
código específico
Aquí está el Vuecódigo como un ejemplo
<template><div class="leijia-wrap"><div class="leijia-content"> <h2>静神木鱼</h2> <div class="text">{
{count}}<span class="animatetip" v-show="isTip">功德+1</span></div> <div class="btn"> <el-button type="primary" size="mini" @click="handleClick" ref="btnClick">敲击</el-button> <el-button type="primary" size="mini" @click="handleVoince" ref="btnJinYin">{
{isVoince == true?'非静音':'静音'}}</el-button> <el-button type="danger" size="mini" @click="handleAuto">{
{onOff == true?'自动':'非自动'}}</el-button> <el-button type="info" size="mini" @click="handleClear">清除</el-button> </div></div><!--敲击音频---> <audio id="myaudio" src="../images/js-article-imgs/video/qiaoji.mp3"style="display:none"> Your browser does not support the audio element.</audio></div>
</template>
<script> export default {data() {return { count: 0, timer: null, onOff: true, isVoince: true, isTip: false}},mounted(){this.count = localStorage.getItem('count') || 0; // 获取本地存储localStorage},methods: {// 敲击handleClick() {this.count = parseInt(this.count)+1;localStorage.setItem('count',this.count);// 设置本地存储localStoragethis.isTip = true;setTimeout(()=> {
this.isTip = false;
}, 300);let music = document.getElementById("myaudio");if(this.isVoince) {music.play();}else {music.pause();}},// 控制静音还是非静音handleVoince() { let music = document.getElementById("myaudio"); if(this.isVoince) {music.play(); }else { music.pause(); } this.isVoince = !this.isVoince;}, // 重置数据,清除localStoragehandleClear(){localStorage.removeItem('count');this.count = 0;},// 自动敲打,累加handleAuto() {let music = document.getElementById("myaudio");if(this.onOff) {this.timer = setInterval(() => {this.count = parseInt(this.count)+1;this.isTip = true; setTimeout(()=> {
this.isTip = false;
}, 300);music.play();},1000)}else {clearInterval(this.timer); // 清除定时器music.pause();}this.onOff = !this.onOff;},}
} </script>
<style lang="scss" scoped> .leijia-wrap {text-align: center;margin-top: 10px;.btn {margin-top: 20px;}.text {position:relative;}.animatetip {opacity: 0;animation: showtip 1s;position:absolute;right: 320px;top: 0px;}/* 关键帧动画 */@keyframes showtip {0% {opacity: 1;transform: translateY(0);}100% {opacity: 0;transform: translateY(-15px);}}} </style>
Aunque el pequeño ejemplo anterior es pequeño, incluye algunos conocimientos. Para lograr este efecto, necesita saber
analizar
1. Cómo realizar la acumulación de números de control y resolver el problema del +empalme de cadenas (resolver el problema específicamente parseInt())
2. Cómo realizar la acumulación automática, necesita saber cómo configurar el temporizador setIntervaly borrar el temporizador clearInterval
3. Un control controla el cambio del estado del elemento, la configuración del interruptor
4. Al actualizar la página, la próxima vez que ingrese y aún conserve el último estado, debe usar el caché local localStoragey borrar el caché local especificado localStorage.removeItem('key')
5. Cómo para controlar la reproducción ( ) y la pausa ( ) del audioelemento de audio 6. Piense Para lograr una animación flotante hacia arriba acumulativa, necesita usar el fotograma clave de animaciónplaypausecss3
El control anterior 功德加+1utiliza los fotogramas clave de animación vuecombinados y la combinación de transparencia para controlarv-showcss3
Cabe señalar que el préstamo simple v-showno se puede controlar por completo. También debe tomar prestado uno setTimeout, ocultarlo primero, luego mostrarlo y cuánto tiempo lleva ocultar el elemento al final .
En el applet de WeChat, la lógica de la implementación es similar. Utiliza la función de almacenamiento local de WeChat. Para la animación, se puede realizar usando la API de animación que viene con el applet.
El ejemplo es relativamente sencillo, pero básicamente logra la función deseada, si hay algo que no entiendes, puedes comunicarte más
Por fin
Recientemente encontré un documento de VUE, que resume los diversos puntos de conocimiento de VUE y los organiza en "36 habilidades que el desarrollo de Vue debe conocer". El contenido es relativamente detallado y la explicación de cada punto de conocimiento también está en su lugar.
Amigos necesitados, puede hacer clic en la tarjeta a continuación para recibir y compartir gratis