The animation instance is created using wx.createAnimation and supports various transformation methods including matrix operations, rotations, scaling, skewing, translations, and style properties like opacity and dimensions.

The Step Method

The step method is called after a sequence of transformations and accepts four optional parameters: duration, timingFunction, delay, and transformOrigin. The duration parameter is particularly interesting because it can be set to 0, which is useful for resetting animations to their initial state:

this.animationInstance.rotate(0, 0)
                  .scale(1)
                  .translate(0, 0)
                  .skew(0, 0)
                  .step({duration: 0}) // Reset to initial state with zero duration

The step method groupps multiple transformations into a single animation frame. All transformations called before a step will execute simultaneously. Consider these two approaches:

// Single step: rotate and translate simultaneously
this.animationInstance.rotate(180).translateX(100).step({duration: 800})

// Two sequential steps: first translate, then rotate
this.animationInstance.translateX(100).step({duration: 400}).rotate(180).step({duration: 400})

Although both animations take 800ms, their execution differs significantly. The first performs both transformations concurrently, while the second executes them sequentially.

The Export Method

The export method returns an object with an actions property, which is an array containing transformation data for each step. Each object in the array describes the transformations, duration, and timing for a single step.

After calling export, you apply this object to the component's animationData property via setData. Internally, the framework likely applies CSS transitions sequentially to create the animation effect. You can observe the style changes in the developer tools.

This explains why re-exporting without resetting doesn't trigger animations: the element's style is already in its final state from the previous animation, so no transition occurs. To replay animations, you must reset using step({duration: 0}).

Implementing Infinite Animations

To create infinite animations in WeChat Mini Programs, you can utilize the transitionend event. This event fires after each step completes - if you export 5 steps, the event triggers 5 times during the animation sequence.

Here's an implementation example using the event to create a continuous rotation animation:

// Template
<cover-image src="../img/line.png" :animation="animationData" @transitionend="restartAnimation"></cover-image>

// Script
onReady() {
  this.animationInstance = wx.createAnimation({
    duration: 8000,
    timingFunction: 'linear',
    delay: 0,
    transformOrigin: '50% 50% 0'
  })
  this.startAnimation()
},

startAnimation() {
  this.animationInstance.rotate(360).step()
  this.animationData = this.animationInstance.export()
},

restartAnimation() {
  this.animationInstance.rotate(0).step({duration: 0}) // Reset animation
  this.animationData = this.animationInstance.export()
  
  setTimeout(() => {
    this.animationInstance.rotate(360).step()
    this.animationData = this.animationInstance.export()
  }, 60) // Small delay before restarting
}

This approach resets the animation to its initial state when the transitionend event fires, then restarts it after a brief delay, creating a seamless loop.