improve keyframe animation

[pissang]

This PR aims to improving the keyframe based animation in zrender and https://github.com/apache/echarts on top of it.

There are no big changes. All changes are minor but can imporve the flexibity of keyframe animation.

The ultimate goal is keyframe animation in zrender can have enough flexibity to display a very complex lottie animation.

Here is the full change list:

Add easing configuration for each keyframe

Instead of configuring easing for the whole animation. We support easing configuration for each frame now. It can provide more granular timing functions.

Use case

el.animate()
  .when(200, {
    x: 100
  }, 'cubicOut')
  .when(200, {
    x: 10
  }, 'cubicIn')
  .start();

Add cubic-bezier timing functions

Instead of using builtin easing function or custom callback functions. We add more commonly used cubic-bezier timing function which has same format with CSS.

Use case

el.animate()
  .when(200, {
    x: 100
  }, 'cubic-bezier(0.32, 0, 0.67, 0)')
  .start();

Support animation on gradient color

Previously we can only do interpolation between solid colors with string. Now we can have animation between gradient colors with arbitrary color stops.

But animation between gradient color and solid color are not supported yet.

Use case

el.style.fill = {
  type: 'linear',
  x: 0, y: 0, x2: 1, y: 0,
  colorStops: [{
    offset: 0,
    color: 'red'
  }, {
    offset: 1,
    color: 'black'
  }]
};

el.animateTo({
  style: {
    fill: {
      type: 'linear',
      x: 0, y: 0, x2: 1, y: 0,
      colorStops: [{
        offset: 0,
        color: 'white'
      }, {
        offset: 1,
        color: 'blue'
      }]
    }
  }
})

Support discrete animation

Previously if one property can not be animated, like ignore, it will skip the animation and assign the final value directly.

Now we can have discrete animation on these properties.

Use case

el.animate()
  // Hide at first
  .when(0, {
    ignore: true
  })
  // Start to show after 300ms.
  .when(300, {
    ignore: false 
  })
  // Hide again after 500ms.
  .when(500, {
    ignore: true
  })
  .start()

Support negative keyframe time

Negative keyframe exist in the lottie animations. It's useful when we wan it to be in the intermediate frame on the initial state.

Use case

el.animate()
  .when(-100, {
    x: 100
  })
  // When animation is started. The initial state will be interpolated between -100 and 100. Which will lead to the x to 150
  .when(100, {
    x: 200
  })
  .start();

Support anchorX and anchorY

anchorX and anchorY is used in some animation systems like lottie. It will translate the shape to the anchor before applying other transforms. The difference between anchor and origin is that origin won't translate the shape. Before using anchor, we need an extra group to do the anchor transform.

const anchorGroup = {
  x: -anchorX,
  y: -anchorY,
  children
};
const rootGroup = {
  children: [anchorGroup]
  ...otherTransforms
}

Now we can just use one group:

const rootGroup = {
  anchorX, anchorY,
  ...otherTransforms
}

Deprecated functions

These unused functions are removed to reduce the complexity.

• Catmull-Rom spline timing function is removed.

• Polyfill of dashed line in the browsers IE <= 10 is dropped.

• Clip#gap is removed.

• animation#onframe callback is removed. Use animation#on('frame') instead.

• zrender#pathToImage

[Ovilia]

Looks promising! 🔥

[plainheart]

LGTM