How does Js implement an accumulative upward floating animation

foreword

Not long ago, I saw a relatively interesting small program, Jingshen Muyu, which can realize online knocking on wooden fish, automatic knocking on wooden fish, hand dish beads, meditation singing bowl

The function of the whole applet is relatively small and simple, and it has been popular for a while. No matter in the App application market or in the applet, some developers have made a lot of money to relieve an anxiety of contemporary young people. Buddhist decompression is considered entertainment. You may think that this kind of application is useless and far away from business, but on the contrary, in terms of business expansion and extension, some people are still willing to pay for it.

Let's reveal the implementation of the example of knocking wooden fish in this small program

concrete example

Specific examples can be seen floating up animation

specific code

Here is the Vuecode as an example

<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> 

Although the above small example is small, it includes some knowledge. To achieve this effect, you need to know

analyze

1. How to realize the accumulation of control numbers, and solve the problem of string +splicing (specific solutions parseInt()can be used)
2. How to realize automatic accumulation, you need to know how to set the timer setIntervaland clear the timer clearInterval
3. A control controls the change of the state of the element , the setting of the switch
4. When refreshing the page, the next time you come in and still retain the last state, you need to use the local cache localStorageand clear the specified local cache localStorage.removeItem('key')
5. How to control the playback ( ) and pause ( ) of the audio audioelement 6. Think To achieve cumulative upward floating animation, you need to use the animation keyframeplaypause
css3

The above control 功德加+1uses the vuecombined v-showanimation css3keyframes and the combination of transparency to control

It should be noted that simple borrowing v-showdoes not allow complete control. You also need to borrow one setTimeout, hide it first, then display it, and how long it takes to hide the element at last

In the WeChat applet, the logic of the implementation is similar. It uses the local storage function of WeChat. For animation, it can be realized by using the animation API that comes with the applet.

The example is relatively simple, but basically achieves the desired function, if there is something you don’t understand, you can communicate more

At last

I recently found a VUE document, which summarizes the various knowledge points of VUE and organizes it into "36 skills that Vue development must know". The content is relatively detailed, and the explanation of each knowledge point is also in place.

Friends in need, you can click the card below to receive and share for free