이번 앱 디자인에는 animated 를 많이 사용한 UI 가 들어간다.
animated view 의 핵심은, state로 ui를 변화시키는 것을 지양하고,
const animatedY = useRef(new Animated.Value(0)).current;
처럼 ref로 관리해줘야 리랜더링을 방지하여 매끄러운 애니메이션 효과가 나온다.
기본 사용은
const translateY = animatedY.interpolate({
inputRange: [0, bannerHeight - headerHeight - safeAreaTop],
outputRange: [0, -bannerHeight + headerHeight + safeAreaTop],
extrapolate: 'clamp',
});
이런 형태로, translate를 한번해주어, 스크롤 input과 output 의 레인지를 계산해주고(해당 코드는 헤더가 스크롤할때 아래로 이동하도록 하는 코드이다)
clamp로 묶어주어, input range 의 밖의 값이 입력되었을때, output range의 큰 값이 출력되도록 해준다.
애니메이션 효과를 입히고 싶은 컴포넌트에
<Animated.View
style={{
flexDirection: 'column',
transform: [{ translateY: animatedY }],
}}
>
해당 형태로 추가해준다.
animated.timing 으로 시작한 애니메이션도 있고, scroll을 통한 offset으로 해당하는 애니메이션도 있어 풀 소스코드를 올려놓는다.
const safeAreaTop = useSafeAreaInsets().top;
를 통해 ios safeArea에도 대처했다.
import { useCallback, useRef } from 'react';
import {
Animated,
Dimensions,
NativeScrollEvent,
NativeSyntheticEvent,
Platform,
Text,
UIManager,
View
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { heightScale } from '../../util/Layout';
import { HomeHeader } from './HomeHeader';
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 bannerHeight = (deviceWidth * 600) / 480;
const headerHeight = heightScale(75);
if (
Platform.OS === 'android' &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
export const HomeScreen = () => {
let currentOffset = 0;
const animatedY = useRef(new Animated.Value(0)).current;
const animatedBackground = useRef(new Animated.Value(0)).current;
const animatedOpacity = useRef(new Animated.Value(0)).current;
const safeAreaTop = useSafeAreaInsets().top;
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 > bannerHeight / 3
) {
console.log('down');
Animated.parallel([
Animated.timing(animatedBackground, {
useNativeDriver: true,
duration: 300,
toValue: 1,
}),
Animated.timing(animatedOpacity, {
useNativeDriver: true,
duration: 300,
toValue: 1,
}),
]).start();
}
if (
direction === 'up' &&
event.nativeEvent.contentOffset.y < bannerHeight / 3
) {
console.log('up');
Animated.parallel([
Animated.timing(animatedBackground, {
useNativeDriver: true,
duration: 300,
toValue: 0,
}),
Animated.timing(animatedOpacity, {
useNativeDriver: true,
duration: 300,
toValue: 0,
}),
]).start();
}
},
[],
);
// const transY = Animated.
const translateY = animatedY.interpolate({
inputRange: [0, bannerHeight - headerHeight - safeAreaTop],
outputRange: [0, -bannerHeight + headerHeight + safeAreaTop],
extrapolate: 'clamp',
});
const translateHeaderY = animatedY.interpolate({
inputRange: [0, bannerHeight - headerHeight - safeAreaTop],
outputRange: [0, bannerHeight - headerHeight - safeAreaTop],
extrapolate: 'clamp',
});
const onScroll = Animated.event(
[{ nativeEvent: { contentOffset: { y: animatedY } } }],
{
useNativeDriver: true,
listener: (event) => {
animationStart(event);
},
},
);
return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
}}
>
<Animated.FlatList
style={{ flex: 1 }}
data={DUMMY}
ListHeaderComponent={() => {
return (
<HomeHeader
animatedY={translateY}
translateHeaderY={translateHeaderY}
safeAreaTop={safeAreaTop}
animatedBackground={animatedBackground}
bannerHeight={bannerHeight}
animatedOpacity={animatedOpacity}
headerHeight={headerHeight}
/>
);
}}
onScroll={onScroll}
// pagingEnabled
stickyHeaderIndices={[0]}
renderItem={({ item, index }) => {
return (
<View
style={{
width: 100,
height: heightScale(600),
borderWidth: 1,
backgroundColor: 'pink',
}}
>
<Text style={{ fontSize: 40 }}>{index}</Text>
</View>
);
}}
/>
</View>
);
};
import React from 'react';
import {
Animated,
Dimensions,
Image,
TouchableOpacity,
View,
} from 'react-native';
import AlarmBlack from '../../assets/icons/alarmBlack.svg';
import AlarmWhite from '../../assets/icons/alarmWhite.svg';
import { heightScale, widthScale } from '../../util/Layout';
type HomeHeaderProps = {
animatedY: Animated.AnimatedInterpolation<string | number>;
translateHeaderY: Animated.AnimatedInterpolation<string | number>;
safeAreaTop: number;
animatedBackground: Animated.Value;
bannerHeight: number;
animatedOpacity: Animated.Value;
headerHeight: number;
};
const deviceWidth = Dimensions.get('window').width;
export const HomeHeader = ({
animatedY,
translateHeaderY,
safeAreaTop,
animatedBackground,
bannerHeight,
animatedOpacity,
headerHeight,
}: HomeHeaderProps) => {
return (
<Animated.View
style={{
flexDirection: 'column',
transform: [{ translateY: animatedY }],
}}
>
<Animated.View
style={{
position: 'absolute',
top: safeAreaTop,
width: deviceWidth,
height: headerHeight,
zIndex: 1,
transform: [{ translateY: translateHeaderY }],
backgroundColor: animatedBackground.interpolate({
inputRange: [0, 1],
outputRange: ['#FFFFFF00', '#FFFFFF'],
}),
alignItems: 'center',
justifyContent: 'center',
}}
>
<Image
source={require('../../assets/images/headerLogo.png')}
style={{
width: widthScale(50),
height: heightScale(35),
}}
resizeMode="contain"
/>
<TouchableOpacity
style={{
width: headerHeight,
height: headerHeight,
position: 'absolute',
right: 0,
justifyContent: 'center',
alignItems: 'center',
top: 0,
}}
>
<Animated.View
style={{
zIndex: 2,
position: 'absolute',
opacity: animatedOpacity,
}}
>
<AlarmBlack width={widthScale(40)} height={widthScale(40)} />
</Animated.View>
<AlarmWhite width={widthScale(40)} height={widthScale(40)} />
</TouchableOpacity>
</Animated.View>
<TouchableOpacity
style={{
width: deviceWidth,
height: bannerHeight,
backgroundColor: 'orange',
}}
></TouchableOpacity>
<View
style={{
width: '100%',
height: headerHeight,
backgroundColor: 'blue',
}}
></View>
<View
style={{
width: '100%',
height: headerHeight,
backgroundColor: 'red',
}}
></View>
</Animated.View>
);
};
