U

Animated 컴포넌트는 애니메이션을 생성하고 관리하기 위한 강력한 API를 제공하는 기본 제공 ReactNative 컴포넌트입니다. Animated를 사용하면 개발자는 시간 제한 애니메이션, 연쇄 애니메이션, 물리 기반 애니메이션을 포함한 복잡한 애니메이션과 상호작용을 쉽게 만들 수 있습니다. 애니메이션 컴포넌트는 애니메이션 값을 사용자 인터페이스 컴포넌트의 애니메이션 프로퍼티에 매핑하는 방식으로 작동합니다.

다음은 ReactNative에서 Animated 컴포넌트를 사용하는 두 가지 예시 코드입니다.

버튼 누르기 애니메이션 적용

import React, { useRef } from 'react';
import { View, TouchableOpacity, Text, Animated } from 'react-native';

const ButtonAnimation = () => {
  const scaleAnim = useRef(new Animated.Value(1)).current;

  const onPressIn = () => {
    Animated.spring(scaleAnim, {
      toValue: 0.8,
      useNativeDriver: true,
    }).start();
  };

  const onPressOut = () => {
    Animated.spring(scaleAnim, {
      toValue: 1,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPressIn={onPressIn} onPressOut={onPressOut}>
        <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
          <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Press me</Text>
        </Animated.View>
      </TouchableOpacity>
    </View>
  );
};

export default ButtonAnimation;

뷰 페이드 인

import React, { useState, useEffect } from 'react';
import { View, Animated } from 'react-native';

const App = () => {
  const [fadeAnim] = useState(new Animated.Value(0));

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  }, []);

  return (
    <Animated.View style={{ opacity: fadeAnim }}>
      <View>
        <Text>Hello World!</Text>
      </View>
    </Animated.View>
  );
};

export default App;

이 예제에서는 fadeAnim이라는 새로운 애니메이션 값 객체를 생성하고 useState 훅을 사용하여 0으로 초기화합니다. 그런 다음, 컴포넌트가 마운트될 때 애니메이션을 시작하기 위해 useEffect 훅을 사용합니다. Animated.timing 메서드를 사용하여 Animated.View 컴포넌트에서 1000밀리초(1초)의 기간 동안 애니메이션이 페이드됩니다. 사용NativeDriver 옵션을 true로 설정하면 성능이 향상됩니다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0