Mini Program to Implement Text Circular Scrolling Animation

This article shares the specific code of the applet to realize the text loop scrolling through examples for your reference. The specific content is as follows

Solving the problem:

1. Text loop playback effect

2. Exit the applet and stop the hidden background animation (solved)

Effect:

Code:

wxml

<view animation="{{animation}}" class="animation">
  919 test use - small program loop playback~~~
</view>

wxss

.animation{
  width: 100%;
  transform: translateX(100%);
  position: fixed;
  top: 45%;
  font-size: 16px;
  font-weight: bold;
}

Final js

/**
   * Life cycle function - listen for the completion of the initial rendering of the page*/
  onReady: function () {
    this.bindAnimation();
  },
 
  bindAnimation(){
    var this_ = this;
      var animation = wx.createAnimation({
        duration: 5000,
        timingFunction: 'linear',
        transformOrigin:"100% 0 0"
      })
      animation.translateX('-100%').step();
      this.setData({
        animation:animation.export(),
      })
      //Set up loop animation this.animation = animation;
      setInterval(function(){
        //The second animation text position initialization this.Animation2();
 
        // Delay the scrolling animation (the effect will be better)
        setTimeout(function(){
          this.animation.translateX('-100%').step();
          this.setData({
            animation: animation.export(),
          })
        }.bind(this),200);
 
        
      }.bind(this),5000);
 
  },
 
  /**
   * Initialize the second animation text position*/
  Animation2(){
    var this_ = this;
    var animation2 = wx.createAnimation({
      duration: 0,
      timingFunction: 'linear',
      transformOrigin:"100% 0 0"
    })
    animation2.translateX('100%').step();
    this_.setData({
      animation:animation2.export(),
    })
  },
 
  /**
   * Solve the problem of mini program exit and background animation stopping */
  onHide: function () {
    //Solve the problem of mini program exit and background animation stopping //Re-trigger the animation method this.bindAnimation();
},

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

How to start and pause the loop animation of the mpvue applet
WeChat applet realizes looping animation effect
WeChat applet development animation loop animation to achieve the effect of floating clouds

<<: Detailed explanation of MySQL execution principle, logical layering, and changing database processing engine

>>: Tutorial on installing Docker in Windows 10 subsystem Ubuntu (WSL) (with pictures and text)