React-native Animation 1편 (KOR 한글)

React native Animated Component

marong61
marong61
Jan 14, 2017 · 7 min read

리엑트 네이티브에서 애니메이션은 Animated class 를 통해서 구현할 수 있다. 해보면 알겠지만 상당히 쉽고 강력한 애니메이션을 구현 할 수 있다. 네이티브이기 때문에 퍼포먼스도 훌륭하다.

Animataed

class FadeInView extends React.Component {
constructor(props) {
super(props);
this.state = {
fadeAnim: new Animated.Value(0), //
};
...
}

애니메이션을 하기위해선 시간에 따라 값이 변해야 한다. fade in/out 을 구현한다면 opacity 값이 변해야하고 bounce 애니매이션을 구현하려면 translateX,Y 값이 변해야한다.

그렇게 이 값이 시간에 따라 변할것이라는 것을 정의하기 위해서 새로운 Animated.Value 를 만들어야 한다.

위의 코드를 보면 알 수 있다.

constructor () {
this._opacity = new Animatd.Value(0);
}

아래처럼 굳이 state 에 포함하지 않아도 된다. Animated Value 는 변하는 즉시 UI 에 반영된다.

그렇다면 이제 애니메이션을 구동시키는 Core Api 들을 알아보자.

Animated.timing, Animated.decay, Animated.spring

Animated.timing(The value to drive, drive options).start(onEnd);

Css Animation 과 비슷한 기능을 제공하는 api다.

componentDidMount() {
Animated.timing( // Uses easing functions
this._opacity, // The value to drive
{
// toValue: 1,
// duration: 300,
// ease: Easing.inout(),
// delay: 200,
} // Configuration
).start(); // Don't forget start!
}

toValue

this._opacity 를 어디까지? 어느값으로? 변화시킬지를 결정한다. 위의 코드에서는 목적값이 1 로 설정되어있기 때문에 this._opacity 는 0 -> 1 로 변화한다.

duration

duration 이름에서도 감이 빡온다. 애니메이션이 진행되는 시간을 결정한다.

ease

Easing 객체를 이용하여 css ease 와 동일하다. facebook code 에 나와있는 설명이 그렇게 좋지는 않다.

delay

delay는 애니메이션이 시작 전에 얼마만큼 딜레이되는, 그 값을 결정한다.

Animated.decay(value, {velocity: ‘’, deceleration: ‘’)

초기속도로 시작해서, 감속률에 따라서 감속된다.

velocity

초기속도를 결정한다.

deceleration

감속율을 결정한다.

Animated.decay 는 panResponder 와 같이 자주사용된다. 틴더카드는 어느 일정 위치에서 카드를 놓으면 카드가 날라간다. decay 로 그런 날라가는 효과를 낼 수 있다.

Animated.spring(value, springOption)

spring 은 timing 에서 ease in and out 효과를 낸것과 비슷한 효과를 낼 수 있다. 즉 공이 바운스 되는 효과, 용수철을 당겼다가 놓으면 볼 수 있는 그 효과를 낼 수 있다.

SpringOptions 에는 friction, tension 이 있다.

friction

bounce 되는 정도값을 설정한다. 높은값을 주면 더욱 크게 바운스 된다.

tension

스피드를 결정한다. 빠르게 바운스되거나 느리게바운스 되거나를 결정한다.

Interpolator!

Animated의 강력한 기능중 하나인 Interpolator 에 대해서 알아보자.

리엑트네이티브에서 제공하는 기가막힌 것 중에 하나가 바로 이 interolator이다.

interpolator 는 Animated.Value 를 가지고 새로운 Animated.Value 를 만들어내는 기가막힌 기능이다.

예를들어 opacity 가 0 -> 1 로 변화하는 timing 애니메이션을 설정했다고 하자. 그 opacity 가 변화하는 동안 물체를 한바퀴 돌리고 싶다면 어떻게 해야할까?

다른 timing 애니메이션을 추가하고, 새로운 Animated.Value 를 추가하여 동시에 진행하도록 해야할까?

물론 그것도 가능하다.

Animated 함수중에 sequance, parallel 을 통하여 여러 애니메이션을 동시에, 혹은 순차적으로 진행시킬 수 있다.

Animated.parallel([      
Animated.timing(.., {}),
Animated.timing(.., {})
]).start() // 동시에 두가지 애니메이션을 실행.

그러나 interpolator 를 이용하면 더욱 간단히 하나의 애니메이션을 기준으로 여러 효과를 만들어 낼 수 있다.

this.opacity = new Animated.Value(0);
this.rotate = this.opacity.interpolator({
inputRange: [0, 0.5, 1],
outputRange: ['0deg', '180deg', '360deg'],
})
<Animated.View style={
{transform: [{
rotate: this.rotate
}]},
opacity: this.opacity}}>
<Animated.View />

inputRange, outputRange 이 두가지 값으로 하나의 그래프를 그려 this.rotate를 변화시키는 것이다.

this.opacity.interpolator({ inputRange: [0, 0.5, 1]

위의 코드는 ‘opacity가 0, 0.5, 1 일때' 라는 말이고

outputRange: [‘0deg’, ‘180deg’, ‘360deg’] 는

this.rotate 가 opacity 가 0 일때 ‘0deg’, 0.5 일때 ‘180deg’, 1 일때 ‘360deg’ 이렇게 매핑된다는 뜻이다. 즉 위의 경우에는 y=ax 의 그래프가 그려지는 것이다.

그렇다면 직선형 말고 곡선도 가능할까?

물론 가능하다.

this.rotate = this.opacity.interpolator({
inputRange: [0, 0.99, 1],
outputRange: ['0deg', '180deg', '360deg']
})

위의 코드대로면 0 => 0.99 일때 ‘0deg’ => ‘180deg’ 그리고 마지막에서 급격히 증가한다.

this.rotate 는 이제 Animated.value 가 되었기 때문에 this.rotate 로 다른 Animated.Value 를 만들어낼 수 있다.

아래는 MovingSquare Component 이다.

위의 컴포넌트 마운트 시키면 오른쪽으로 빨간색 사각형이 이동하는것을 볼 수 있다.

extrapolate

위의 코드 27번째 줄에 extrapolate 라는 값이 주석으로 처리되어 있다. 이 extrapolate 는 interpolate 로 생성한 AnimationValue 가 inputRange 범위를 벗어났을때 output이 어떻게 되는지를 결정하는 값이다.

extend (디폴트값)

말그대로 input이 늘어나는 대로 늘어난다. 이 값이 디폴트 값이다.

clamp

input값이 범위밖을 넘어도 늘어나지 않고 최대치에서 머물러있다.

identity

범위밖을 벗어나면 input 값과 동일해진다.

extrapolateRight 와 extrapolateLeft 는 inputRange 의 최대 최소 를 벗어났을의 output 을 정하는것이다. extrapolate 를 세분화한 것이라고 볼 수있다.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade