Animation

A common way to animate an interface

In small programs, you can often use CSS gradients and CSS animations to create simple interface animations.

During the animation process, you can use bindtransitionend bindanimationstart bindanimationation bindanimationend to listen for animation events.

Note: None of these events are bubbling events and need to be bound to the node where the animation actually occurred for them to take effect.

You can also use the wx.createAnimation interface to dynamically create simple animations. ( The key frame animation interface described below is recommended in the new version of the little program foundation library instead.) ）

Key frame animation

Base library 2.9.0 starts to support, and low versions need to be compatible.

Starting with the small program base library 2.9.0, a friendlier animation creation method is supported to replace the old wx.createAnimation. It has better performance and a more controlled interface.

In a page or custom component, you can use the this.animate interface when keyframe animation is required:

this.animate(selector, keyframes, duration, callback)

Description of the parameters

The structure of the object in Keyframes

The sample code

Preview the effect in the developer tool

  this.animate('#container', [
    { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
    { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00'},
    { opacity: 0.0, rotate: 90, backgroundColor: '#FF0000' },
    ], 5000, function () {
      this.clearAnimation('#container', { opacity: true, rotate: true }, function () {
        console.log("清除了#container上的opacity和rotate属性")
      })
  }.bind(this))

  this.animate('.block', [
    { scale: [1, 1], rotate: 0, ease: 'ease-out'  },
    { scale: [1.5, 1.5], rotate: 45, ease: 'ease-in', offset: 0.9},
    { scale: [2, 2], rotate: 90 },
  ], 5000, function () {
    this.clearAnimation('.block', function () {
      console.log("清除了.block上的所有动画属性")
    })
  }.bind(this))

When the animate API is called, some new style properties are added to the node to override the original corresponding style. If you need to clear these styles, you can use this.clearAnimation to clear these properties after all the animations on the node have been executed.

this.clearAnimation(selector, options, callback)

Description of the parameters

Scroll-driven animation

We found that constantly changing the progress of animations based on scrolling positions is a more common scenario, and this type of animation gives the feeling that the interface interaction is consistent and natural, and the experience is better. Therefore, a scroll-driven animation mechanism is supported starting with the small program base library 2.9.0.

Based on the keyframe animation interface above, a New ScrollTimeline parameter has been added to bind scroll elements (currently only scroll-view is supported). The interface is defined as follows:

this.animate(selector, keyframes, duration, ScrollTimeline)

The structure of the object in ScrollTimeline

The sample code

Preview the effect in the developer tool

  this.animate('.avatar', [{
    borderRadius: '0',
    borderColor: 'red',
    transform: 'scale(1) translateY(-20px)',
    offset: 0,
  }, {
    borderRadius: '25%',
    borderColor: 'blue',
    transform: 'scale(.65) translateY(-20px)',
    offset: .5,
  }, {
    borderRadius: '50%',
    borderColor: 'blue',
    transform: `scale(.3) translateY(-20px)`,
    offset: 1
  }], 2000, {
    scrollSource: '#scroller',
    timeRange: 2000,
    startScrollOffset: 0,
    endScrollOffset: 85,
  })

  this.animate('.search_input', [{
    opacity: '0',
    width: '0%',
  }, {
    opacity: '1',
    width: '100%',
  }], 1000, {
    scrollSource: '#scroller',
    timeRange: 1000,
    startScrollOffset: 120,
    endScrollOffset: 252
  })

Advanced animation

In some complex scenarios, the above animation methods may not work.

WXS responds to events by dynamically adjusting the node's style property by using WXS to respond to events. Y ou can animate by constantly changing the value of the style property. It also dynamically generates animations based on the user's touch events.

Continuous use of setData to change the interface can also achieve the effect of animation. T his can change the interface arbitrarily, but usually results in large delays or catatons, or even a small program deadlock. Y ou can improve performance by changing the setData of the page to setData in a custom component. The following example is an example of using setData to implement stopwatch animation.