forked from zz85/timeliner
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test_module.html
53 lines (40 loc) · 1.6 KB
/
test_module.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
<html>
<head>
</head>
<body>
<style>
#box {
position: absolute;
width: 50px;
height: 50px;
background: red;
}
body {
overflow: hidden;
font-family: monospace;
}
</style>
<div id="box"></div>
<script type="module">
import { Timeliner } from './src/timeliner.js'
var target = {
x: 0,
y: 0,
rotate: 0
};
// initialize timeliner
var timeliner = new Timeliner(target);
timeliner.addLayer('x');
timeliner.addLayer('y');
timeliner.addLayer('rotate');
timeliner.load({"version":"1.2.0","modified":"Mon Dec 08 2014 10:41:11 GMT+0800 (SGT)","title":"Untitled","layers":[{"name":"x","values":[{"time":0.1,"value":0,"_color":"#893c0f","tween":"quadEaseIn"},{"time":3,"value":3.500023,"_color":"#b074a0"}],"tmpValue":3.500023,"_color":"#6ee167"},{"name":"y","values":[{"time":0.1,"value":0,"_color":"#abac31","tween":"quadEaseOut"},{"time":0.5,"value":-1.000001,"_color":"#355ce8","tween":"quadEaseIn"},{"time":1.1,"value":0,"_color":"#47e90","tween":"quadEaseOut"},{"time":1.7,"value":-0.5,"_color":"#f76bca","tween":"quadEaseOut"},{"time":2.3,"value":0,"_color":"#d59cfd"}],"tmpValue":-0.5,"_color":"#8bd589"},{"name":"rotate","values":[{"time":0.1,"value":-25.700014000000003,"_color":"#f50ae9","tween":"quadEaseInOut"},{"time":2.8,"value":0,"_color":"#2e3712"}],"tmpValue":-25.700014000000003,"_color":"#2d9f57"}]});
function animate() {
requestAnimationFrame(animate);
var w2 = window.innerWidth / 2;
var h2 = window.innerHeight / 2;
box.style.transform = 'translateX(' + (target.x * 100 + w2) + 'px) translateY(' + (target.y * 100 + h2) + 'px) rotate(' + target.rotate * 50 + 'deg)';
}
animate();
</script>
</body>
</html>