react-native-reanimated 애니메이션

Documentação - Animação (Iniciante)
기본 반응 - CLI

소개
Este é um documento para iniciantes conseguirem fazer a utilização de animações simples no dia a dia. Este documento terá um código simples que também estará disponível no github.

설치
Para fazer a instalação do pacote de animação é simples:
원사 추가 반응 네이티브 재 애니메이션
우
npm install react-native-reanimated
esse comando no seu 터미널을 활용하십시오.

Logo após a installação é necessário via cocoapods utilizando comando pods install dentro da pasta/ios. 플러그인을 설치하려면 babel.config.js 파일이 필요하지 않습니다.

module.exports = {
…
plugins: [
…
         'react-native-reanimated/plugin',
     ],  
};

가능한 오류
Quando estava instalando ocorreu um erro quando fui utilizar o reanimated informando que o passo anterior tem que ser feito, mesmo sendo feito pode ocorre um erro de cache, é simples resolver yarn start --reset-cache

O código que foi utilizado para abertura do menu utilizando o Reanimated

import React from 'react';
import {StyleSheet} from 'react-native';
import Animated, {
 interpolate,
 runOnJS,
 useAnimatedStyle,
 useSharedValue,
 withSpring,
 withTiming,
} from 'react-native-reanimated';
import {
 Container,
 Content,
 Blackout,
 TopClose,
 CloseItem,
 Image,
} from './styles';

export const ModalSettings: React.FC<any> = ({setOpenModalFunction}) => {
 const offset = useSharedValue(900);

 const animatedStyles = useAnimatedStyle(() => ({
   transform: [{translateY: offset.value}],
   opacity: interpolate(offset.value, [0, -280], [1, 0.5]),
 }));

 offset.value = withSpring(20);

 const animatedAndClose = () => {
   offset.value = withTiming(
     1200,
     {
       duration: 800,
     },
     () => {
       'worklet';

       runOnJS(setOpenModalFunction)();
     },
   );
 };

 return (
   <Blackout>
     <Container>
       <Animated.View style={[animatedStyles, styles.animated]}>
         <Content>
           <TopClose onPress={animatedAndClose}>
             <CloseItem />
           </TopClose>
           <Image
             source={{
               uri: 'https://cdn.dribbble.com/users/745861/screenshots/7889509/media/5891d9d48179ca0b3a8fcdf178db8737.png',
             }}
           />
         </Content>
       </Animated.View>
     </Container>
   </Blackout>
 );
};

const styles = StyleSheet.create({
 animated: {
   flex: 1,
 },
});

Segue o link do github com o aplicação complete:



Abrir aplicação no github