리액트 네이티브의 Animated

사용가능 컴포넌트

View
ScrollView
Text
Image

Animated static method

• interpolate :
  inputRange, outputRange를 이용하여 설정객체를 만듦.

    const animatedValue = new Animated.Value(0);
    animatedValue.interpolate({ 
        inputRange : [0, 1], 
        outputRange : [0, 200]
    })

• timing :
  duration동안 동작하는 애니메이션

    const config {
        toValue, 
        duration, 
        useNativeDriver, 
        easing, 
        delay
        // 등등..
    }
    Animated.timing(value, config).start()

• loop :
  무한반복

// Animated.loop(Animated.timing(val, conf))
Animated.loop(
    Animated.timing(
        value,
        {
            //..
            easing : Easing.linear
        }
    )
).start()

• parallel
  복수 애니메이션 병렬처리

Animated.parallel([
    Animated.timing(val1,conf1),
    Animated.timing(val2,conf2),
    Ahimated.timing(val3,conf3)
]).start()

• sequence
  순차처리 애니메이션
  1번이 처리 완료되면 2번이 실행 -> 3번실행..

Animated.sequence([
    Animation1,
    Animation2,
    Animation3
]).start()

• stagger
  시차를 둔 애니메이션 실행

Animated.stagger(
    100,
    [
        anim1,
        anim2,
        anim3
    ]
).start()

• createAnimatedComponent

const CustomAnimatedComponent = Animated.createAnimatedComponent(CustomComponent)

/// ...
return (
    <CustomAnimatedComponent>
        <Text>aaa</Text>
    </CustomAnimatedComponent>
)

config

easing :
애니메이션의 움직임 설정

duration : 시간

toValue : 설정할 value

useNativeDriver : 애니메이션을 네이티브의 UI쓰레드에서 실행할지 여부(boolean)

기타

• 애니메이션 만들어주는 함수

const createAnimation = (animationValue, toValue) => {
    return Animated.timing(
        animatedValue,
        {
            toValue,
            duration : 1000,
            useNativeDriver : false
        }
    )
}

Animated.sequence([
    createAnimation(aniVal1),
    createAnimation(aniVal2),
    createAnimation(aniVal3),
]).start();

• 애니메이션 효과 재지정
  애니메이션을 다시 호출할 경우 setValue를 이용해 애니메이션 재지정

animate = () => {
    animatedValue.setValue(300);
}

• useNativeDriver
  브릿지를 거쳐 실행되는 애니메이션에 관련된 JS코드를 네이티브에 모두 넘겨버림
  매번 브릿지를 거치지 않고 네이티브에서 애니메이션을 수행하므로 부드러운 움직임을 나타낼 수 있음
  단, non-layout 프로퍼티에만 적용 가능(transform, opacity 등)
  laytout프로퍼티(width, top, flex 등)에는 적용할 수 없음

• 콜백함수

Animated.timing(
    value,
    config,
).start(callback);