Docs/exit animation demo

docs/assets/examples/en/storytelling/disappear-animation-gaussion-blur.md

@@ -0,0 +1,124 @@
+---
+category: examples
+group: storytelling
+title: Disappear Animation Gaussian Blur
+keywords: animation,morphing,bar,pie,barChart,pieChart,comparison
+order: 42-0
+cover: /vchart/preview/disappear-animation-gaussian-blur-2.0.11.gif
+option: lineChart#animationAppear
+---
+
+# Disappear Animation Gaussian Blur Effect
+
+In custom animation effects, you can implement the Gaussian blur effect by using the `afterStageRender` method.
+
+## Key configuration
+
+- callBack: The custom callback function or animation implementation class for the disappear animation, used to execute user-defined disappear effects.
+
+### Demo source
+
+```javascript livedemo
+// import { vglobal } from '@visactor/vchart';
+const vglobal = VCHART_MODULE.vglobal;
+
+function applyDownsampleBlur(imageData, radius) {
+  const { width, height } = imageData;
+
+  const downsample = Math.max(1, Math.floor(radius / 2));
+  const smallWidth = Math.floor(width / downsample);
+  const smallHeight = Math.floor(height / downsample);
+
+  const tempCanvas = vglobal.createCanvas({
+    width: smallWidth,
+    height: smallHeight,
+    dpr: 1
+  });
+  const tempCtx = tempCanvas.getContext('2d');
+  if (!tempCtx) {
+    return imageData;
+  }
+
+  const originalCanvas = vglobal.createCanvas({
+    width: width,
+    height: height,
+    dpr: 1
+  });
+  const originalCtx = originalCanvas.getContext('2d');
+  if (!originalCtx) {
+    return imageData;
+  }
+
+  originalCtx.putImageData(imageData, 0, 0);
+
+  tempCtx.drawImage(originalCanvas, 0, 0, smallWidth, smallHeight);
+
+  tempCtx.filter = `blur(${radius / downsample}px)`;
+  tempCtx.drawImage(tempCanvas, 0, 0);
+  tempCtx.filter = 'none';
+
+  originalCtx.clearRect(0, 0, width, height);
+  originalCtx.drawImage(tempCanvas, 0, 0, width, height);
+
+  return originalCtx.getImageData(0, 0, width, height);
+}
+
+function gaussianBlurAnimate(canvas, ratio) {
+  const blurRadius = ratio * 8;
+
+  if (blurRadius <= 0) {
+    return canvas;
+  }
+
+  const c = vglobal.createCanvas({
+    width: canvas.width,
+    height: canvas.height,
+    dpr: vglobal.devicePixelRatio
+  });
+  const ctx = c.getContext('2d');
+  if (!ctx) {
+    return false;
+  }
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(canvas, 0, 0);
+
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const blurredImageData = applyDownsampleBlur(imageData, blurRadius);
+  ctx.putImageData(blurredImageData, 0, 0);
+
+  ctx.fillStyle = `rgba(255, 255, 255, ${ratio.toFixed(2)})`;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  return c;
+}
+
+const spec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { month: 'Monday', sales: 22 },
+        { month: 'Tuesday', sales: 13 },
+        { month: 'Wednesday', sales: 25 },
+        { month: 'Thursday', sales: 29 },
+        { month: 'Friday', sales: 38 }
+      ]
+    }
+  ],
+  xField: 'month',
+  yField: 'sales',
+  animationDisappear: {
+    callBack: (stage, canvas, ratio) => gaussianBlurAnimate(canvas, ratio),
+    duration: 2000
+  }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderAsync();
+
+setInterval(() => {
+  vchart.runDisappearAnimation();
+}, 4000);
+```

docs/assets/examples/en/storytelling/disappear-animation-wipe.md

@@ -0,0 +1,100 @@
+---
+category: examples
+group: storytelling
+title: Disappear Animation Wipe
+keywords: animation,morphing,bar,pie,barChart,pieChart,comparison
+order: 42-0
+cover: /vchart/preview/disappear-animation-wipe-2.0.11.gif
+option: lineChart#animationAppear
+---
+
+# Disappear Animation Wipe Effect
+
+In custom animation effects, you can implement the wipe animation effect by using the `afterStageRender` method.
+
+## Key configuration
+
+- callBack: The custom callback function or animation implementation class for the disappear animation, used to execute user-defined disappear effects.
+
+### Demo source
+
+```javascript livedemo
+// import { vglobal } from '@visactor/vchart';
+const vglobal = VCHART_MODULE.vglobal;
+
+function wipeAnimate(canvas, ratio) {
+  const c = vglobal.createCanvas({
+    width: canvas.width,
+    height: canvas.height,
+    dpr: vglobal.devicePixelRatio
+  });
+  const ctx = c.getContext('2d');
+  if (!ctx) {
+    return false;
+  }
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(canvas, 0, 0);
+
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const data = imageData.data;
+
+  const wipePosition = Math.floor(canvas.width * ratio);
+
+  const gradientWidth = Math.min(canvas.width * 0.3, 50);
+
+  for (let y = 0; y < canvas.height; y++) {
+    for (let x = 0; x < canvas.width; x++) {
+      const index = (y * canvas.width + x) * 4;
+      const originalAlpha = data[index + 3];
+      const distance = x - wipePosition;
+
+      let newAlpha;
+      if (distance <= 0) {
+        newAlpha = 0;
+      } else if (distance <= gradientWidth) {
+        const gradientRatio = distance / gradientWidth;
+        newAlpha = Math.floor(originalAlpha * gradientRatio);
+      } else {
+        newAlpha = originalAlpha;
+      }
+
+      data[index + 3] = newAlpha;
+    }
+  }
+
+  ctx.putImageData(imageData, 0, 0);
+
+  return c;
+}
+
+const spec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { month: 'Monday', sales: 22 },
+        { month: 'Tuesday', sales: 13 },
+        { month: 'Wednesday', sales: 25 },
+        { month: 'Thursday', sales: 29 },
+        { month: 'Friday', sales: 38 }
+      ]
+    }
+  ],
+  xField: 'month',
+  yField: 'sales',
+  animationDisappear: {
+    callBack: (stage, canvas, ratio) => wipeAnimate(canvas, ratio),
+    easing: 'linear',
+    duration: 2000
+  }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderAsync();
+
+setInterval(() => {
+  vchart.runDisappearAnimation();
+}, 3000);
+```

