# 动画

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.animationdataset.animationtooltip.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.