Animate

Search…
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:
1
const F2 = require('@antv/f2/lib/core');
2
const Animation = require('@antv/f2/lib/animation/detail');
3
// Method 1: Global Registeration
4
F2.Chart.plugins.register(Animation); 
5
​
6
// Or Method2: Registeration for a Chart instance
7
const chart = new F2.Chart({
8
  id: 'canvas',
9
  plugins: Animation
10
});
Copied!
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.
1
chart.line().animate({
2
  appear: {
3
    animation: 'fadeIn',
4
    duration: 1000
5
  },
6
  update: false
7
});
Copied!
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:
1
{
2
  appear: {
3
    animation: 'fadeIn',
4
    easing: 'elasticIn', 
5
    delay: 1000, 
6
    duration: 600
7
  },
8
  update: false
9
}
Copied!
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.
1
 /**
2
   * Animation callback
3
   * @param  {Shape} shape       shape of the animation
4
   * @param  {Object} animateCfg configuration of the animation, such as easing, duration, etc.
5
   * @param  {Coord} coord       current coordinate object           
6
   */
7
  animation: (shape, animateCfg, coord) {}
Copied!
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.
1
easing(t) {}
Copied!
Example:
1
easing: (t) => {
2
  return Math.sqrt(1 - --t * t);
3
}
Copied!
delay callback
1
/**
2
 * return the delay of the animation
3
 * @param  {Number} index      index of the shape, same as the shape's order of the data record in data set.
4
 * @param  {String} id         id of current shape
5
 * @return {Number}            delay of the animation, in millisecond
6
 */
7
delay(index, id) {}
Copied!
shape.animate()
We also provide a method called animate for Shape instance to act the specific animation. See below for usage:
1
shape.animate()
2
  .to({
3
    attrs: {Object}, // the final graph attributes of the shape
4
    easing: {String} || {Function}, // easing function
5
    duration: {Number}, // duration of the animation, in millisecond
6
    delay: {Number} // delay time of the animation, in millisecond
7
  }) // animation action
8
  .onStart(function() {
9
    // callback when animation starts
10
  })
11
  .onUpdate(function() {
12
    // callback during the animation
13
  })
14
  .onEnd(function() {
15
    // callback when animation ends
16
  })
17
  .onFrame(function(t) {
18
    // callback for animation's every frame, `t` ranges from 0 to 1.
19
  });
Copied!
Example
See demo here.