# 动画

Chart.js 开箱即用地为图表制作动画。提供了许多选项来配置动画的外观和持续时间。

英Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes.

英:::

英::::

# 动画配置

动画配置由 3 个键组成。

英Animation configuration consists of 3 keys.

名称	类型	细节
动画	`object`	animation
动画	`object`	animations
转场	`object`	transitions

这些键可以在以下路径中配置：

英These keys can be configured in following paths:

`` - 图表选项
datasets[type] - 数据集类型选项
overrides[type] - 图表类型选项

这些路径在全局配置的 defaults 和实例配置的 options 下有效。

英These paths are valid under defaults for global configuration and options for instance configuration.

# animation

默认配置在这里定义： core.animations.js

英The default configuration is defined here: core.animations.js

命名空间： options.animation

英Namespace: options.animation

名称	类型	默认	描述
`duration`	`number`	`1000`	动画花费的毫秒数。
`easing`	`string`	`'easeOutQuart'`	易于使用的功能。 more...
`delay`	`number`	`undefined`	在开始动画之前延迟。
`loop`	`boolean`	`undefined`	如果设置为 `true`，动画将无限循环。

这些默认值可以在 options.animation 或 dataset.animation 和 tooltip.animation 中被覆盖。这些键也是可编写脚本。

英These defaults can be overridden in options.animation or dataset.animation and tooltip.animation. These keys are also Scriptable.

# animations

动画选项配置哪些元素属性是动画的以及如何动画。除了主要的动画配置之外，还有以下选项可供选择：

英Animations options configures which element properties are animated and how. In addition to the main animation configuration, the following options are available:

命名空间： options.animations[animation]

英Namespace: options.animations[animation]

名称	类型	默认	描述
`properties`	`string[]`	`key`	此配置适用的属性名称。默认为此对象的键名。
`type`	`string`	`typeof property`	属性类型，确定使用的插值器。可能的值： `'number'`、`'color'` 和 `'boolean'`。只有 `'color'` 真正需要，因为 `typeof` 没有做对。
`from`	`number`\|`Color`\|`boolean`	`undefined`	动画的起始值。 `undefined` 时使用当前值
`to`	`number`\|`Color`\|`boolean`	`undefined`	动画的结束值。 `undefined` 时使用更新值
`fn`	`<T>(from: T, to: T, factor: number) => T;`	`undefined`	可选的自定义插值器，而不是使用 `type` 中的预定义插值器

# 默认动画

名称	选项	值
`numbers`	`properties`	`['x', 'y', 'borderWidth', 'radius', 'tension']`
`numbers`	`type`	`'number'`
`colors`	`properties`	`['color', 'borderColor', 'backgroundColor']`
`colors`	`type`	`'color'`

注意

大多数数据集控制器都会覆盖这些默认动画。

英These default animations are overridden by most of the dataset controllers. :::

# transitions

核心转换是 'active'、'hide'、'reset'、'resize'、'show'。可以通过将自定义 mode 传递到 update 来使用自定义转换。 Transition 扩展了主要的动画配置和动画配置。

英The core transitions are 'active', 'hide', 'reset', 'resize', 'show'. A custom transition can be used by passing a custom mode to update. Transition extends the main animation configuration and animations configuration.

# 默认转换

命名空间： options.transitions[mode]

英Namespace: options.transitions[mode]

模式	选项	值	描述
`'active'`	animation.duration	400	将悬停动画的默认持续时间覆盖为 400 毫秒
`'resize'`	animation.duration	0	将默认持续时间覆盖为 0ms（= 无动画）以调整大小
`'show'`	animations.colors	`{ type: 'color', properties: ['borderColor', 'backgroundColor'], from: 'transparent' }`	当使用图例/api 显示数据集时，颜色会从透明淡入。
`'show'`	animations.visible	`{ type: 'boolean', duration: 0 }`	数据集可见性立即更改为 true，因此透明的颜色转场可见。
`'hide'`	animations.colors	`{ type: 'color', properties: ['borderColor', 'backgroundColor'], to: 'transparent' }`	当使用图例/api 隐藏数据集 ID 时，颜色会淡化为透明。
`'hide'`	animations.visible	`{ type: 'boolean', easing: 'easeInExpo' }`	可见性在动画的最后阶段更改为 false

# 禁用动画

要禁用动画配置，动画节点必须设置为 false，但可以通过将 duration 设置为 0 来禁用的动画模式除外。

英To disable an animation configuration, the animation node must be set to false, with the exception for animation modes which can be disabled by setting the duration to 0.

chart.options.animation = false; // disables all animations
chart.options.animations.colors = false; // disables animation defined by the collection of 'colors' properties
chart.options.animations.x = false; // disables animation defined by the 'x' property
chart.options.transitions.active.animation.duration = 0; // disables the animation for 'active' mode

# 宽松

可用的选项是：

英Available options are:

'linear'
'easeInQuad'
'easeOutQuad'
'easeInOutQuad'
'easeInCubic'
'easeOutCubic'
'easeInOutCubic'
'easeInQuart'
'easeOutQuart'
'easeInOutQuart'
'easeInQuint'
'easeOutQuint'
'easeInOutQuint'
'easeInSine'
'easeOutSine'
'easeInOutSine'
'easeInExpo'
'easeOutExpo'
'easeInOutExpo'
'easeInCirc'
'easeOutCirc'
'easeInOutCirc'
'easeInElastic'
'easeOutElastic'
'easeInOutElastic'
'easeInBack'
'easeOutBack'
'easeInOutBack'
'easeInBounce'
'easeOutBounce'
'easeInOutBounce'

见罗伯特彭纳的宽松方程 (opens new window)。

英See Robert Penner's easing equations (opens new window).

# 动画回调

动画配置提供回调，这对于将外部绘制同步到图表动画很有用。只能在主动画配置上设置回调。

英The animation configuration provides callbacks which are useful for synchronizing an external draw to the chart animation. The callbacks can be set only at main animation configuration.

命名空间： options.animation

英Namespace: options.animation

名称	类型	默认	描述
`onProgress`	`function`	`null`	在动画的每个步骤上调用的回调。
`onComplete`	`function`	`null`	所有动画完成时调用的回调。

回调传递给以下对象：

英The callback is passed the following object:

{
  // Chart object
  chart: Chart,
  // Number of animations still in progress
  currentStep: number,
  // `true` for the initial animation of the chart
  initial: boolean,
  // Total number of animations at the start of current animation
  numSteps: number,
}

以下示例在图表动画期间填充进度条。

英The following example fills a progress bar during the chart animation.

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        animation: {
            onProgress: function(animation) {
                progress.value = animation.currentStep / animation.numSteps;
            }
        }
    }
});

这些回调的另一个示例用法可以在在此进度条示例中，中找到，它显示一个进度条，显示动画的进度。

英Another example usage of these callbacks can be found in this progress bar sample, which displays a progress bar showing how far along the animation is.