# 动画
¥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 optionsoverrides[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.js
¥The default configuration is defined here: core.animations.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.