View
ScrollView
Text
Image
const animatedValue = new Animated.Value(0);
animatedValue.interpolate({
inputRange : [0, 1],
outputRange : [0, 200]
})
const config {
toValue,
duration,
useNativeDriver,
easing,
delay
// 등등..
}
Animated.timing(value, config).start()
// Animated.loop(Animated.timing(val, conf))
Animated.loop(
Animated.timing(
value,
{
//..
easing : Easing.linear
}
)
).start()
Animated.parallel([
Animated.timing(val1,conf1),
Animated.timing(val2,conf2),
Ahimated.timing(val3,conf3)
]).start()
Animated.sequence([
Animation1,
Animation2,
Animation3
]).start()
Animated.stagger(
100,
[
anim1,
anim2,
anim3
]
).start()
const CustomAnimatedComponent = Animated.createAnimatedComponent(CustomComponent)
/// ...
return (
<CustomAnimatedComponent>
<Text>aaa</Text>
</CustomAnimatedComponent>
)
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();
animate = () => {
animatedValue.setValue(300);
}
useNativeDriver
브릿지를 거쳐 실행되는 애니메이션에 관련된 JS코드를 네이티브에 모두 넘겨버림
매번 브릿지를 거치지 않고 네이티브에서 애니메이션을 수행하므로 부드러운 움직임을 나타낼 수 있음
단, non-layout 프로퍼티에만 적용 가능(transform, opacity 등)
laytout프로퍼티(width, top, flex 등)에는 적용할 수 없음
콜백함수
Animated.timing(
value,
config,
).start(callback);