Wechat applet to achieve the effect of gradual in and out animation

Time:2019-12-1

Preface

During the display of applet list, I received a requirement. You need to add animation to the list display. The design video effect is as follows:

You need to display each card in turn when entering the list page. After the display, you need to hide the cards before that day.

Implementation ideas

To achieve the animation effect, first of all, we need to add a CSS animation to each card. Because the display of each card has time interval and considering the hidden effect after the display, the animation effect needs to be added dynamically with JS. After reading the wechat development documents, I found that wechat applet provides an animation object. After looking at the parameters, I found that it can achieve the effect on demand. The specific API is as follows:

Wx.createanimation (object object) creates an animation object. Finally, the animation data is exported to the animation attribute of the component through the export method of the animation instance. There are the following parameters: duration, timing function, delay

For the created animation object, the following attributes are required in this implementation:

Animation. Export() can export the animation queue, and the export method will clear the previous animation operations after each call.
Animation.step (object object) indicates that a group of animations are completed. You can call any animation method in a group of animations. All the animation in a set of animation will start at the same time. After a group of animation is completed, the next group of animation will be carried out. For example, when a group of animation ends, it ends with step()
The translation distance of animation.translatey (number translation) in Y axis, in PX
Animation.opacity (number value) value range of transparency 0-1

If you see the above attributes and use them reasonably, the animation effect mentioned in the implementation requirements is stable.

Implementation steps

Encapsulates a method for creating animation and making it easy to call

/**
 *Animation implementation
 * @method animationShow
 *@ param {that} current card
 *@ param {opacity} transparency
 *@ param {delay} delay
 *@ param {ISUP} moving direction
 */
 animationShow: function (that,opacity, delay, isUp) {
 let animation = wx.createAnimation({
  duration: 1000,
  timingFunction: 'ease',
  delay: delay
 });
 <! -- considering the need to hide the cards before the day, make the following judgment to give different animation effects -- >
 if (isUp == 'down') {
  animation.translateY(0).opacity(opacity).step().translateY(-80).step();
 } else if (isUp == 'up') {
  animation.translateY(0).opacity(opacity).step().translateY(-140).opacity(0).step()
 } else {
  animation.translateY(0).opacity(opacity).step()
 }
 let params = ''
 params = animation.export()
 return params
 },

Initialize the style of each card

First, the position of each card is translated 80 pixels to the Y axis relative to itself, and the transparency is set to 0. This allows you to move down the page and let the card show gradually.


.init{
 opacity: 0;
 transform: translateY(-80px)
}

Processing data

Loop through each piece of data, and call the encapsulated method to get the animation attributes that the card should have


 for (let i = 0; i < transData.length; i++) {
 if (i == 0) {
  transData[i].animation = that.app.slideupshow(that, 1, 0, 'up')
 } else {
  transData[i].animation = that.app.slideupshow(that, 1, (i + 1) * 10, 'down')
 }
 }

Attach animation attribute to each card

<view animation="{{item.animation}}">

Realization effect

Basically consistent with the animation style in the design video, beautiful and Zizi.

summary

The above is the whole content of this article. I hope that the content of this article has some reference learning value for your study or work. Thank you for your support for developepaer.