AntV

AntV

Powered by GitBook
Have an account? Sign in

Animate

Last updated 4 months ago
Edit on GitHub
Contents

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.

Previous
Guide
Next
Interaction
Contents