Animate

AntV
Search…
Installation
Getting Started
Data
Understanding F2 charts
Animate
If you want a more beautiful animation, you can define your own animation.
Animation Register
Animation register is used to achieve the goal of reusing animation functions. After register, you can use it everywhere.
1
// require registeration class of animation
2
const Animate = require('@antv/f2/lib/animation/animate');
3
/**
4
 * @param  {String} animationName   Animation name, specified by users
5
 * @param  {Function} animationFun  define specific animations 
6
 **/
7
Animate.registerAnimation('animationName', animationFun); //  register a animation called animationName
8
​
9
​
10
// use the registered animation
11
chart.line().animate({
12
  appear: {
13
    animation: 'animationName'  // the registered name of the animation
14
  }
15
})
Copied!
Details on Custom Animation
F2 provides a complete animation customization mechanism. Users can customize animation behavior for any states of graphic element that supports animation. The states here are the four types of animations: appear, enter, leave, update.
The animations in F2 all act on Shape. The animation is performed by changing shape's attributes frame by frame, take the movement of the circle as example:
The animation is very simple, it moves the circle from point A to point B (the coordinate is {x: 230, y: 50}). We need only to call shape.animate() to specify the final state, i.e. graph attributes, of the shape.
1
// the initial position of circle on canvas is x: 100, y: 100
2
circle.animate().to({
3
  attrs: {
4
    x: 230, // final coordinate of x-axis
5
    y: 50   // final coordinate of y-axis
6
  }, // specify the final state of the circle
7
  easing: 'linear', // easing function
8
  duration: 1500 // duration of the animation
9
})
Copied!
See here for graph attributes of various shapes.
Three parameters will be passed to the user-defined animation function, in the order of shape, animateCfg, coord.
1
chart.line().animate({
2
  appear: {
3
    animation: (shape, animateCfg, coord) => {}
4
  }
5
})
Copied!
Parameters:
shape: The shape instance which animation is acted on.
You can get graph attributes attrs from shape instance and then customize the animation.
The attributes are provided to help users ease the customization:
Attributes
Method To Get
Type
Explanation
attrs
shape.get('attrs')
Object
Get all graph attributes of the shape
className
shape.get('className')
String
Get the type name of the shape
origin
shape.get('origin')
Object
Get the drawing data and corresponding original data record of the shape
index
shape.get('index')
Number
Get the index of the shape, i.e. the order of the data record in data set
In addition, shape.attr(name) can also be used to get graph attribute from shape. More methods of shape are listed in Shape API.
F2 also provides a cacheShape attribute for the shape instance in the update state.This attribute stores the content of the previous state for the shape, so that users can customize the animation for changing. The cacheShape contains the following content:
1
{
2
  animateCfg: {}, // configuration for animation
3
  attrs: {}, // graph attrs of previous state
4
  className: "", // class name of the shape
5
}
Copied!
animateCfg: Object, configuration for animation
The following attributes are contained in animateCfg:
1
{
2
  easing: , // easing function
3
  duration: , // duration of the animation
4
  delay: // delay of the animation
5
}
Copied!
coord: Coordinate object, represents the current coordinate of the chart. The attributes contained in coordinate object are listed in Coordinate API.
Example
The example below shows how to customize the apear animation for bar chart, online demo here: 
column1.gif
1
const { Chart, Animate, Util, G } = F2;
2
  // register an animation called delayScaleInY
3
  Animate.registerAnimation('delayScaleInY', function(shape, animateCfg) {
4
    const box = shape.getBBox(); // get the bounding box of the shape
5
    const origin = shape.get('origin'); // get the drawing data of the shape
6
    const points = origin.points; // the points that compose of each column
7
    const centerX = (box.minX + box.maxX) / 2;
8
    let centerY;
9
    if (points[0].y - points[1].y <= 0) { // when the point is below 0
10
      centerY = box.maxY;
11
    } else {
12
      centerY = box.minY;
13
    }
14
​
15
    shape.transform([
16
      [ 't', centerX, centerY ],
17
      [ 's', 1, 0.1 ],
18
      [ 't', -centerX, -centerY ]
19
    ]); // use matrix transformation to change the origin state of the shape. scaleY.
20
    const index = shape.get('index');
21
    let delay = animateCfg.delay; // get the animation configuration
22
    if (Util.isFunction(delay)) {
23
      delay = animateCfg.delay(index); // set delay time according to the index
24
    }
25
    const easing = animateCfg.easing; // get the animation configuration
26
​
27
    const matrix = shape.getMatrix(); // get the current matrix
28
    const endMatrix = G.Matrix.transform(matrix, [
29
      [ 't', centerX, centerY ],
30
      [ 's', 1, 10 ],
31
      [ 't', -centerX, -centerY ]
32
    ]); // the matrix for the final state of the shape
33
​
34
    shape.animate().to({
35
      attrs: {
36
        matrix: endMatrix
37
      },
38
      delay,
39
      easing,
40
      duration: animateCfg.duration
41
    }); // do the animation
42
  });
43
​
44
  const data = [];
45
  for (let i = 0; i < 50; i++) {
46
    data.push({
47
      x: i,
48
      y: (Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5
49
    });
50
  }
51
  const chart = new Chart({
52
    id: 'mountNode',
53
    width: 375,
54
    height: 200,
55
    pixelRatio: window.devicePixelRatio
56
  });
57
  chart.axis('x', false);
58
  chart.legend(false);
59
  chart.source(data);
60
  chart.interval()
61
    .position('x*y')
62
    .color('y', '#4a657a-#308e92-#b1cfa5-#f5d69f-#f5898b-#ef5055')
63
    .animate({ // customize animation configuration
64
      appear: {
65
        animation: 'delayScaleInY', // use the registered animation name
66
        easing: 'elasticOut', // easing function
67
        delay(index) {
68
          return index * 10;
69
        } // delay time for each shape according to index
70
      }
71
    });
72
  chart.render();
Copied!
Interaction
Shape
Last modified 3yr ago
Copy link
Contents
Animation Register
Details on Custom Animation
Example