Zenn
Open8

React NativeのAnimatedライブラリが曲者らしいからまとめる

React Native
ankou22ankou22

簡単に言うとコマ送りにstyleをつけるだけっぽい

import { Animated } from 'react-native';
ankou22ankou22

動かしたいコンポーネントはAnimated.をつける

<Animated.View />
<Animated.Text />

コンポーネント全体を動かしたいならcreateAnimatedComponentにコンポーネントを渡す

const animatedComponent = Animated.createAnimatedComponent(component);
ankou22ankou22

制御される値をuseRefで持っておく

 const animatedValue = useRef(new Animated.Value(0)).current;
ankou22ankou22

interpolate()でコマ送りを制御できる
これをAnimatedコンポーネントのstyleに適用
inputRange: フレーム数値
outputRange: フレーム数値に対応させたい値(カラーコードとかも入れられる)

animatedValue.interpolate({
  inputRange: [0, 100],
  outputRange: [0, 16],
});

https://ja.wikipedia.org/wiki/フレームレート

ankou22ankou22

Animated.timing()で発火
toValue:フレーム数値の上限(基本的にinputRangeの-1？)
easing:加速したり減速したりするあれ。デフォルト以外で指定したければ。
duration:何ミリ秒かけるか

Animated.timing(animatedValue, {
  toValue: 100,
  easing: Easing.back(),
  duration: 2000,
}).start();
ankou22ankou22

InteractionManager.runAfterInteractions()はアニメーション実行後に発火するらしい

  InteractionManager.runAfterInteractions(() => {});