Skip to content

Commit dc83ec9

Browse files
xuefei1313xuefei1313
authored
Merge pull request #4374 from VisActor/docs/exit-animation-demo
Docs/exit animation demo
2 parents 2cfaa89 + 7ac8515 commit dc83ec9

19 files changed

+798
-1055
lines changed

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

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
---
2+
category: examples
3+
group: storytelling
4+
title: Disappear Animation Gaussian Blur
5+
keywords: animation,morphing,bar,pie,barChart,pieChart,comparison
6+
order: 42-0
7+
cover: /vchart/preview/disappear-animation-gaussian-blur-2.0.11.gif
8+
option: lineChart#animationAppear
9+
---
10+
11+
# Disappear Animation Gaussian Blur Effect
12+
13+
In custom animation effects, you can implement the Gaussian blur effect by using the `afterStageRender` method.
14+
15+
## Key configuration
16+
17+
- callBack: The custom callback function or animation implementation class for the disappear animation, used to execute user-defined disappear effects.
18+
19+
### Demo source
20+
21+
```javascript livedemo
22+
// import { vglobal } from '@visactor/vchart';
23+
const vglobal = VCHART_MODULE.vglobal;
24+
25+
function applyDownsampleBlur(imageData, radius) {
26+
const { width, height } = imageData;
27+
28+
const downsample = Math.max(1, Math.floor(radius / 2));
29+
const smallWidth = Math.floor(width / downsample);
30+
const smallHeight = Math.floor(height / downsample);
31+
32+
const tempCanvas = vglobal.createCanvas({
33+
width: smallWidth,
34+
height: smallHeight,
35+
dpr: 1
36+
});
37+
const tempCtx = tempCanvas.getContext('2d');
38+
if (!tempCtx) {
39+
return imageData;
40+
}
41+
42+
const originalCanvas = vglobal.createCanvas({
43+
width: width,
44+
height: height,
45+
dpr: 1
46+
});
47+
const originalCtx = originalCanvas.getContext('2d');
48+
if (!originalCtx) {
49+
return imageData;
50+
}
51+
52+
originalCtx.putImageData(imageData, 0, 0);
53+
54+
tempCtx.drawImage(originalCanvas, 0, 0, smallWidth, smallHeight);
55+
56+
tempCtx.filter = `blur(${radius / downsample}px)`;
57+
tempCtx.drawImage(tempCanvas, 0, 0);
58+
tempCtx.filter = 'none';
59+
60+
originalCtx.clearRect(0, 0, width, height);
61+
originalCtx.drawImage(tempCanvas, 0, 0, width, height);
62+
63+
return originalCtx.getImageData(0, 0, width, height);
64+
}
65+
66+
function gaussianBlurAnimate(canvas, ratio) {
67+
const blurRadius = ratio * 8;
68+
69+
if (blurRadius <= 0) {
70+
return canvas;
71+
}
72+
73+
const c = vglobal.createCanvas({
74+
width: canvas.width,
75+
height: canvas.height,
76+
dpr: vglobal.devicePixelRatio
77+
});
78+
const ctx = c.getContext('2d');
79+
if (!ctx) {
80+
return false;
81+
}
82+
83+
ctx.clearRect(0, 0, canvas.width, canvas.height);
84+
ctx.drawImage(canvas, 0, 0);
85+
86+
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
87+
const blurredImageData = applyDownsampleBlur(imageData, blurRadius);
88+
ctx.putImageData(blurredImageData, 0, 0);
89+
90+
ctx.fillStyle = `rgba(255, 255, 255, ${ratio.toFixed(2)})`;
91+
ctx.fillRect(0, 0, canvas.width, canvas.height);
92+
93+
return c;
94+
}
95+
96+
const spec = {
97+
type: 'bar',
98+
data: [
99+
{
100+
id: 'barData',
101+
values: [
102+
{ month: 'Monday', sales: 22 },
103+
{ month: 'Tuesday', sales: 13 },
104+
{ month: 'Wednesday', sales: 25 },
105+
{ month: 'Thursday', sales: 29 },
106+
{ month: 'Friday', sales: 38 }
107+
]
108+
}
109+
],
110+
xField: 'month',
111+
yField: 'sales',
112+
animationDisappear: {
113+
callBack: (stage, canvas, ratio) => gaussianBlurAnimate(canvas, ratio),
114+
duration: 2000
115+
}
116+
};
117+
118+
const vchart = new VChart(spec, { dom: CONTAINER_ID });
119+
vchart.renderAsync();
120+
121+
setInterval(() => {
122+
vchart.runDisappearAnimation();
123+
}, 4000);
124+
```

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

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
---
2+
category: examples
3+
group: storytelling
4+
title: Disappear Animation Wipe
5+
keywords: animation,morphing,bar,pie,barChart,pieChart,comparison
6+
order: 42-0
7+
cover: /vchart/preview/disappear-animation-wipe-2.0.11.gif
8+
option: lineChart#animationAppear
9+
---
10+
11+
# Disappear Animation Wipe Effect
12+
13+
In custom animation effects, you can implement the wipe animation effect by using the `afterStageRender` method.
14+
15+
## Key configuration
16+
17+
- callBack: The custom callback function or animation implementation class for the disappear animation, used to execute user-defined disappear effects.
18+
19+
### Demo source
20+
21+
```javascript livedemo
22+
// import { vglobal } from '@visactor/vchart';
23+
const vglobal = VCHART_MODULE.vglobal;
24+
25+
function wipeAnimate(canvas, ratio) {
26+
const c = vglobal.createCanvas({
27+
width: canvas.width,
28+
height: canvas.height,
29+
dpr: vglobal.devicePixelRatio
30+
});
31+
const ctx = c.getContext('2d');
32+
if (!ctx) {
33+
return false;
34+
}
35+
36+
ctx.clearRect(0, 0, canvas.width, canvas.height);
37+
ctx.drawImage(canvas, 0, 0);
38+
39+
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
40+
const data = imageData.data;
41+
42+
const wipePosition = Math.floor(canvas.width * ratio);
43+
44+
const gradientWidth = Math.min(canvas.width * 0.3, 50);
45+
46+
for (let y = 0; y < canvas.height; y++) {
47+
for (let x = 0; x < canvas.width; x++) {
48+
const index = (y * canvas.width + x) * 4;
49+
const originalAlpha = data[index + 3];
50+
const distance = x - wipePosition;
51+
52+
let newAlpha;
53+
if (distance <= 0) {
54+
newAlpha = 0;
55+
} else if (distance <= gradientWidth) {
56+
const gradientRatio = distance / gradientWidth;
57+
newAlpha = Math.floor(originalAlpha * gradientRatio);
58+
} else {
59+
newAlpha = originalAlpha;
60+
}
61+
62+
data[index + 3] = newAlpha;
63+
}
64+
}
65+
66+
ctx.putImageData(imageData, 0, 0);
67+
68+
return c;
69+
}
70+
71+
const spec = {
72+
type: 'bar',
73+
data: [
74+
{
75+
id: 'barData',
76+
values: [
77+
{ month: 'Monday', sales: 22 },
78+
{ month: 'Tuesday', sales: 13 },
79+
{ month: 'Wednesday', sales: 25 },
80+
{ month: 'Thursday', sales: 29 },
81+
{ month: 'Friday', sales: 38 }
82+
]
83+
}
84+
],
85+
xField: 'month',
86+
yField: 'sales',
87+
animationDisappear: {
88+
callBack: (stage, canvas, ratio) => wipeAnimate(canvas, ratio),
89+
easing: 'linear',
90+
duration: 2000
91+
}
92+
};
93+
94+
const vchart = new VChart(spec, { dom: CONTAINER_ID });
95+
vchart.renderAsync();
96+
97+
setInterval(() => {
98+
vchart.runDisappearAnimation();
99+
}, 3000);
100+
```

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

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
category: examples
3+
group: storytelling
4+
title: Disappear Animation
5+
keywords: animation,morphing,bar,pie,barChart,pieChart,comparison
6+
order: 42-0
7+
cover: /vchart/preview/disappear-animation-2.0.11.gif
8+
option: lineChart#animationAppear
9+
---
10+
11+
# Disappear Animation
12+
13+
User can manually call `vchart.runDisappearAnimation()` method to execute the disappear animation.
14+
The difference between the disappear animation and other animations is that it provides an additional `callBack` parameter to execute user-defined disappear effects.
15+
User can configure the custom interpolation callback function or provide a custom animation implementation class in the `callBack` parameter.
16+
17+
## Key configuration
18+
19+
- callBack: The custom callback function or animation implementation class for the disappear animation, used to execute user-defined disappear effects.
20+
21+
### Demo source
22+
23+
```javascript livedemo
24+
// import { vglobal } from '@visactor/vchart';
25+
// import { AStageAnimate } from '@visactor/vrender-animate';
26+
const vglobal = VCHART_MODULE.vglobal;
27+
const AStageAnimate = VRender.AStageAnimate;
28+
29+
// custom disappear animation implementation class
30+
class TestStageAnimate extends AStageAnimate {
31+
onUpdate(end, ratio, out) {
32+
super.onUpdate(end, ratio, out);
33+
this.ratio = ratio;
34+
}
35+
36+
// update the canvas rendering content
37+
afterStageRender(stage, canvas) {
38+
const c = vglobal.createCanvas({
39+
width: canvas.width,
40+
height: canvas.height,
41+
dpr: vglobal.devicePixelRatio
42+
});
43+
const ctx = c.getContext('2d');
44+
if (!ctx) {
45+
return false;
46+
}
47+
ctx.clearRect(0, 0, canvas.width, canvas.height);
48+
ctx.drawImage(canvas, 0, 0);
49+
ctx.fillStyle = `rgba(255, 255, 255, ${this.ratio.toFixed(2)})`;
50+
ctx.fillRect(0, 0, canvas.width, canvas.height);
51+
return c;
52+
}
53+
}
54+
55+
const spec = {
56+
type: 'bar',
57+
data: [
58+
{
59+
id: 'barData',
60+
values: [
61+
{ month: 'Monday', sales: 22 },
62+
{ month: 'Tuesday', sales: 13 },
63+
{ month: 'Wednesday', sales: 25 },
64+
{ month: 'Thursday', sales: 29 },
65+
{ month: 'Friday', sales: 38 }
66+
]
67+
}
68+
],
69+
xField: 'month',
70+
yField: 'sales',
71+
animationDisappear: {
72+
// custom disappear animation callback function
73+
callBack: (stage, canvas, ratio) => {
74+
const c = vglobal.createCanvas({
75+
width: canvas.width,
76+
height: canvas.height,
77+
dpr: vglobal.devicePixelRatio
78+
});
79+
const ctx = c.getContext('2d');
80+
if (!ctx) {
81+
return false;
82+
}
83+
ctx.clearRect(0, 0, canvas.width, canvas.height);
84+
ctx.drawImage(canvas, 0, 0);
85+
ctx.fillStyle = `rgba(255, 255, 255, ${ratio.toFixed(2)})`;
86+
ctx.fillRect(0, 0, canvas.width, canvas.height);
87+
return c;
88+
},
89+
// custom disappear animation class usage
90+
// callBack: TestStageAnimate,
91+
duration: 1000
92+
}
93+
};
94+
95+
const vchart = new VChart(spec, { dom: CONTAINER_ID });
96+
vchart.renderAsync();
97+
98+
setInterval(() => {
99+
vchart.runDisappearAnimation();
100+
}, 2000);
101+
```

‎docs/assets/examples/menu.json‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,27 @@
126126
"zh": "柱状图、散点图间切换的全局动画",
127127
"en": "Global animation for switching between bar charts and scatter plots"
128128
}
129+
},
130+
{
131+
"path": "disappear-animation",
132+
"title": {
133+
"zh": "退场动画",
134+
"en": "Disappear Animation"
135+
}
136+
},
137+
{
138+
"path": "disappear-animation-gaussion-blur",
139+
"title": {
140+
"zh": "退场动画高斯模糊效果",
141+
"en": "Disappear Animation Gaussian Blur Effect"
142+
}
143+
},
144+
{
145+
"path": "disappear-animation-wipe",
146+
"title": {
147+
"zh": "退场动画擦除效果",
148+
"en": "Disappear Animation Wipe Effect"
149+
}
129150
}
130151
]
131152
},
@@ -3295,4 +3316,4 @@
32953316
]
32963317
}
32973318
]
3298-
}
3319+
}

0 commit comments

Comments
 (0)