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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Curves</title>
<script src="../dist/zrender.js"></script>
</head>
<body style='background:-webkit-gradient(linear,0 0, 0 100%, color-stop(0,black), color-stop(0.8, rgb(150,150,150)), color-stop(1, rgb(200,200,200)))'>
<div id="main" style="width:600px;height:400px;"></div>
<script type="text/javascript">
var w = 1280;
var h = 800;
var pi = Math.PI;
var main = document.getElementById('main');
main.style.width = w + 'px';
main.style.height = h + 'px';
var zr = zrender.init(main);
var N = 10;
for (var i = 0; i < N ; i ++) {
createShape(i);
}
function createShape(i) {
var ShapeClass = ( i % 5 == 0 ) ? zrender.Trochoid : zrender.Rose;
var r = ( i % 5 == 0 ) ? random(50, 20) : [random(100, 30)];
var shape = new ShapeClass({
position: [random(w), random(h)],
shape: {
cx: 0,
cy: 0,
r: r,
r0: random(20, 10),
d: random(100),
k: random(10),
n: random(5),
location: ['in', 'out'][i % 2]
},
style: {
lineWidth: 1,
stroke: '#' + (Math.random() + '').slice(2, 8)
},
rotation: pi * 2 / random(360),
hoverable: false,
draggable: false
});
zr.add(shape);
animate(shape);
}
function animate(shape) {
var time = random(1000, 100);
var type = shape.type =='rose' ? random(6) : random(3);
var easing = [
'Linear', 'QuadraticIn', 'QuadraticOut', 'QuadraticInOut',
'CubicIn', 'CubicOut', 'CubicInOut', 'QuarticIn', 'QuarticOut',
'QuarticInOut', 'QuinticIn', 'QuinticOut', 'QuinticInOut', 'SinusoidalIn',
'SinusoidalOut', 'SinusoidalInOut', 'ExponentialIn', 'ExponentialOut',
'ExponentialInOut', 'CircularIn', 'CircularOut', 'CircularInOut',
'ElasticIn', 'ElasticOut', 'ElasticInOut', 'BackIn', 'BackOut',
'BackInOut', 'BounceIn', 'BounceOut', 'BounceInOut'
][0]//[random(30)];
var move = shape.animate('');
switch (type) {
case 0 :
move.when(time, {
scale : [random(3, 1), random(3, 1)]
});
break;
case 1 :
move.when(time, {
position : [random(w), random(h)]
});
break;
case 2 :
move.when(time, {
rotation : pi * 2 * random(10, 1)
});
break;
case 3 :
move = shape.animate('shape').when(time, {
r : [random(100, 30)]
});
break;
case 4 :
move = shape.animate('shape').when(time, {
k : random(10)
});
break;
case 5 :
move = shape.animate('shape').when(time, {
n : random(5)
});
break;
}
move.done(function() {
animate(shape);
})
.start(easing);
}
function random(max, min) {
var min = min || 0;
return Math.floor(Math.random() * (max - min)) % (max - min) + min;
}
</script>
</body>
</html>
|
