# 动画
Chart.js 开箱即用地为图表制作动画。 提供了许多选项来配置动画的外观和持续时间。
# 动画配置
动画配置由 3 个键组成。
名称 | 类型 | 细节 |
---|---|---|
动画片 | object | animation |
动画 | object | animations |
转场 | object | transitions |
这些键可以在以下路径中配置:
- `` - 图表选项
datasets[type]
- 数据集类型选项overrides[type]
- 图表类型选项
这些路径在全局配置的 defaults
和实例配置的 options
下有效。
# animation
默认配置在这里定义: core.animations.js
命名空间: options.animation
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
duration | number | 1000 | 动画花费的毫秒数。 |
easing | string | 'easeOutQuart' | 易于使用的功能。 more... |
delay | number | undefined | 在开始动画之前延迟。 |
loop | boolean | undefined | 如果设置为 true ,动画将无限循环。 |
这些默认值可以在 options.animation
或 dataset.animation
和 tooltip.animation
中被覆盖。 这些键也是 可编写脚本。
# animations
动画选项配置哪些元素属性是动画的以及如何动画。 除了主要的 动画配置 之外,还有以下选项可供选择:
命名空间: 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' |
注意
大多数数据集控制器都会覆盖这些默认动画。
# transitions
核心转换是 'active'
、'hide'
、'reset'
、'resize'
、'show'
。
可以通过将自定义 mode
传递到 update 来使用自定义转换。
Transition 扩展了主要的 动画配置 和 动画配置。
# 默认转换
命名空间: 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
来禁用的动画模式除外。
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
# 宽松
可用的选项是:
'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)。
# 动画回调
动画配置提供回调,这对于将外部绘制同步到图表动画很有用。 只能在主 动画配置 上设置回调。
命名空间: options.animation
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
onProgress | function | null | 在动画的每个步骤上调用的回调。 |
onComplete | function | null | 所有动画完成时调用的回调。 |
回调传递给以下对象:
{
// 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,
}
以下示例在图表动画期间填充进度条。
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
animation: {
onProgress: function(animation) {
progress.value = animation.currentStep / animation.numSteps;
}
}
}
});
这些回调的另一个示例用法可以在 在此进度条示例中, 中找到,它显示一个进度条,显示动画的进度。