SoFunction
Updated on 2025-04-03

Using Vue to implement an accumulated upward floating animation

Preface

Not long ago, I saw a more interesting mini program, which is Jingshen Wood Fish, which can achieve online knocking of wooden fish, automatic knocking of wooden fish, hand-trading Buddhist beads, and Jingxin Song Bowl

The entire mini program has a relatively small function and is simple. It has been popular for a while. Whether in the App application market or in the mini program, some developers have made a lot of money to alleviate the anxiety of contemporary young people. Buddhist decompression is considered an entertainment. You may think that this kind of application is of no use and is far 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 example of knocking wooden fish in this mini program

Specific code

<template>
  <div class="leijia-wrap">
        <div class="leijia-content">
             <h2>Jingshen Wood Fish</h2>
             <div class="text">{{count}}<span class="animatetip" v-show="isTip">Merit+1</span></div>
             <div class="btn">
                 <el-button type="primary" size="mini" @click="handleClick" ref="btnClick">tap</el-button>
                 <el-button type="primary" size="mini" @click="handleVoince" ref="btnJinYin">{{isVoince == true?'Non-Mute':'Mute'}}</el-button>
                 <el-button type="danger" size="mini" @click="handleAuto">{{onOff == true?'automatic':'Not automatic'}}</el-button>
                 <el-button type="info" size="mini" @click="handleClear">Clear</el-button>
             </div>
        </div>
        <!--tap音频--->
         <audio    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(){
         = ('count') || 0;   // Get local storage localStorage    },

    methods: {
      // Knock      handleClick() {
         = parseInt()+1;
        ('count',);    // Set local storage localStorage         = true;
        setTimeout(()=> {
			 = false;
		}, 300);
        let music = ("myaudio");
        if() {
            ();
        }else {
            ();
        }
        
      },

      // Controlling mute or non-silent      handleVoince() {
         let music = ("myaudio");
         if() {
            ();
         }else {
             ();
         }
          = !;
      },

     // Reset the data and clear localStorage      handleClear(){
        ('count');
         = 0;
      },

      // Automatic knocking, accumulation      handleAuto() {
        let music = ("myaudio");
        if() {
             = setInterval(() => {
                 = parseInt()+1;
                 = true;
                 setTimeout(()=> {
			         = false;
		        }, 300);
                ();
            },1000)
        }else {
            clearInterval();   // Clear the timer            ();
        }
         = !;
      },
    }
}
</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;
    }

    /* Keyframe animation */
    @keyframes showtip {
        0% {
            opacity: 1;
            transform: translateY(0);
        }
        100% {
            opacity: 0;
            transform: translateY(-15px);
        }
    }
  }

</style>

Although the above example is very small, it covers some knowledge. If you want to achieve this effect, you need to know.

analyze

  • How to control the accumulation of numbers and solve the string+Splicing problem (specific solution to useparseInt()Just)
  • How to achieve automatic accumulation, you need to know how to set the timersetInterval, and clear timerclearInterval
  • A control controls the change of element state and switch settings
  • When refreshing the page, the next time you come in, you still retain the previous state, and you need to use local cachelocalStorage, and clear the specified local cache('key')
  • How to control audioaudioPlayback of elements(play) and pause (pause)
  • To implement the accumulated upward floating animation, you need to usecss3Animation keyframes in

Control aboveMerit plus 1, usedvueAmong themv-showCombinedcss3animation keyframes and combined with transparency to control

It is important to note that simple borrowingv-showIt's not completely controlled, and you need to borrow onesetTimeout,Hide first, then display, and how long it takes, finally let the element hide

In WeChat applets, the implementation logic is similar. It uses WeChat’s local storage function. For animations, it can be achieved by using the animation API provided by the applet.

This is the end of this article about using Vue to achieve an accumulated upward floating animation. For more related Vue accumulated upward floating animation content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!