AntV
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.
Last modified 3yr ago