Action intent

화면을 전환하거나 로딩 indicator등을 구현할 수 있는 Animation을 구현해봅니다.

내장 Animated API를 사용하고 이를 이용해 효과를 실행하는 함수를 만들고 특정 이벤트에 앞서 정의한 Animated 함수가 실행 되도록 합니다. 

첫번째 예제는 버튼을 눌렀을때 특정 Component를 이동 시키는 애니메이션 입니다.

기본 animated App.js

- marginTop = new Animated.Value(20) //Animated를 위한 변수를 생성, 연결하고 이를 아래 Animated.View component에 연결

- Animated.timing(시작 값:marginTop, 설정객체{종료값, 시간})

- <Animated.View> Component 사용 (View, Image, ScrollView, Text 사용가능)

두번째 예제는 InputText가 Focus, Blur 이벤트에 따라 width를 변경하는 애니메이션을 적용해 보겠습니다. 

InputApp.js

- animatedWidth = new Animated.Value(200) //초기 너비를 200으로 Animated 값으로 지정

- 너비 값을 파라미터로 갖는 animate 함수를 정의하고 Animated.timing을 호출 하도록 함

- <Animated.View>의 스타일에 width를 animatedWidth로 지정

- <TextInput>의 onBlur, onFocus 이벤트 핸들러에 animate 메서드를 연결

* ref={input => this.input = input} //input이라는 이름으로 component의 참조 변수 생성

다음은 Animated.loop를 이용한 loading indicator를 생성해 보겠습니다.

interpolate 메서드를 사용하고 이는 inputRange(원래 애니메이션 효과), outputRange(앞으로 변경될 효과) 설정 객체를 인수로 사용합니다.

Easing : 애니메이션의 움직임을 조정(가,감속 효과), 요번 예에서는 회전 속도가 일정하도록 linear easing 사용

 LoopApp.js

- setTimeout(() => this.setState({loading: false}), 2000) //2초뒤 애니메이션 종료를 위한 타이머

const rotation = this.animatedRotation.interpolate({
            inputRange: [0,1],   //애니메이션 속도
            outputRange: ['0deg', '360deg'] //360도 회전
        })

여러 Component animation 만들기

제목 그대로 다수의 component에 애니메이션 효과를 주고 싶을 때가 있습니다. 병렬(Parallel), 순차(Sequence), 간격(Stagger)

* 예제를 하나하나 치는 입장에서는 그러고 싶지 않습니다. 

여기서는 병렬 처리에 대한 애니메이션만 직접 해보고 나머지는 비슷한 방식에 함수만 적절히 사용하시면 됩니다.

Parallel.js

- 다수의 Animated.Value 정의

- animate 함수 내 Animated.parallel([ Animated.Value ... ]).start() 정의

- render내 Component 추가

코드는 처음 작성했던 애니메이션 코드를 베이스로 호출하는 함수를 Animated.parallel, 인자로 여러 Component를 배열로 주고 있는 정도의 차이입니다. 

* 순차 처리의 경우 Animated.sequence(Animated.Value), 간격 처리의 경우 Animated.stagger(시간간격, Animated.Value)를 사용하시면 됩니다.

애니메이션 사용 팁

1. 애니메이션 효과 재지정

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

2. 애니메이션 종료 후 콜백함수

Animated.timing(
         this.animatedTitle,
         {
           toValue: 200,
           duration: 800,
         } 
       ).start(() => console.log('animation is complete!'))

3. 네이티브 UI 스레드에서 애니메이션 실행

React native 기본적으로 자바스크립트 스레드에서 애니메이션이 실행되어 느려지거나 동작을 건너뛰어 버리는 이슈가 발생할 수 있습니다. 따라서 동작에 부하가 큰 애니메이션은 네이티브 UI에서 실행해 주는게 안전합니다. 

* 현재 flexbox, margin, padding 속성에는 이 기능을 사용할 수 없습니다.

Animated.timing(
         this.animatedTitle,
         {
           toValue: 200,
           duration: 800,
           useNativeDriver: true
         } 
       ).start()

4. 사용자 애니메이션 Component 만들기

앞에서 언급했듯이 현재 View, Text, Image, ScrollView에만 애니메이션을 적용할 수 있으나 아래 코드 처럼 정의하면 사용자 Component를 생성하면서 애니메이션 속성을 부여할 수 있습니다. 

const Button = Animated.createAnimatedComponent(TouchableHighlight)
<Button onPress={somemethod} style={styles.button}>
    <Text>Hello</Text>
</Button>

이상으로 Reactive native의 animation 효과에 대해서 알아보았습니다.

다음으로는 로컬 데이터를 관리하는 redux에 대해서 알아보겠습니다.