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>Group</title>
<script src="../dist/zrender.js"></script>
</head>
<body>
<div id="main" style="width:1000px;height:500px;"></div>
<script type="text/javascript">
var zr = zrender.init(document.getElementById('main'));
var circle = new zrender.Circle({
scale: [1, 1],
shape: {
cx: 0,
cy: 0,
r: 10
},
hoverable: false
});
var circle2 = new zrender.Circle({
scale: [1, 1],
shape: {
cx: 10,
cy: 10,
r: 10
},
style: {
fill:'red'
},
hoverable: false
});
var group = new zrender.Group({
position: [100, 100]
});
group.add(circle);
group.add(circle2);
zr.add(group);
group.animate('', true)
.when(1000, {
position: [200, 0]
})
.when(2000, {
position: [200, 200]
})
.when(3000, {
position: [0, 200]
})
.when(4000, {
position: [100, 100]
})
.start();
circle.animate('', true)
.when(100, {
position: [20, 0]
})
.when(200, {
position: [0, 0]
})
.when(300, {
position: [-20, 0]
})
.when(400, {
position: [0, 0]
})
.start();
zr.configLayer(0, {
// clearColor: 'rgba(255, 255, 255, 0.1)'
motionBlur: true,
lastFrameAlpha: 0.99
});
</script>
<div id="Main" style="width:600px;height:400px;"></div>
</body>
</html>
|
