# 动画

¥Animations

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.

# 动画配置

¥Animation configuration

动画配置由 3 个键组成。

¥Animation configuration consists of 3 keys.

名称	类型	细节
animation	`object`	animation
animations	`object`	animations
transitions	`object`	transitions

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

¥These keys can be configured in following paths:

`` - 图表选项

¥`` - chart options
datasets[type] - 数据集类型选项

¥datasets[type] - dataset type options
overrides[type] - 图表类型选项

¥overrides[type] - chart type options

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

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

# animation

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

¥The default configuration is defined here: core.animations.defaults.js

命名空间：options.animation

¥Namespace: options.animation

名称	类型	默认	描述
`duration`	`number`	`1000`	动画花费的毫秒数。
`easing`	`string`	`'easeOutQuart'`	易于使用的功能。更多...
`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` 中的预定义插值器

# 默认动画

¥Default animations

名称	选项	值
`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.

# 默认转换

¥Default transitions

命名空间：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

# 禁用动画

¥Disabling animation

要禁用动画配置，动画节点必须设置为 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

# 宽松

¥Easing

可用的选项是：

¥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).

# 动画回调

¥Animation Callbacks

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

¥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.