docs/assets/examples/en/storytelling/disappear-animation.md

@@ -0,0 +1,101 @@
+---
+category: examples
+group: storytelling
+title: Disappear Animation
+keywords: animation,morphing,bar,pie,barChart,pieChart,comparison
+order: 42-0
+cover: /vchart/preview/disappear-animation-2.0.11.gif
+option: lineChart#animationAppear
+---
+
+# Disappear Animation
+
+User can manually call `vchart.runDisappearAnimation()` method to execute the disappear animation.
+The difference between the disappear animation and other animations is that it provides an additional `callBack` parameter to execute user-defined disappear effects.
+User can configure the custom interpolation callback function or provide a custom animation implementation class in the `callBack` parameter.
+
+## Key configuration
+
+- callBack: The custom callback function or animation implementation class for the disappear animation, used to execute user-defined disappear effects.
+
+### Demo source
+
+```javascript livedemo
+// import { vglobal } from '@visactor/vchart';
+// import { AStageAnimate } from '@visactor/vrender-animate';
+const vglobal = VCHART_MODULE.vglobal;
+const AStageAnimate = VRender.AStageAnimate;
+
+// custom disappear animation implementation class
+class TestStageAnimate extends AStageAnimate {
+  onUpdate(end, ratio, out) {
+    super.onUpdate(end, ratio, out);
+    this.ratio = ratio;
+  }
+
+  // update the canvas rendering content
+  afterStageRender(stage, canvas) {
+    const c = vglobal.createCanvas({
+      width: canvas.width,
+      height: canvas.height,
+      dpr: vglobal.devicePixelRatio
+    });
+    const ctx = c.getContext('2d');
+    if (!ctx) {
+      return false;
+    }
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(canvas, 0, 0);
+    ctx.fillStyle = `rgba(255, 255, 255, ${this.ratio.toFixed(2)})`;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    return c;
+  }
+}
+
+const spec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { month: 'Monday', sales: 22 },
+        { month: 'Tuesday', sales: 13 },
+        { month: 'Wednesday', sales: 25 },
+        { month: 'Thursday', sales: 29 },
+        { month: 'Friday', sales: 38 }
+      ]
+    }
+  ],
+  xField: 'month',
+  yField: 'sales',
+  animationDisappear: {
+    // custom disappear animation callback function
+    callBack: (stage, canvas, ratio) => {
+      const c = vglobal.createCanvas({
+        width: canvas.width,
+        height: canvas.height,
+        dpr: vglobal.devicePixelRatio
+      });
+      const ctx = c.getContext('2d');
+      if (!ctx) {
+        return false;
+      }
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(canvas, 0, 0);
+      ctx.fillStyle = `rgba(255, 255, 255, ${ratio.toFixed(2)})`;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      return c;
+    },
+    // custom disappear animation class usage
+    // callBack: TestStageAnimate,
+    duration: 1000
+  }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderAsync();
+
+setInterval(() => {
+  vchart.runDisappearAnimation();
+}, 2000);
+```

docs/assets/examples/menu.json

@@ -126,6 +126,27 @@
             "zh": "柱状图、散点图间切换的全局动画",
             "en": "Global animation for switching between bar charts and scatter plots"
           }
+        },
+        {
+          "path": "disappear-animation",
+          "title": {
+            "zh": "退场动画",
+            "en": "Disappear Animation"
+          }
+        },
+        {
+          "path": "disappear-animation-gaussion-blur",
+          "title": {
+            "zh": "退场动画高斯模糊效果",
+            "en": "Disappear Animation Gaussian Blur Effect"
+          }
+        },
+        {
+          "path": "disappear-animation-wipe",
+          "title": {
+            "zh": "退场动画擦除效果",
+            "en": "Disappear Animation Wipe Effect"
+          }
         }
       ]
     },
@@ -3295,4 +3316,4 @@
       ]
     }
   ]
-}
+}