From e2a47342ba8e20c3fc6ee09adb10af800046c1c6 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Thu, 18 Feb 2021 19:23:15 +0200 Subject: [PATCH] Add fixture for bar hide/show animation (#8453) * Add fixture for bar hide/show animation * Cleanup * try using longer times --- src/core/core.animations.js | 2 +- .../controller.bar/bar-animation-hide-show.js | 84 ++++++++++++++++++ .../bar-animation-hide-show.png | Bin 0 -> 13085 bytes 3 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 test/fixtures/controller.bar/bar-animation-hide-show.js create mode 100644 test/fixtures/controller.bar/bar-animation-hide-show.png diff --git a/src/core/core.animations.js b/src/core/core.animations.js index 09c577245..ff688b6c9 100644 --- a/src/core/core.animations.js +++ b/src/core/core.animations.js @@ -50,7 +50,7 @@ defaults.set('animation', { }, visible: { type: 'boolean', - easing: 'easeInExpo' // for keeping the dataset visible almost all the way through the animation + fn: v => v < 1 ? 0 : 1 // for keeping the dataset visible all the way through the animation }, } }); diff --git a/test/fixtures/controller.bar/bar-animation-hide-show.js b/test/fixtures/controller.bar/bar-animation-hide-show.js new file mode 100644 index 000000000..d559e8ae4 --- /dev/null +++ b/test/fixtures/controller.bar/bar-animation-hide-show.js @@ -0,0 +1,84 @@ +const canvas = document.createElement('canvas'); +canvas.width = 512; +canvas.height = 512; +const ctx = canvas.getContext('2d'); + +module.exports = { + config: { + type: 'bar', + data: { + labels: [0], + datasets: [ + { + data: [1], + backgroundColor: 'rgba(255,0,0,0.5)' + }, + { + data: [2], + backgroundColor: 'rgba(0,0,255,0.5)' + }, + { + data: [3], + backgroundColor: 'rgba(0,255,0,0.5)' + } + ] + }, + options: { + animation: { + duration: 14000, + easing: 'linear' + }, + events: [], + scales: { + x: {display: false}, + y: {display: false, max: 4} + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + }, + run: function(chart) { + const animator = Chart.animator; + const anims = animator._getAnims(chart); + // disable animator + const backup = animator._refresh; + animator._refresh = function() { }; + + return new Promise((resolve) => { + window.requestAnimationFrame(() => { + // make sure previous animation is finished + animator._update(Date.now() * 2); + + chart.hide(1); + let start = anims.items[0]._start; + for (let i = 0; i < 8; i++) { + animator._update(start + i * 2000); + let x = i % 4 * 128; + let y = Math.floor(i / 4) * 128; + ctx.drawImage(chart.canvas, x, y, 128, 128); + } + + // make sure previous animation is finished + animator._update(Date.now() * 2); + + chart.show(1); + start = anims.items[0]._start; + for (let i = 0; i < 8; i++) { + animator._update(start + i * 2000); + let x = i % 4 * 128; + let y = Math.floor(2 + i / 4) * 128; + ctx.drawImage(chart.canvas, x, y, 128, 128); + } + Chart.helpers.clearCanvas(chart.canvas); + chart.ctx.drawImage(canvas, 0, 0); + + animator._refresh = backup; + resolve(); + }); + }); + } + } +}; diff --git a/test/fixtures/controller.bar/bar-animation-hide-show.png b/test/fixtures/controller.bar/bar-animation-hide-show.png new file mode 100644 index 0000000000000000000000000000000000000000..924e1d239fb4bd124771fbdf03d1735530cb05f1 GIT binary patch literal 13085 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