-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcircle_tween_example.html
42 lines (31 loc) · 1.07 KB
/
circle_tween_example.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
<!doctype html>
<html>
<head>
<title>Sloots the Game</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
function init() {
var stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
// show the screen
stage.update();
// tween circle
createjs.Tween.get(circle, {loop: true})
.to({x: 400}, 1000, createjs.Ease.getPowInOut(4))
.to({alpha: 0, y: 75}, 500, createjs.Ease.getPowInOut(2))
.to({alpha: 0, y: 125}, 100)
.to({alpha: 1, y: 100}, 500, createjs.Ease.getPowInOut(2))
.to({x: 100}, 800, createjs.Ease.getPowInOut(2));
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();">
<canvas id="demoCanvas" width="500" height="300"></canvas>
</body>
</html>