chore(docs): path update

docs/assets/tutorials/en/animation/advanced-animation.md

@@ -102,7 +102,7 @@ const vchart = new VChart(spec, { dom: CONTAINER_ID });
 vchart.renderAsync();
 ```
 
-In the above example, we are using the `duration`/`delay`/`easing`/`oneByOne` configuration introduced in our previous chapter ([Animation Types](./Animation_Types)) to achieve simple animation effects.
+In the above example, we are using the `duration`/`delay`/`easing`/`oneByOne` configuration introduced in our previous chapter ([Animation Types](./defination-of-animtion)) to achieve simple animation effects.
 
 The animation configuration for graphic elements supports multiple properties for detailed control of the animation behavior. Here are the supported attributes for the graphic animation configuration:
 
@@ -594,4 +594,89 @@ VChart provides animation arrangement configuration based on JSON spec to meet a
 
 A timeline represents the animation performance of a graphic element over a specific period of time. A timeline contains a set of serialized animation fragments (TimeSlice). The timeline describes the animation performance of a graphic element over a period of time. Animations in different timelines can be executed in parallel. The timeline can also be set with `loop: true` to loop the configured animation effects.
 
-![Timeline schematic diagram](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/23e5d313c2c3a66d4ca
+![Timeline schematic diagram](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/23e5d313c2c3a66d4ca)
+
+### Timeslice
+
+In a timeline, each time slice is executed serially, and the constituent elements in a time slice include:
+- `effect`: The specific execution effect of the animation, which describes the specific interpolation calculation logic of the visual channel attributes of the primitive. Effects can be encapsulated specific animation effects, or animation configurations configured by developers to start and end states, and describe the calculation logic of animation attribute interpolation. Each timeSlice can be configured with multiple `effect`;
+- `duration`: the execution duration of animation slices;
+- `delay`: the waiting time before the execution of the animation slice;
+
+### Animation Effect (Effect)
+The constituent elements in animation effects (Effect) include:
+- `channel`: the changed visual channel attribute, which describes the visual channel attribute when the interpolation calculation starts and ends;
+- `easing`: easing strategy for difference calculation;
+
+The following example achieves an accordion effect by animating a looping timeline:
+```javascript livedemo
+const spec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'id0',
+      values: [
+        { x: '1', y: 22 },
+        { x: '2', y: 43 },
+        { x: '3', y: 33 },
+        { x: '4', y: 22 },
+        { x: '5', y: 10 },
+        { x: '6', y: 30 },
+        { x: '7', y: 46 },
+        { x: '8', y: 21 },
+        { x: '9', y: 33 },
+        { x: '10', y: 43 },
+        { x: '11', y: 42 },
+        { x: '12', y: 30 },
+        { x: '13', y: 9 },
+        { x: '14', y: 46 }
+      ]
+    }
+  ],
+  xField: ['x'],
+  yField: 'y',
+  axes: [
+    { orient: 'bottom', type: 'band' },
+    { orientation: 'left', type: 'linear' }
+  ],
+  animationNormal: {
+    bar: [
+      {
+        loop: true,
+        startTime: 100,
+        oneByOne: 100,
+        timeSlices: [
+          {
+            delay: 1000,
+            effects: {
+              channel: {
+                fillOpacity: { to: 0.5 }
+              },
+              easing: 'linear'
+            },
+            duration: 500
+          },
+          {
+            effects: {
+              channel: {
+                fillOpacity: { to: 1 }
+              },
+              easing: 'linear'
+            },
+            duration: 500
+          }
+        ]
+      }
+    ]
+  }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderAsync();
+```
+
+## Custom animation
+In the animation effect (Effect), if the simple `channel` configuration cannot meet your needs, you can configure custom animation effects through `custom` and `customParameters`:
+- `custom`: custom animation;
+- `customParameters`: Custom animation parameters;
+For detailed usage, please refer to the [Custom Animation](../custom-extension/custom-animation) chapter.

docs/assets/tutorials/en/animation/how-to-config-animation.md

@@ -63,7 +63,7 @@ window['vchart'] = vchart;
 
 ### Animation Easing Effect
 
-Easing effects describe the process of "acceleration" of the animation. Setting the appropriate easing effect can make the chart animation more dynamic. VChart has many built-in easing effect types that can be selected through the `animation.easing` property. The default value is `cubicOut`. The following built-in easing effect types are available, and you can refer to the [easing demo](../../../demo/combination/easing-visualization) for more information.
+Easing effects describe the process of "acceleration" of the animation. Setting the appropriate easing effect can make the chart animation more dynamic. VChart has many built-in easing effect types that can be selected through the `animation.easing` property. The default value is `cubicOut`. The following built-in easing effect types are available, and you can refer to the [easing demo](../../demo/combination/easing-visualization) for more information.
 
 - linear
 - quadIn

docs/assets/tutorials/en/chart/3d-area.md

@@ -21,9 +21,9 @@ Point elements and line elements are the basic components of an area chart, and
 
 Axes, tooltips, and other components that assist in chart display are optional configurations with default effects and functions:
 
-- `areaChart.axes`: Axis component, default is to display and automatically infer the coordinate system and data mapping logic according to the chart type. For detailed configuration, see [VChart Axis Component Configuration](../../../option/areaChart#axes)
-- `areaChart.tooltip`: Tooltip, default is displayed during interaction. For detailed configuration, see [VChart Tooltip Component Configuration](../../../option/areaChart#tooltip)
-- For more component configurations, see [VChart areaChart Configuration](../../../option/areaChart)
+- `areaChart.axes`: Axis component, default is to display and automatically infer the coordinate system and data mapping logic according to the chart type. For detailed configuration, see [VChart Axis Component Configuration](../../option/areaChart#axes)
+- `areaChart.tooltip`: Tooltip, default is displayed during interaction. For detailed configuration, see [VChart Tooltip Component Configuration](../../option/areaChart#tooltip)
+- For more component configurations, see [VChart areaChart Configuration](../../option/areaChart)
 
 As a 3d chart, the 3d area chart requires enabling the 3d view. Configure the 3d view in the vChart initialization parameters:
 

docs/assets/tutorials/en/chart/3d-bar.md

@@ -24,9 +24,9 @@ The rectangular chart element is an essential building block for bar/column char
 
 Axes, tooltips, and other components, which serve as auxiliary chart display components, are optional configurations with default effects and functionality:
 
-- `barChart.axes`: Axis component, displayed by default and automatically inferring coordinate system and data mapping logic based on chart type. For detailed configurations, see [VChart Axis Component Configuration](../../../option/barChart#axes)
-- `barChart.tooltip`: Tooltip information, displayed by default during interaction, for detailed configurations, see [VChart Tooltip Component Configuration](../../../option/barChart#tooltip)
-- For more component configurations, see [VChart barChart Configuration](../../../option/barChart)
+- `barChart.axes`: Axis component, displayed by default and automatically inferring coordinate system and data mapping logic based on chart type. For detailed configurations, see [VChart Axis Component Configuration](../../option/barChart#axes)
+- `barChart.tooltip`: Tooltip information, displayed by default during interaction, for detailed configurations, see [VChart Tooltip Component Configuration](../../option/barChart#tooltip)
+- For more component configurations, see [VChart barChart Configuration](../../option/barChart)
   As a 3D chart, 3D scatter plot needs to enable 3D view, which needs to be configured in the initialization parameters of vChart:
 
 - `options3d.enable`: Enable 3D view

docs/assets/tutorials/en/chart/3d-funnel.md

@@ -24,8 +24,8 @@ Transformation layers, labels, and other auxiliary elements are only displayed i
 
 Tooltip information and other components that assist in chart presentation are optional configurations that come with default effects and functions:
 
-- `funnelChart.tooltip`: Tooltip information, displayed by default during interaction, for detailed configuration see [VChart Tooltip Component Configuration](../../../option/funnelChart#tooltip)
-- For more component configurations, see [VChart funnelChart Configuration](../../../option/funnelChart)
+- `funnelChart.tooltip`: Tooltip information, displayed by default during interaction, for detailed configuration see [VChart Tooltip Component Configuration](../../option/funnelChart#tooltip)
+- For more component configurations, see [VChart funnelChart Configuration](../../option/funnelChart)
 
 As a 3D chart, a 3D scatter plot requires enabling the 3D view, which needs to be configured in the initialization parameters of vChart:
 
@@ -100,4 +100,4 @@ const vchart = new VChart(spec, {
 vchart.renderAsync();
 ```
 
