preface

While making a list of small programs, I received a request. You need to animate the list display. The design video effect is shown below:

Implementation approach

To achieve this effect, you first need to add a CSS animation to each card. Because each card is displayed at a time interval, and because of the hidden effect after the display is complete, the animation effects need to be added dynamically with JS. After reading the development document of wechat, I found that wechat applet provided an Animation object of Animation. After looking at the parameters in it, I found that the required effect could be achieved. The following APIS are used:

Wx. createAnimation(Object Object) Creates an animation Object. Finally, the animation data is exported to the animation property of the component through the animation instance's export method. Duration (animation duration, ms),timingFunction (animation kingdom effect), Delay (animation delay)

The animation object created in this implementation needs the following properties:

Animation.export() exports the Animation queue, and the export method clears previous Animation operations after each call.

Animation.step(Object Object) indicates the completion of a set of animations. You can call any number of animation methods in a set of animations, and all animations in one set of animations will start at the same time, and the next set of animations will not proceed until one set is complete. For example, when a set of animations ends, it ends with step()

Animation. TranslateY (number translation) translation distance in Y axis, unit: px

Animation.opacity(number value) Specifies the value range from 0 to 1

Seeing the above properties, if used properly, then the implementation requirements refer to animation effects that are stable.

Implementation steps

Encapsulate a method to create an animation and make it easy to call

AnimationShow * @param {that} Current card * @param {opacity} * @param {delay} delay * @param {isUp} direction of movement */ animationShow:function (that,opacity, delay, isUp) {
    let animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease', delay: delay }); <! -- Considering the need to hide the cards from the day before, make the following decisions 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
  }, 
Copy the code

Initialize the style of each card

Start by shifting the position of each card 80 pixels relative to itself in the Y-axis, and set the opacity to 0. This allows you to pan the card down when you enter the page and let the card gradually appear. .init{ opacity: 0; transform: translateY(-80px) }Copy the code

Process the data

Loop through each piece of data, calling encapsulated methods to get the animation properties 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')}}Copy the code

Append an animation property to each card

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

Implementation effect