Skip to content

Latest commit

 

History

History
202 lines (155 loc) · 12.7 KB

animation.md

File metadata and controls

202 lines (155 loc) · 12.7 KB
Raw

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.