-
Notifications
You must be signed in to change notification settings - Fork 72
/
catimate.html
65 lines (59 loc) · 1.38 KB
/
catimate.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
<!DOCTYPE html>
<html>
<head>
<script src="../dist/rekapi.bundle.min.js"></script>
</head>
<body>
<div id="canvas">
<img src="img/octocat.png" style="display: none;">
</div>
<script>
(function (global) {
var canvas = document.getElementById('canvas')
,kapi = new Kapi(canvas, {
'fps': 60
,'height': 500
,'width': 600
})
,cat
,time = 0;
kapi.canvas_style('background', '#eee');
kapi.canvas_style('overflow', 'hidden');
cat = new Kapi.DOMActor(document.getElementsByTagName('img')[0]);
kapi.addActor(cat);
kapi.bind('onFrameRender', function () {
cat.show();
});
cat
.keyframe(time, {
'left': '-240px'
,'top': '-160px'
,'rotate': 0
}).keyframe(time += 1200, {
'left': '300px'
,'top': '250px'
}, 'bouncePast')
.wait(time += 400)
.keyframe(time += 700, {
'left': '50px'
,'rotate': 0
}, 'easeInOutBack')
.wait(time += 150)
.keyframe(time += 850, {
'left': '344px'
,'top': '0px'
,'rotate': -90
}, {
'left': 'easeFromTo'
,'top': 'easeInOutCubic'
,'rotate': 'bouncePast'
})
.keyframe(time += 700, {
'top': '800px'
}, 'easeFrom')
.wait(time += 500);
kapi.play();
} (this));
</script>
</body>
</html>