Animate
The charts for mobile should be more vividness. So F2 provides an animation mechanism.
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 RegisterationF2.Chart.plugins.register(Animation);​// Or Method2: Registeration for a Chart instanceconst chart = new F2.Chart({id: 'canvas',plugins: Animation});
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 |
enter | The entrance animation when the chart is re-rendered after the change of 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. |
|
leave | The destroy animation when the chart's shapes are destroyed after the change of the data |
|
Close the chart's animation.
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 |
| Object / Boolean | Configuration for appear animation. If |
| Object / Boolean | Configuration for enter animation. If |
| Object / Boolean | Configuration for update animation. If |
| Object / Boolean | Configuration for leave animation. If |
The configurable properties for appear, enter, update and leave are as follows:
Name | Type | Description |
| 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. |
| String / Function | easing action for animation.You can use the default easing functions provided by F2 or pass the function directly, see callback. |
| Number / Function | delay time for animation, in millisecond.You can specify delay time directly or pass a callback. |
| Number | duration of the animation, in millisecond. |
Example:
{appear: {animation: 'fadeIn',easing: 'elasticIn',delay: 1000,duration: 600},update: false}
The animations provided by default are shown below:
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) {}
The default easing functions are:
linearquadraticInquadraticOutquadraticInOutcubicIncubicOutcubicInOutelasticInelasticOutelasticInOutbackInbackOutbackInOutbounceInbounceOutbounceInOut
For animation effect of each easing function, see http://sole.github.io/tween.js/examples/03_graphs.html.
easing can also be a callback.
easing(t) {}
Example:
easing: (t) => {return Math.sqrt(1 - --t * t);}
/*** 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) {}
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 shapeeasing: {String} || {Function}, // easing functionduration: {Number}, // duration of the animation, in milliseconddelay: {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.});
See demo here.
