parent
10cd4adc79
commit
1720eef5c4
Binary file not shown.
Before Width: | Height: | Size: 991 KiB After Width: | Height: | Size: 606 KiB |
Binary file not shown.
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 563 KiB |
|
@ -21,8 +21,8 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
||||||
import Svg, {Path, SvgProps} from 'react-native-svg'
|
import Svg, {Path, SvgProps} from 'react-native-svg'
|
||||||
|
|
||||||
import {isAndroid} from '#/platform/detection'
|
import {isAndroid} from '#/platform/detection'
|
||||||
import {useColorMode} from 'state/shell'
|
import {useColorMode} from '#/state/shell'
|
||||||
import {colors} from '#/lib/styles'
|
import {Logotype} from '#/view/icons/Logotype'
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import splashImagePointer from '../assets/splash.png'
|
import splashImagePointer from '../assets/splash.png'
|
||||||
|
@ -98,6 +98,11 @@ export function Splash(props: React.PropsWithChildren<Props>) {
|
||||||
opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
|
opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
const bottomLogoAnimation = useAnimatedStyle(() => {
|
||||||
|
return {
|
||||||
|
opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
|
||||||
|
}
|
||||||
|
})
|
||||||
const reducedLogoAnimation = useAnimatedStyle(() => {
|
const reducedLogoAnimation = useAnimatedStyle(() => {
|
||||||
return {
|
return {
|
||||||
transform: [
|
transform: [
|
||||||
|
@ -183,12 +188,30 @@ export function Splash(props: React.PropsWithChildren<Props>) {
|
||||||
return (
|
return (
|
||||||
<View style={{flex: 1}} onLayout={onLayout}>
|
<View style={{flex: 1}} onLayout={onLayout}>
|
||||||
{!isAnimationComplete && (
|
{!isAnimationComplete && (
|
||||||
<Image
|
<View style={StyleSheet.absoluteFillObject}>
|
||||||
accessibilityIgnoresInvertColors
|
<Image
|
||||||
onLoadEnd={onLoadEnd}
|
accessibilityIgnoresInvertColors
|
||||||
source={{uri: isDarkMode ? darkSplashImageUri : splashImageUri}}
|
onLoadEnd={onLoadEnd}
|
||||||
style={StyleSheet.absoluteFillObject}
|
source={{uri: isDarkMode ? darkSplashImageUri : splashImageUri}}
|
||||||
/>
|
style={StyleSheet.absoluteFillObject}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Animated.View
|
||||||
|
style={[
|
||||||
|
bottomLogoAnimation,
|
||||||
|
{
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: insets.bottom + 40,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
]}>
|
||||||
|
<Logotype fill="#fff" width={90} />
|
||||||
|
</Animated.View>
|
||||||
|
</View>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{isReady &&
|
{isReady &&
|
||||||
|
@ -212,7 +235,7 @@ export function Splash(props: React.PropsWithChildren<Props>) {
|
||||||
},
|
},
|
||||||
]}>
|
]}>
|
||||||
<AnimatedLogo
|
<AnimatedLogo
|
||||||
fill={isDarkMode ? colors.blue3 : '#fff'}
|
fill="#fff"
|
||||||
style={[{opacity: 0}, logoAnimations]}
|
style={[{opacity: 0}, logoAnimations]}
|
||||||
/>
|
/>
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
|
@ -233,17 +256,14 @@ export function Splash(props: React.PropsWithChildren<Props>) {
|
||||||
transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
|
transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
|
||||||
},
|
},
|
||||||
]}>
|
]}>
|
||||||
<AnimatedLogo
|
<AnimatedLogo fill="#fff" style={[logoAnimations]} />
|
||||||
fill={isDarkMode ? colors.blue3 : '#fff'}
|
|
||||||
style={[logoAnimations]}
|
|
||||||
/>
|
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
}>
|
}>
|
||||||
{!isAnimationComplete && (
|
{!isAnimationComplete && (
|
||||||
<View
|
<View
|
||||||
style={[
|
style={[
|
||||||
StyleSheet.absoluteFillObject,
|
StyleSheet.absoluteFillObject,
|
||||||
{backgroundColor: isDarkMode ? colors.blue3 : '#fff'},
|
{backgroundColor: '#fff'},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in New Issue