-
Notifications
You must be signed in to change notification settings - Fork 54
/
Copy pathtest.html
72 lines (67 loc) · 2.49 KB
/
test.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../juggle-help/dist/juggle-help.js" type="text/javascript"></script>
<script src="../juggle-event/dist/juggle-event.js" type="text/javascript"></script>
<script src="../juggle-juggler/dist/juggle-juggler.js" type="text/javascript"></script>
<script src="../juggle-tween/dist/juggle-tween.js" type="text/javascript"></script>
<script src="DisplayObject.js" type="text/javascript"></script>
<script type="text/javascript">
var array = [
"easeIn"
, "easeOut"
, "easeInOut"
, "easeOutIn"
, "easeInBack"
, "easeOutBack"
, "easeInOutBack"
, "easeOutInBack"
, "easeInElastic"
, "easeOutElastic"
, "easeInOutElastic"
, "easeOutInElastic"
, "easeInBounce"
, "easeOutBounce"
, "easeInOutBounce"
, "easeOutInBounce"
, "linear"
];
var num = 0;
function onRepeat() {
num++;
if (num % 2 === 0) {
var string = array.shift();
tween.setTransition(string);
document.getElementById("tween_type").innerHTML = string;
array.push(string);
}
}
var tween;
window.onload = function () {
document.getElementById("tween_type").innerHTML = "linear";
var display = new DisplayObject(document.getElementById("tween_div"));
display.setAlpha(1);
display.setX(100);
display.setY(100);
tween = juggle.tweenPool.fromPool(display, 2);
tween.mReverse = true;
tween.mRepeatCount = 0;
tween.mRepeatDelay = 1;
tween.setDelay(1);
tween.animate(display.getX, display.setX, 800);
tween.animate(display.getY, display.setY, 400);
tween.mOnRepeat = onRepeat;
juggle.jugglerManager.juggler.add(tween);
}
</script>
</head>
<body>
<div>
<div id="tween_type" style="font-size: 12px;position: absolute;top: 20px;left: 200px">XXXXX</div>
</div>
<div style="background: #ffeca4;position: absolute;top: 100px;left: 100px; width: 800px;height: 400px;"></div>
<div id="tween_div" style="width: 100px; height: 100px; background: #ff6de8;"></div>
</body>
</html>