# 动画

Chart.js 开箱即用地为图表制作动画。提供了许多选项来配置动画的外观和持续时间。

:::: 选项卡

::: 选项卡 "循环张力[属性]"

const config = {
  type: 'line',
  data: data,
  options: {
    animations: {
      tension: {
        duration: 1000,
        easing: 'linear',
        from: 1,
        to: 0,
        loop: true
      }
    },
    scales: {
      y: { // defining min and max so hiding the dataset does not change scale range
        min: 0,
        max: 100
      }
    }
  }
};const config = {
  type: 'line',
  data: data,
  options: {
    animations: {
      tension: {
        duration: 1000,
        easing: 'linear',
        from: 1,
        to: 0,
        loop: true
      }
    },
    scales: {
      y: { // defining min and max so hiding the dataset does not change scale range
        min: 0,
        max: 100
      }
    }
  }
};

:::

::: 选项卡 "隐藏和显示 [模式]"

const config = {
  type: 'line',
  data: data,
  options: {
    transitions: {
      show: {
        animations: {
          x: {
            from: 0
          },
          y: {
            from: 0
          }
        }
      },
      hide: {
        animations: {
          x: {
            to: 0
          },
          y: {
            to: 0
          }
        }
      }
    }
  }
};const config = {
  type: 'line',
  data: data,
  options: {
    transitions: {
      show: {
        animations: {
          x: {
            from: 0
          },
          y: {
            from: 0
          }
        }
      },
      hide: {
        animations: {
          x: {
            to: 0
          },
          y: {
            to: 0
          }
        }
      }
    }
  }
};

:::

::::

# 动画配置

动画配置由 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	Override default duration to 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;
            }
        }
    }
});

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