# 动画

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.animationdataset.animationtooltip.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;
                }
            }
        }
    });
    

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