-
Notifications
You must be signed in to change notification settings - Fork 1
/
anim.html
65 lines (56 loc) · 2.54 KB
/
anim.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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello AR!</title>
<script src="https://aframe.io/releases/1.0.4/aframe.js"></script>
<script src="./dist/aFrameByCode.js"></script>
</head>
<body scene="scene1">
<script>
AFRAME.createAScene({
id: 'scene1',
onInit: function (scene) {
var box = scene.addAnEntity('a-box', { position: "-1 0.5 -3", rotation: "0 45 0", color: "#4CC3D9" });
var sphere = scene.addAnEntity('a-sphere', { position: "0 1.25 -5", radius: "1.25", color: "#EF2D5E" });
var cylinder = scene.addAnEntity('a-cylinder', { position: "1 0.75 -3", radius: "0.5", height: "1.5", color: "#FFC65D" });
var plane = scene.addAnEntity('a-plane', { position: "0 0 -4", rotation: "-90 0 0", width: "4", height: "4", color: "#7BC8A4" });
var sky = scene.addAnEntity('a-sky', { color: "#ECECEC" });
var anim1 = AFRAME.anim();
anim1.sequence(
anim1.scaleTo(1000, { x: 0.5, y: 0.5, z: 0.5 }),
anim1.scaleTo(1000, { x: 1, y: 1, z: 1 }),
);
cylinder.animRun(anim1);
var anim2 = AFRAME.anim();
anim2.sequence(
anim2.rotationBy(1000, { x: 45, y: 45, z: 45 }).repeat(2).reverse(),
anim2.fadeTo(1500, 0).repeat(2).reverse(),
).repeatForever();
cylinder.animRun(anim2);
var anim3 = AFRAME.anim();
anim3.sequence(
anim3.cb(function () {
console.log('start')
}),
anim3.moveTo(1000, { x: 1, y: 0.5, z: -3 }),
anim3.moveBy(1000, { x: 1, y: 1, z: -1 }).repeat(2).reverse(),
anim3.cb(function () {
console.log('end');
sphere.animRun(anim1);
}),
anim3.moveTo(1000, { x: -1, y: 0.5, z: -3 }),
).repeatForever();
box.animRun(anim3);
var anim4 = AFRAME.anim();
anim4.spawn(
anim4.colorBy(5000, { r: 100, g: 0, b: 0 }).repeatForever().reverse(),
anim4.rotationBy(1000, { x: 0, y: 360, z: 0 }).repeatForever(),
);
plane.animRun(anim4);
},
});
</script>
</body>
</html>