Progressive Line With Easing

Progressive Line With Easing - 图1

easeOutQuadeaseOutCubiceaseOutQuarteaseOutQuinteaseInQuadeaseInCubiceaseInQuarteaseInQuint

config animation data actions

  1. const config = {
  2.   type: 'line',
  3.   data: {
  4.     datasets: [{
  5.       borderColor: Utils.CHART_COLORS.red,
  6.       borderWidth: 1,
  7.       radius: 0,
  8.       data: data,
  9.     },
  10.     {
  11.       borderColor: Utils.CHART_COLORS.blue,
  12.       borderWidth: 1,
  13.       radius: 0,
  14.       data: data2,
  15.     }]
  16.   },
  17.   options: {
  18.     animation,
  19.     interaction: {
  20.       intersect: false
  21.     },
  22.     plugins: {
  23.       legend: false,
  24.       title: {
  25.         display: true,
  26.         text: () => easing.name
  27.       }
  28.     },
  29.     scales: {
  30.       x: {
  31.         type: 'linear'
  32.       }
  33.     }
  34.   }
  35. };
  1. let easing = helpers.easingEffects.easeOutQuad;
  2. let restart = false;
  3. const totalDuration = 5000;
  4. const duration = (ctx) => easing(ctx.index / data.length) * totalDuration / data.length;
  5. const delay = (ctx) => easing(ctx.index / data.length) * totalDuration;
  6. const previousY = (ctx) => ctx.index === 0 ? ctx.chart.scales.y.getPixelForValue(100) : ctx.chart.getDatasetMeta(ctx.datasetIndex).data[ctx.index - 1].getProps(['y'], true).y;
  7. const animation = {
  8.   x: {
  9.     type: 'number',
  10.     easing: 'linear',
  11.     duration: duration,
  12.     from: NaN, // the point is initially skipped
  13.     delay(ctx) {
  14.       if (ctx.type !== 'data' || ctx.xStarted) {
  15.         return 0;
  16.       }
  17.       ctx.xStarted = true;
  18.       return delay(ctx);
  19.     }
  20.   },
  21.   y: {
  22.     type: 'number',
  23.     easing: 'linear',
  24.     duration: duration,
  25.     from: previousY,
  26.     delay(ctx) {
  27.       if (ctx.type !== 'data' || ctx.yStarted) {
  28.         return 0;
  29.       }
  30.       ctx.yStarted = true;
  31.       return delay(ctx);
  32.     }
  33.   }
  34. };
  1. const data = [];
  2. const data2 = [];
  3. let prev = 100;
  4. let prev2 = 80;
  5. for (let i = 0; i < 1000; i++) {
  6.   prev += 5 - Math.random() * 10;
  7.   data.push({x: i, y: prev});
  8.   prev2 += 5 - Math.random() * 10;
  9.   data2.push({x: i, y: prev2});
  10. }
  1. function restartAnims(chart) {
  2.   chart.stop();
  3.   const meta0 = chart.getDatasetMeta(0);
  4.   const meta1 = chart.getDatasetMeta(1);
  5.   for (let i = 0; i < data.length; i++) {
  6.     const ctx0 = meta0.controller.getContext(i);
  7.     const ctx1 = meta1.controller.getContext(i);
  8.     ctx0.xStarted = ctx0.yStarted = false;
  9.     ctx1.xStarted = ctx1.yStarted = false;
  10.   }
  11.   chart.update();
  12. }
  14. const actions = [
  15.   {
  16.     name: 'easeOutQuad',
  17.     handler(chart) {
  18.       easing = helpers.easingEffects.easeOutQuad;
  19.       restartAnims(chart);
  20.     }
  21.   },
  22.   {
  23.     name: 'easeOutCubic',
  24.     handler(chart) {
  25.       easing = helpers.easingEffects.easeOutCubic;
  26.       restartAnims(chart);
  27.     }
  28.   },
  29.   {
  30.     name: 'easeOutQuart',
  31.     handler(chart) {
  32.       easing = helpers.easingEffects.easeOutQuart;
  33.       restartAnims(chart);
  34.     }
  35.   },
  36.   {
  37.     name: 'easeOutQuint',
  38.     handler(chart) {
  39.       easing = helpers.easingEffects.easeOutQuint;
  40.       restartAnims(chart);
  41.     }
  42.   },
  43.   {
  44.     name: 'easeInQuad',
  45.     handler(chart) {
  46.       easing = helpers.easingEffects.easeInQuad;
  47.       restartAnims(chart);
  48.     }
  49.   },
  50.   {
  51.     name: 'easeInCubic',
  52.     handler(chart) {
  53.       easing = helpers.easingEffects.easeInCubic;
  54.       restartAnims(chart);
  55.     }
  56.   },
  57.   {
  58.     name: 'easeInQuart',
  59.     handler(chart) {
  60.       easing = helpers.easingEffects.easeInQuart;
  61.       restartAnims(chart);
  62.     }
  63.   },
  64.   {
  65.     name: 'easeInQuint',
  66.     handler(chart) {
  67.       easing = helpers.easingEffects.easeInQuint;
  68.       restartAnims(chart);
  69.     }
  70.   },
  71. ];

Api

Docs