# animation

# Common ways of animating interfaces

In Weixin Mini Program, you can often use CSS gradients and CSS animations to create simple interface animations.

Preview with Developer Tool

During animation, you can usebindtransitionend``bindanimationstart``bindanimationiteration``bindanimationendCome listen to the animated events.

Note: None of these events are bubble events and need to be bound to the node where the animation actually occurred before they can take effect.

You can also use the wx.createAnimation interface to dynamically create simple animation effects.(In the new version of the Weixin Mini Program base library, it is recommended to use the following key frame animation interface instead.)）

# Key frame animation

Start from base library version 2.9.0. Please remaining backward compatible.

Starting with the Weixin Mini Program base library {% version (2.9.0)%} supports a more user-friendly way of creating animations instead of the old wx.createAnimation 。It has better performance and a more controllable interface.

In a page or custom component, when you need to animate keyframes, you can use thethis.animateinterface:

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

Parameter explaination

Structure of objects in keyframes

# sample code

Preview with 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))

Calling the animate API will add some style attributes to the node to override the original corresponding style.If you need to clear these styles, you can clear them usingthis.clearAnimationafter all the animation on that node has been executed.

this.clearAnimation(selector, options, callback)

Parameter explaination

# Scroll-driven animation

We found that constantly changing the animation's pace based on the scrolling position is a common scenario, which can make the interface interaction feel coherent and natural, and the experience is better.Therefore, starting with the Weixin Mini Program base library {% version (2.9.0)%}, a scroll-driven animation mechanism is supported.

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

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

Structure of objects in ScrollTimeline

# sample code

Preview with 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 ways of animation

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

The way WXS responds to events You can dynamically adjust the style attribute of a node by using WXS to respond to events.Animation can be achieved by changing the value of the style attribute over and over again. At the same time, this method can also dynamically generate animations based on the user's touch events.

Continuous use of setData to change the interface method can also achieve the effect of animation.This can change the interface arbitrarily, but usually results in large latency or stuttering, and even Weixin Mini Program dead.You can improve performance by changing the page's setData to the setData in the custom component .The following example is an example of using setData to implement stopwatch animation.

Preview with Developer Tool