-For other configurations, refer to [Funnel Chart](../../../option/funnelChart)
+For other configurations, refer to [Funnel Chart](../../option/funnelChart)

docs/assets/tutorials/en/chart/3d-line.md

@@ -20,9 +20,9 @@
 
 坐标轴、提示信息等作为辅助图表展示的组件，属于可选配置，自带默认效果和功能:
 
-- `lineChart.axes`: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，详情配置见[VChart 坐标轴组件配置](../../../option/line/axes/lineChart#axes)
-- `lineChart.tooltip`: 提示信息，默认交互时显示，详细配置见[VChart 提示信息组件配置](../../../option/line/axes/lineChart#tooltip)
-- 更多组件配置见[VChart lineChart 配置](../../../option/lineChart)
+- `lineChart.axes`: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，详情配置见[VChart 坐标轴组件配置](../../option/line/axes/lineChart#axes)
+- `lineChart.tooltip`: 提示信息，默认交互时显示，详细配置见[VChart 提示信息组件配置](../../option/line/axes/lineChart#tooltip)
+- 更多组件配置见[VChart lineChart 配置](../../option/lineChart)
 
 作为 3d 图表，3d 折线图需要开启 3d 视图，需要在 vChart 的初始化参数中配置 3d 视角:
 

docs/assets/tutorials/en/chart/3d-scatter.md

@@ -18,9 +18,9 @@
 
 坐标轴、提示信息等作为辅助图表展示的组件，属于可选配置，自带默认效果和功能:
 
-- `scatterChart.axes`: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，详情配置见[VChart 坐标轴组件配置](../../../option/scatterChart#axes)
-- `scatterChart.tooltip`: 提示信息，默认交互时显示，详细配置见[VChart 提示信息组件配置](../../../option/scatterChart#tooltip)
-- 更多组件配置见[VChart scatterChart 配置](../../../option/scatterChart)
+- `scatterChart.axes`: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，详情配置见[VChart 坐标轴组件配置](../../option/scatterChart#axes)
+- `scatterChart.tooltip`: 提示信息，默认交互时显示，详细配置见[VChart 提示信息组件配置](../../option/scatterChart#tooltip)
+- 更多组件配置见[VChart scatterChart 配置](../../option/scatterChart)
 
 作为 3d 图表，3d 散点图需要开启 3d 视图，需要在 vChart 的初始化参数中配置 3d 视角:
 

docs/assets/tutorials/en/chart/area.md

@@ -1,16 +1,16 @@
 # Area Chart
 
-[\[Configuration Manual\]](../../../option/areaChart)
+[\[Configuration Manual\]](../../option/areaChart)
 
 ## Introduction
 
 Area charts visually display quantitative data. It is based on line charts. Areas between the axis and the line are often emphasized with colors, textures, and shading lines. Typically, an area chart compares two or more quantities. Area charts are suitable for illustrating the trend changes of one or more groups of data under continuous independent variables, as well as comparing them with each other, while also being able to observe the changing trend of the total data.
 
-In VChart, you can use the [area chart configuration](../../../option/areaChart) to display the changing trends of both data components and total data simultaneously. As shown below, this example shows the trend of sales of different cosmetics:
+In VChart, you can use the [area chart configuration](../../option/areaChart) to display the changing trends of both data components and total data simultaneously. As shown below, this example shows the trend of sales of different cosmetics:
 
 ![](https://temp.domain/obj/bit-cloud/350c0511133d336e622523219.png)
 
-In the [area chart example](../../../demo/area-chart/stacked-area) shown above, you need to use the following key configurations:
+In the [area chart example](../../demo/area-chart/stacked-area) shown above, you need to use the following key configurations:
 
 - `seriesField` attribute is used to declare the field participating in color mapping
 - `stack` attribute is declared as true for configuring stacking, which will be stacked according to the field declared in the `seriesField` attribute
@@ -29,9 +29,9 @@ Point elements and line elements are essential for area charts, and relevant dra
 
 Axes, tooltips, and other auxiliary chart display components are optional configurations with default effects and functionalities:
 
-- `areaChart.axes`: Axis components, automatically displayed and inferred according to chart type with coordinate system and data mapping logic, for detailed configuration see [VChart Axis Component Configuration](../../../option/areaChart#axes)
-- `areaChart.tooltip`: Tooltip information, displayed interactively by default, for detailed configuration see [VChart Tooltip Configuration](../../../option/areaChart#tooltip)
-- For more component configurations see [VChart areaChart configuration](../../../option/areaChart)
+- `areaChart.axes`: Axis components, automatically displayed and inferred according to chart type with coordinate system and data mapping logic, for detailed configuration see [VChart Axis Component Configuration](../../option/areaChart#axes)
+- `areaChart.tooltip`: Tooltip information, displayed interactively by default, for detailed configuration see [VChart Tooltip Configuration](../../option/areaChart#tooltip)
+- For more component configurations see [VChart areaChart configuration](../../option/areaChart)
 
 ## Quick Start
 

docs/assets/tutorials/en/chart/bar.md

@@ -1,14 +1,14 @@
 # Bar Chart / Bar Graph
 
-[\[Configuration Manual\]](../../../option/barChart)
+[\[Configuration Manual\]](../../option/barChart)
 
 ## Introduction
 
 A bar chart is a statistical chart with a variable based on the length of a rectangle. Bar charts are used to compare two or more values (different times or different conditions), with only one variable, and are often used for smaller data set analysis.
 
-In VChart, you can display data values for multiple groups through the [Bar Chart Configuration](../../../option/barChart). As shown in the following figure:
+In VChart, you can display data values for multiple groups through the [Bar Chart Configuration](../../option/barChart). As shown in the following figure:
 ![](https://temp.domain/obj/bit-cloud/45df54929d214e7453e228f27.png)
-In the [example](../../../demo/bar-chart/group-stack-column) shown above, you need the following key configurations:
+In the [example](../../demo/bar-chart/group-stack-column) shown above, you need the following key configurations:
 
 - Set the mapping field for the x-axis and the **grouping field** on the `xField` property.
 - `seriesField` property declares the color mapping field.
@@ -19,7 +19,7 @@ A bar graph is a bar chart with a transpose of the x and y axes. The configurati
 
 ![](https://temp.domain/obj/bit-cloud/350c0511133d336e62252321d.png)
 
-To achieve a [Population Pyramid Chart](../../../demo/bar-chart/population-pyramid) as shown above, you need to use a combination of chart + bar series + layout with the following configurations:
+To achieve a [Population Pyramid Chart](../../demo/bar-chart/population-pyramid) as shown above, you need to use a combination of chart + bar series + layout with the following configurations:
 
 - Grid layout, configured through the `layout` property, used for bar chart layout.
 - Use the `type: common` type, i.e., the combination chart.
@@ -39,9 +39,9 @@ Rectangle elements are the basic elements of bar charts/bar graphs, and the corr
 
 Coordinate axis, prompt information, and other components are optional configurations for assisting in chart presentation and come with default effects and functions:
 
-- `barChart.axes`: coordinate axis component, default displayed, and automatically infer coordinate system and data mapping logic based on chart type, detailed configuration see [VChart Coordinate Axis Component Configuration](../../../option/barChart#axes)
-- `barChart.tooltip`: prompts information, default interaction display, detailed configuration see [VChart Tooltip Component Configuration](../../../option/barChart#tooltip)
-- More component configurations see [VChart barChart configuration](../../../option/barChart)
+- `barChart.axes`: coordinate axis component, default displayed, and automatically infer coordinate system and data mapping logic based on chart type, detailed configuration see [VChart Coordinate Axis Component Configuration](../../option/barChart#axes)
+- `barChart.tooltip`: prompts information, default interaction display, detailed configuration see [VChart Tooltip Component Configuration](../../option/barChart#tooltip)
+- More component configurations see [VChart barChart configuration](../../option/barChart)
 
 ## Quick Start