1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bar Animation</title>
<script src="../dist/zrender.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/zrender@4.2.0/dist/zrender.js"></script> -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<script type="text/javascript">
var N = 10000;
console.time('init');
for (var k = 0; k < 1; k++) {
var div = document.createElement('div');
var width = 600;
var height = 300;
div.style.width = width + 'px';
div.style.height = height + 'px';
document.body.appendChild(div);
// 初始化zrender
var zr = zrender.init(div, {
renderer: 'canvas'
});
let barShapes = [];
for (var i = 0; i < N; i++) {
var h = height * Math.random();
var barShape = new zrender.Rect({
height: h,
shape: {
x: i * width / N,
y: height,
width: width / N,
height: 0
},
style: {
fill: 'rgb(0, 0, 180)'
},
onmouseover: function () {
this.animateStyle()
.when(200, {
fill: 'rgb(180, 0, 0)'
})
.start();
},
onmouseout: function () {
this.animateStyle()
.when(200, {
fill: 'rgb(0, 0, 180)'
})
.start();
}
});
zr.add(barShape);
barShapes.push(barShape);
}
console.time('animate');
barShapes.forEach(barShape => {
// barShape.animate('shape').when(500, {
// height: barShape.height,
// y: height - barShape.height
// }).start();
barShape.animateTo({
shape: {
height: barShape.height,
y: height - barShape.height
},
style: {
fill: 'red'
}
}, { duration: 500 });
})
console.timeEnd('animate');
}
console.timeEnd('init');
</script>
</body>
</html>
|
