WeChat applet to achieve the revolving lantern effect example

Preface

In daily development, we often encounter the effect of horizontal scrolling of text, commonly known as a carousel, which is also a function often used in projects. It is very common in the web front end. Today I will introduce the implementation methods of mini programs. One is to use CSS style, and the other is to use the animation function of mini programs.

@keyframes Implementation

It is very convenient to use the @keyframes rule. It only requires CSS styles and the usage is the same as on the web.

<view class="marquee">
 <text>This is a scrolling text</text>
</view>

The style class, from to, is used to define the start and end of the animation. Here, slide from the rightmost end of the screen to the left, and a new round of animation starts again after touching the leftmost end.

@keyframes translation {
 from {
 margin-left: 750rpx; //Starting from the rightmost end of the screen}

 to {
 margin-left: 0px;
 }
}

.marquee{
 white-space: nowrap;
 animation-name: translation; //Define the name of the animation animation-duration: 3s;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
}

If the desired effect is that after sliding to the left, the text continues to slide to the left until it disappears completely, and then the animation starts from the rightmost, then you need to add the length of the text. Here you need to calculate the length of the text and use the SelectorQuery object instance to get the width of the text node. It is executed when the page is rendered for the first time onReady, and the object corresponding to the text node information is queried to get the length of the text. The marquee class name above is defined here.

onReady: function () {
 let query = wx.createSelectorQuery();
 query.select('.marquee').boundingClientRect();
 query.exec((res) => {
  if (res[0]) {
  this.setData({
   marqueeWidth: res[0].width
  })
  }
 })
}

Then use the CSS var() function to insert the defined property value to the end position, so that it runs the entire screen and the length of its own text. Define a property called "--marqueeWidth", and then use the var() function to call the property in the wxss style file:

<view class="marquee" style="--marqueeWidth:-{{marqueeWidth}}px">
 <text>This is a scrolling text</text>
</view>

In wxss style:
@keyframes translation {
 from {
 margin-left: 750rpx;
 }

 to {
 margin-left: var(--marqueeWidth);
 }
}

This is achieved through CSS, which is very convenient, but there will be adaptation problems on some models. Another way is to achieve it through Animation.

Animation Implementation

The animation is completed through the animation instance, and the view is initially located on the right side of the screen and out of the screen.

<view class="marquee2" bindtransitionend="animationend" animation="{{animationData}}">
	<text>This is a scrolling text</text>
</view>

.marquee2{
 display: inline-block;
 white-space: nowrap;
 margin-left: 750rpx;
}

Similarly, the length of the text is calculated here, and the translation property is used to move it until it is out of the entire screen. After a set of animations is completed, call the bindtransitionend callback to execute the animation again.

this.animation = wx.createAnimation({
 duration: 3000,
 timingFunction: 'linear'
});
var query = wx.createSelectorQuery();
query.select('.marquee2').boundingClientRect();
query.exec((res) => {
 if (res[0]) {
 this.setData({
  marqueeWidth: res[0].width //text length}, () => {
  this.doAnim()
 })
 }
})


doAnim: function () {
 //Scroll left to beyond the screen, here is a temporary hardcoded screen width of 375px
 this.animation.translate(-this.data.marqueeWidth - 375, 0).step();
 setTimeout(() => {
  this.setData({
  animationData: this.animation.export(),
  });
 }, 10)
}

After the first animation ends, start over, listen to the end of the animation through animationend, and then execute it again.

animationend() {
 //Reset this.animation.translate(0, 0).step({ duration: 0 });
 this.setData({
  animationData: this.animation.export()
 }, () => {
  //Restart the animation this.doAnim()
 });
}

When this animation is run on the mini program development tool, the animation will suddenly pause. You can try it on your mobile phone.

It is relatively easy to implement, and the carousel effect is also something we often use in our projects. It is also a good opportunity to get familiar with the animation of the mini program.

Summarize

This is the end of this article about the example of how to achieve the revolving lantern effect in WeChat mini-programs. For more relevant content about the revolving lantern effect in mini-programs, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!