728x90
반응형
이번에 애니메이션이 많이 들어간 앱을 개발하면서, 작업에 재미가 붙고있다.
해당 코드는
import { useCallback, useRef } from 'react';
import {
Animated,
Dimensions,
FlatList,
NativeScrollEvent,
NativeSyntheticEvent,
Text,
View,
} from 'react-native';
import { heightScale } from '../../util/Layout';
const DUMMY = [
{
index: 0,
},
{
index: 1,
},
{
index: 2,
},
{
index: 3,
},
{
index: 4,
},
{
index: 5,
},
{
index: 6,
},
{
index: 7,
},
];
const deviceWidth = Dimensions.get('window').width;
const ListHeader = () => {
return (
<View>
<View
style={{
width: deviceWidth,
height: heightScale(630),
backgroundColor: 'orange',
}}
></View>
</View>
);
};
export const HomeScreen = () => {
const viewRef = useRef(null);
var currentOffset = 0;
const backgroundColor = useRef(new Animated.Value(0)).current;
const fadingIn = useCallback(() => {
Animated.timing(backgroundColor, {
toValue: 1,
duration: 300,
useNativeDriver: true,
}).start();
}, []);
const fadingOut = useCallback(() => {
Animated.timing(backgroundColor, {
toValue: 0,
duration: 300,
useNativeDriver: true,
}).start();
}, []);
const animationStart = useCallback(
(event: NativeSyntheticEvent<NativeScrollEvent>) => {
let direction =
event.nativeEvent.contentOffset.y > currentOffset ? 'down' : 'up';
currentOffset = event.nativeEvent.contentOffset.y;
if (
direction === 'down' &&
event.nativeEvent.contentOffset.y > heightScale(630) / 2
) {
fadingIn();
}
if (
direction === 'up' &&
event.nativeEvent.contentOffset.y < heightScale(630) / 2
) {
fadingOut();
}
},
[],
);
return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
}}
>
<Animated.View
ref={viewRef}
style={{
width: '100%',
height: heightScale(75),
borderWidth: 1,
position: 'absolute',
top: 0,
zIndex: 1,
backgroundColor: backgroundColor.interpolate({
inputRange: [0, 1],
outputRange: ['#FFFFFF00', '#FFFFFF'],
}),
}}
>
<Text style={{ color: 'black' }}>headerheaderheaderheaderheader</Text>
</Animated.View>
<FlatList
style={{ flex: 1 }}
data={DUMMY}
ListHeaderComponent={ListHeader}
onScroll={(event) => animationStart(event)}
renderItem={() => {
return (
<View
style={{
width: 100,
height: 100,
borderWidth: 1,
backgroundColor: 'pink',
}}
></View>
);
}}
/>
</View>
);
};
728x90
반응형