Add fixture for bar hide/show animation (#8453)

* Add fixture for bar hide/show animation

* Cleanup

* try using longer times

diff --git a/src/core/core.animations.js b/src/core/core.animations.js
index 09c577245158c0589ace2d096ac131c3f4e4120b..ff688b6c9895f97b226e20f9f30ac99fa5edf887 100644 (file)
--- 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 (file)
index 0000000..d559e8a
--- /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 (file)
index 0000000..924e1d2
Binary files /dev/null and b/test/fixtures/controller.bar/bar-animation-hide-show.png differ