# animation

# Common Ways of Interface Animation

In Mini programs, you can usually use CSS gradual change and CSS animation To create simple interface animations.

{% Minicode ('oHKxDPm47h5k') %}

Animation process, you can use the Binding transition end bindanimationstart bindanimationiteration Binding animation end To listen for animated events.

Note: These events are not bubbling events and need to be bound to the node where the animation actually happened.

At the same time, you can also use wx.createAnimation Interface to dynamically create simple animation effects. (The following keyframe animation interface is recommended in the new version of the Mini Program Basics library instead.)）

# Keyframe animation

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

Mini Program base library 2.9.0 Began to support a more user-friendly way of creating animations in place 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 a keyframe, you can use this.animate Interface:

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

Dxplaination of parameters

keyframes The structure of the object in

# sample code

{% Minicode ('P73kJ7mi7UcA' ) %}

  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(" Purged#Opacity and rotate properties on container ")
      })
  }.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("Cleared all animation properties on.block")
    })
  }.bind (this))

call animate API After the node will add some style properties to override the original corresponding style. If you need to clear these styles, you can use them after all animations on the node have been executed this.clearAnimation Clear these properties.

this.clearAnimation(selector, options, callback)

Dxplaination of parameters

# Scroll Driven Animation

We found that changing the progress of the animation based on the scroll position is a more common scenario, and this kind of animation can make the interface interaction feel more coherent and natural. Therefore, the Mini Program base library 2.9.0 Started to support a scrolldriven animation mechanism.

Based on the above key frame animation interface, add a ScrollTimeline Is used to bind scrolling elements (currently only supported scroll-view）。The interface is defined as follows:

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

ScrollTimeline The structure of the object in

# sample code

{% Minicode ('994o8jmY7FcQ') %}

  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 methods

In some complex scenes, the above animation methods may not be applicable.

WXS Responding to Events In a way that can be achieved by using the WXS To respond to events by means of dynamically adjusting the node's style Property. Through constant change style The value of the property can be animated. At the same time, this method can also dynamically generate animations based on user touch events.

Continuous use setData To change the interface can also achieve the effect of animation. This can change the interface arbitrarily, but usually causes a large delay or stuttering, and even causes the Mini Program to freeze. At this point you can do this by putting the page's setData to change into Custom Components to hit the target setData To improve performance. The following example is using the setData To animate a stopwatch.

{% Minicode ('cRTvdPmO7d5T') %}