-
Notifications
You must be signed in to change notification settings - Fork 967
/
Tween_Circles.html
96 lines (80 loc) · 2.7 KB
/
Tween_Circles.html
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
<!DOCTYPE html>
<html>
<head>
<title>EaselJS Example: Circles</title>
<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
<script src="../_assets/js/examples.js" type="text/javascript"></script>
<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>
<script type="text/javascript" src="../lib/tweenjs-NEXT.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script id="editable">
var canvas;
var stage;
var tweens;
var activeCount;
var circleCount = 25;
var text;
function init() {
canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
stage.enableDOMEvents(true);
tweens = [];
stage.enableMouseOver(10);
createjs.Touch.enable(stage);
for (var i = 0; i < circleCount; i++) {
// draw the circle, and put it on stage:
var circle = new createjs.Shape();
circle.graphics.setStrokeStyle(15);
circle.graphics.beginStroke("#113355");
circle.graphics.drawCircle(0, 0, (i + 1) * 4);
circle.alpha = 1 - i * 0.02;
circle.x = Math.random() * 550;
circle.y = Math.random() * 400;
circle.compositeOperation = "lighter";
var tween = createjs.Tween.get(circle).to({x: 275, y: 200}, (0.5 + i * 0.04) * 1500, createjs.Ease.bounceOut).call(tweenComplete);
tweens.push({tween: tween, ref: circle});
stage.addChild(circle);
}
activeCount = circleCount;
stage.addEventListener("stagemouseup", handleMouseUp);
text = new createjs.Text("Click Anywhere to Tween", "36px Arial", "#777");
text.x = 350;
text.y = 200;
stage.addChild(text);
createjs.Ticker.addEventListener("tick", tick);
}
function handleMouseUp(event) {
if (text) {
stage.removeChild(text);
text = null;
}
for (var i = 0; i < circleCount; i++) {
var ref = tweens[i].ref;
var tween = tweens[i].tween;
createjs.Tween.get(ref, {override: true}).to({x: stage.mouseX, y: stage.mouseY}, (0.5 + i * 0.04) * 1500, createjs.Ease.bounceOut).call(tweenComplete);
}
activeCount = circleCount;
}
function tweenComplete() {
activeCount--;
}
function tick(event) {
if (activeCount) {
stage.update(event);
}
}
</script>
</head>
<body onload="init();">
<header class="TweenJS">
<h1>CSS Plugin Example</h1>
<p>This example shows how a plugin can be used to override values in
TweenJS. The CSSPlugin ensures the CSS position and size parameters all
receive the "px" suffix required by CSS.</p>
</header>
<canvas id="testCanvas" width="960" height="400" style="background:#000;"></canvas>
</body>
</html>