728x90
반응형
애니메이션 View들을 어떻게 텀을 두고 플레이할까 고민하다가
animated.View 들의 ref 들을 onLayout 콜백에서 index 값의 텀을 두고 실행하게 했다.
해당 컴포넌트 코드
import { FlatList, TouchableOpacity, View } from 'react-native';
import { upeIp } from './useIp';
import FastImage from 'react-native-fast-image';
import * as Animatable from 'react-native-animatable';
import { useRef } from 'react';
export const Category = () => {
const { ip } = upeIp();
const itemRef = useRef<Animatable.View>({});
return (
<View style={{ width: '100%', height: 100 }}>
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={ip}
keyExtractor={(item) => String(item.ipIdx)}
renderItem={({ item, index }) => {
return (
<TouchableOpacity
onLayout={() =>
itemRef.current[index].animate(
{
0: { scale: 0, rotate: '-90deg' },
0.5: { scale: 0.5, rotate: '-60deg' },
0.75: { scale: 0.8, rotate: '-45deg' },
1: { scale: 1.0, rotate: '0deg' },
},
index * 1000,
)
}
>
<Animatable.View
duration={300}
ref={(ref) => (itemRef.current[index] = ref)}
style={{
width: 100,
height: 100,
justifyContent: 'center',
alignItems: 'center',
}}
>
<View
style={{
width: 75,
height: 75,
borderRadius: 50,
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: { width: 3, height: 3 },
shadowOpacity: 0.4,
shadowRadius: 5,
elevation: 3,
backgroundColor: 'white',
}}
>
<FastImage
source={{ uri: item.iconUrl }}
style={{
width: 75,
height: 75,
borderRadius: 50,
}}
/>
</View>
</Animatable.View>
</TouchableOpacity>
);
}}
/>
</View>
);
};
아직 미완성이라 style들을 밖으로 빼지않았다.
728x90
반응형
