Animate

The charts for mobile should be more vividness. So F2 provides an animation mechanism.

How to Register Animation Plugin

F2 has modular structure provides best tree-shaking results and package size optimization.

If you just import F2 from '@antv/f2', then it has included Animation by default. But if you want a better package size optimization, you can register manually:

const F2 = require('@antv/f2/lib/core');
const Animation = require('@antv/f2/lib/animation/detail');
// Method 1: Global Registeration
F2.Chart.plugins.register(Animation); 

// Or Method2: Registeration for a Chart instance
const chart = new F2.Chart({
  id: 'canvas',
  plugins: Animation
});

Animation Introduction

F2 animations are all animated in shapes. According to the change of the chart's data, we classified animation into four types in F2:

Type	Description	Trigger Timing
appear	The entrance animation when the chart is first loaded.	first time calling chart.render()
enter	The entrance animation when the chart is re-rendered after the change of data.	chart.changeData(data)
update	The update animation when the chart is re-rendered and the chart's shapes' status is updated after the change of the data.	chart.changeData(data)
leave	The destroy animation when the chart's shapes are destroyed after the change of the data	chart.changeData(data)

Methods

chart.animate(false)

Close the chart's animation.

chart.<geomType>().animate(config)

Animation configuration for geometry.

chart.line().animate({
  appear: {
    animation: 'fadeIn',
    duration: 1000
  },
  update: false
});

Parameters:

• config: Object / false.

If config's value is false, means close the animation for the geometry.

If config is an object, the properties can configure include:

Name	Type	Description
appear	Object / Boolean	Configuration for appear animation. If appear is false, means close the appear animation for the geometry.
enter	Object / Boolean	Configuration for enter animation. If enter is false, means close the enter animation for the geometry.
update	Object / Boolean	Configuration for update animation. If update is false, means close the update animation for the geometry.
leave	Object / Boolean	Configuration for leave animation. If leave is false, means close the leave animation for the geometry.

The configurable properties for appear, enter, update and leave are as follows:

Name	Type	Description
animation	String / Function	It is the animation action which can be specific with a string, in this way, you are using the animation provided by F2 (see below). Or be a Function for customizing.
easing	String / Function	easing action for animation.You can use the default easing functions provided by F2 or pass the function directly, see callback.
delay	Number / Function	delay time for animation, in millisecond.You can specify delay time directly or pass a callback.
duration	Number	duration of the animation, in millisecond.

Example:

{
  appear: {
    animation: 'fadeIn',
    easing: 'elasticIn', 
    delay: 1000, 
    duration: 600
  },
  update: false
}

Default Animations

The animations provided by default are shown below:

Name	Demo
groupWaveIn
groupScaleInX
groupScaleInY
groupScaleInXY
shapesScaleInX
shapesScaleInY
shapesScaleInXY
fadeIn

animation callback

Animation action can also be a callback.

 /**
   * Animation callback
   * @param  {Shape} shape       shape of the animation
   * @param  {Object} animateCfg configuration of the animation, such as easing, duration, etc.
   * @param  {Coord} coord       current coordinate object           
   */
  animation: (shape, animateCfg, coord) {}

Default easing

The default easing functions are:

• linear

• quadraticIn

• quadraticOut

• quadraticInOut

• cubicIn

• cubicOut

• cubicInOut

• elasticIn

• elasticOut

• elasticInOut

• backIn

• backOut

• backInOut

• bounceIn

• bounceOut

• bounceInOut

For animation effect of each easing function, see http://sole.github.io/tween.js/examples/03_graphs.html.

easing callback

easing can also be a callback.

easing(t) {}

Example:

easing: (t) => {
  return Math.sqrt(1 - --t * t);
}

delay callback

/**
 * return the delay of the animation
 * @param  {Number} index      index of the shape, same as the shape's order of the data record in data set.
 * @param  {String} id         id of current shape
 * @return {Number}            delay of the animation, in millisecond
 */
delay(index, id) {}

shape.animate()

We also provide a method called animate for Shape instance to act the specific animation. See below for usage:

shape.animate()
  .to({
    attrs: {Object}, // the final graph attributes of the shape
    easing: {String} || {Function}, // easing function
    duration: {Number}, // duration of the animation, in millisecond
    delay: {Number} // delay time of the animation, in millisecond
  }) // animation action
  .onStart(function() {
    // callback when animation starts
  })
  .onUpdate(function() {
    // callback during the animation
  })
  .onEnd(function() {
    // callback when animation ends
  })
  .onFrame(function(t) {
    // callback for animation's every frame, `t` ranges from 0 to 1.
  });

Example

See demo here.