# 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: ```javascript 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.().animate(config)` Animation configuration for geometry. ```javascript 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](https://antv.gitbook.io/f2/api/animation#default-animations)). Or be a [Function](https://antv.gitbook.io/f2/api/animation#animation-callback) for customizing. | | `easing` | String / Function | easing action for animation.You can use the [default easing functions](https://antv.gitbook.io/f2/api/animation#default-easing) provided by F2 or pass the function directly, see [callback](https://antv.gitbook.io/f2/api/animation#easing-callback). | | `delay` | Number / Function | delay time for animation, in millisecond.You can specify delay time directly or pass a [callback](https://antv.gitbook.io/f2/api/animation#delay-callback). | | `duration` | Number | duration of the animation, in millisecond. | Example: ```javascript { appear: { animation: 'fadeIn', easing: 'elasticIn', delay: 1000, duration: 600 }, update: false } ``` #### Default Animations The animations provided by default are shown below: | Name | Demo | | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `groupWaveIn` | [![](https://camo.githubusercontent.com/acaa5827f1e5742c1c2fa4a784d7e64c11fd1d98/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f37663662366131392d623762662d343265652d623866642d6439313238333930636130322f323031382f6769662f62313234653666302d646364642d343435302d396364362d6663643765356464666338612e676966)](https://camo.githubusercontent.com/acaa5827f1e5742c1c2fa4a784d7e64c11fd1d98/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f37663662366131392d623762662d343265652d623866642d6439313238333930636130322f323031382f6769662f62313234653666302d646364642d343435302d396364362d6663643765356464666338612e676966) | ![](https://camo.githubusercontent.com/0492b46f8e9e4bcbc5cba53bf6cfe6784feb1f18/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f36333431333730332d323836342d346161302d383036362d3839353233356135656634342f323031382f6769662f61656538383838382d313762332d343861652d383633622d3864663333313361666462642e676966) | | `groupScaleInX` | [![](https://camo.githubusercontent.com/8b35680cd640f769b08bf8d7ea0044910a3a1367/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f32306238376130342d653634302d346130622d396665372d3535623061363632353365392f323031382f6769662f37323564666430382d333162652d346134302d616164372d3739656166613062663235322e676966)](https://camo.githubusercontent.com/8b35680cd640f769b08bf8d7ea0044910a3a1367/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f32306238376130342d653634302d346130622d396665372d3535623061363632353365392f323031382f6769662f37323564666430382d333162652d346134302d616164372d3739656166613062663235322e676966) | ![](https://camo.githubusercontent.com/a4e25bfb85b61bafff4bb68f7e716bf5ef8e8add/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f37623033386261382d323038662d346636392d383539632d6665356636383637303534632f323031382f6769662f30376464396334622d353437622d343466352d393532662d3762353839346634313931642e676966) | | `groupScaleInY` | [![](https://camo.githubusercontent.com/8ae720e725a58b259911ec80562ebb73a14eb698/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f37663236396664382d323237312d343037342d386661632d3631356566633039623236392f323031382f6769662f64396530616632312d653362612d343339342d613239612d6462303532653861303762622e676966)](https://camo.githubusercontent.com/8ae720e725a58b259911ec80562ebb73a14eb698/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f37663236396664382d323237312d343037342d386661632d3631356566633039623236392f323031382f6769662f64396530616632312d653362612d343339342d613239612d6462303532653861303762622e676966) | ![](https://camo.githubusercontent.com/a5b8cd4394f171e5977b221d7a5abfb391d2dd96/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f36346432333864302d363739382d343262302d613362622d3566626362393166616135662f323031382f6769662f37343933623031622d616466312d343630332d383130352d3334336334656563373138662e676966) | | `groupScaleInXY` | [![](https://camo.githubusercontent.com/92b89e592dac7094b16d093916b3135e5e966837/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f34366463633336332d656634662d343665392d386666622d6664326263333333333831662f323031382f6769662f36376135626365632d666139612d343838302d396566642d3962386631616430643861322e676966)](https://camo.githubusercontent.com/92b89e592dac7094b16d093916b3135e5e966837/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f34366463633336332d656634662d343665392d386666622d6664326263333333333831662f323031382f6769662f36376135626365632d666139612d343838302d396566642d3962386631616430643861322e676966) | ![](https://camo.githubusercontent.com/65d01da96499698f3ebf5bb6a23f9d21e92888cc/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f64383965376663612d393164622d346564662d393364612d6463373165313634366463312f323031382f6769662f61323066386532312d333532322d346338332d613336652d3165663666646531663736652e676966) | | `shapesScaleInX` | [![](https://camo.githubusercontent.com/544457a69f28ad2a7330ccbee62fe0c62720be85/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f64326237313462652d343261612d343138332d386465362d3234396333396138633264332f323031382f6769662f36356530353066322d313738392d346230342d396138392d3635353233333463393436632e676966)](https://camo.githubusercontent.com/544457a69f28ad2a7330ccbee62fe0c62720be85/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f64326237313462652d343261612d343138332d386465362d3234396333396138633264332f323031382f6769662f36356530353066322d313738392d346230342d396138392d3635353233333463393436632e676966) | | | `shapesScaleInY` | [![](https://camo.githubusercontent.com/c22ba0106f3fa1dd0657a08a5fb1449faa212ea6/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f63376139306537642d666463332d346437322d623036622d3630663965656363656434642f323031382f6769662f30323165653236322d653061332d343339362d383233322d3737346638313336663133382e676966)](https://camo.githubusercontent.com/c22ba0106f3fa1dd0657a08a5fb1449faa212ea6/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f63376139306537642d666463332d346437322d623036622d3630663965656363656434642f323031382f6769662f30323165653236322d653061332d343339362d383233322d3737346638313336663133382e676966) | | | `shapesScaleInXY` | [![](https://camo.githubusercontent.com/686aa2d5072f712fea2f006462c6e6a41edd1fa7/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f63663266363630662d343864322d343665392d623765322d6536623539663033333364662f323031382f6769662f36643038343432652d646638392d343131362d383365392d3861333663323435393634352e676966)](https://camo.githubusercontent.com/686aa2d5072f712fea2f006462c6e6a41edd1fa7/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f63663266363630662d343864322d343665392d623765322d6536623539663033333364662f323031382f6769662f36643038343432652d646638392d343131362d383365392d3861333663323435393634352e676966) | | | `fadeIn` | [![](https://camo.githubusercontent.com/d497959df67f91714a58f640f1f3d11e92c238a1/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f31363435653635382d633030372d343364612d396431662d6261613332366263656665662f323031382f6769662f32656133386363662d386437632d343263362d613166622d3762616636343032366464392e676966)](https://camo.githubusercontent.com/d497959df67f91714a58f640f1f3d11e92c238a1/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f736b796c61726b2f31363435653635382d633030372d343364612d396431662d6261613332366263656665662f323031382f6769662f32656133386363662d386437632d343263362d613166622d3762616636343032366464392e676966) | | #### `animation` callback Animation action can also be a callback. ```javascript /** * 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 . #### `easing` callback `easing` can also be a callback. ```javascript easing(t) {} ``` Example: ```javascript easing: (t) => { return Math.sqrt(1 - --t * t); } ``` #### `delay` callback ```javascript /** * 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: ```javascript 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](https://antv.alipay.com/zh-cn/f2/3.x/demo/line/animated-line.html). --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://antv.gitbook.io/f2/api/chart/animation.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.