/
Bin.re
121 lines (110 loc) · 2.98 KB
/
Bin.re
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
open Revery;
open Revery.Core;
open Revery.Math;
open Revery.UI;
module Logo = (
val component((render, ~children, ()) =>
render(
() => {
let rotation =
useAnimation(
Animated.floatValue(0.),
{
toValue: 6.28,
duration: Seconds(8.),
delay: Seconds(1.0),
repeat: true,
},
);
let rotationY =
useAnimation(
Animated.floatValue(0.),
{
toValue: 6.28,
duration: Seconds(4.),
delay: Seconds(0.5),
repeat: true,
},
);
<image
src="outrun-logo.png"
style={Style.make(
~width=512,
~height=256,
~transform=[
RotateY(Angle.from_radians(rotationY)),
RotateX(Angle.from_radians(rotation)),
],
(),
)}
/>;
},
~children,
)
)
);
module AnimatedText = (
val component((render, ~delay, ~textContent, ~children, ()) =>
render(
() => {
let opacity: float =
useAnimation(
Animated.floatValue(0.),
{
toValue: 1.0,
duration: Seconds(1.),
delay: Seconds(delay),
repeat: false,
},
);
let translate: float =
useAnimation(
Animated.floatValue(50.),
{
toValue: 0.,
duration: Seconds(0.5),
delay: Seconds(delay),
repeat: false,
},
);
let textHeaderStyle =
Style.make(
~color=Colors.white,
~fontFamily="Roboto-Regular.ttf",
~fontSize=24,
~marginHorizontal=8,
~opacity,
~transform=[TranslateY(translate)],
(),
);
<text style=textHeaderStyle> textContent </text>;
},
~children,
)
)
);
let init = app => {
let win = App.createWindow(app, "Welcome to Revery!");
let render = () =>
<view
style={Style.make(
~position=LayoutTypes.Absolute,
~justifyContent=LayoutTypes.JustifyCenter,
~alignItems=LayoutTypes.AlignCenter,
~bottom=0,
~top=0,
~left=0,
~right=0,
(),
)}>
<Logo />
<view
style={Style.make(~flexDirection=Row, ~alignItems=AlignFlexEnd, ())}>
<AnimatedText delay=0.0 textContent="Welcome" />
<AnimatedText delay=0.5 textContent="to" />
<AnimatedText delay=1. textContent="Revery" />
</view>
</view>;
UI.start(win, render);
};
App.start(init);