React-Native/Animation (2) 썸네일형 리스트형 react-native-lottie-기본편 0. 서론 Lottie는 Airbnb에서 개발한 라이브러리로, Adobe After Effects로 만든 애니메이션을 JSON 파일로 내보낸 후, 이를 웹 및 모바일 환경에서 PNG나 GIF같은 비트맵 기반이 아닌, 벡터 기반으로 움직이는 애니메이션을 만들 수 있다. 주요 특징 높은 성능: Lottie 애니메이션은 네이티브 코드로 실행되기 때문에, HTML5나 GIF에 비해 훨씬 우수한 성능을 제공합니다. 작은 파일 크기: 애니메이션은 JSON 형식으로 내보내져, 비슷한 복잡도의 애니메이션에 비해 파일 크기가 매우 작습니다. 쉬운 통합: After Effects에서 만든 애니메이션을 앱에 쉽게 통합할 수 있어, 디자이너와 개발자 간의 협업이 용이해집니다. 다양한 조정 가능: 애니메이션의 속도, 반복, 시.. Animated FlatList in(Reanimated) 0. 영상 1. 설명 FlatList 스크롤 시 투명도(opacity)와 크기(Scale)을 이용하여 애니메이션 효과를 줬음. react-native-animated 라이브러리를 사용하니 손쉽게 작성이 가능하다. 2. 소스코드 App.tsx import { FlatList, StyleSheet, Text, View, ViewToken } from 'react-native'; import { ListItem } from './components/ListItem'; import { useSharedValue } from 'react-native-reanimated'; const data = new Array(50).fill(0).map((_,index)=>({id : index})); // [{id : 0}.. 이전 1 다음
