forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Tweak splash speed (#2241)
authored by
Eric Bailey
and committed by
GitHub
d05658f2
1cf5a0b0
+20
-13
+20
-13
src/Splash.tsx
+20
-13
src/Splash.tsx
···
49
49
const intro = useSharedValue(0)
50
50
const outroLogo = useSharedValue(0)
51
51
const outroApp = useSharedValue(0)
52
+
const outroAppOpacity = useSharedValue(0)
52
53
const [isAnimationComplete, setIsAnimationComplete] = React.useState(false)
53
54
const [isImageLoaded, setIsImageLoaded] = React.useState(false)
54
55
const isReady = props.isReady && isImageLoaded
···
62
63
{
63
64
scale: interpolate(
64
65
outroLogo.value,
65
-
[0, 0.06, 0.08, 1],
66
-
[1, 0.8, 0.8, 400],
66
+
[0, 0.08, 1],
67
+
[1, 0.8, 400],
67
68
'clamp',
68
69
),
69
70
},
···
79
80
scale: interpolate(outroApp.value, [0, 1], [1.1, 1], 'clamp'),
80
81
},
81
82
],
82
-
opacity: interpolate(outroApp.value, [0, 0.9, 1], [0, 1, 1], 'clamp'),
83
+
opacity: interpolate(
84
+
outroAppOpacity.value,
85
+
[0, 0.08, 0.15, 1],
86
+
[0, 0, 1, 1],
87
+
'clamp',
88
+
),
83
89
}
84
90
})
85
91
···
92
98
93
99
intro.value = withTiming(
94
100
1,
95
-
{duration: 200, easing: Easing.out(Easing.cubic)},
101
+
{duration: 400, easing: Easing.out(Easing.cubic)},
96
102
async () => {
97
103
// set these values to check animation at specific point
98
104
// outroLogo.value = 0.1
99
105
// outroApp.value = 0.1
100
106
outroLogo.value = withTiming(
101
107
1,
102
-
{duration: 1000, easing: Easing.in(Easing.cubic)},
108
+
{duration: 1200, easing: Easing.in(Easing.cubic)},
103
109
() => {
104
110
runOnJS(onFinish)()
105
111
},
106
112
)
107
-
outroApp.value = withTiming(
108
-
1,
109
-
{duration: 1000, easing: Easing.inOut(Easing.cubic)},
110
-
() => {
111
-
runOnJS(onFinish)()
112
-
},
113
-
)
113
+
outroApp.value = withTiming(1, {
114
+
duration: 1200,
115
+
easing: Easing.inOut(Easing.cubic),
116
+
})
117
+
outroAppOpacity.value = withTiming(1, {
118
+
duration: 1200,
119
+
easing: Easing.in(Easing.cubic),
120
+
})
114
121
},
115
122
)
116
123
}
117
-
}, [onFinish, intro, outroLogo, outroApp, isReady])
124
+
}, [onFinish, intro, outroLogo, outroApp, outroAppOpacity, isReady])
118
125
119
126
const onLoadEnd = useCallback(() => {
120
127
setIsImageLoaded(true)