2つのアニメーションAPI

HooksベースのコアAPIとCSSアニメーションAPI、それぞれの書き味と使い分けの指針を同じ題材で比べます。

Reanimatedでアニメーションを書く方法は、大きく2つあります。ひとつはuseSharedValueやuseAnimatedStyleといったフックを組み合わせるコアAPI、もうひとつはスタイルにプロパティを渡すだけで動くCSSアニメーションAPIです。

どちらか一方だけを覚えれば良い、というものではありません。得意な場面が異なるので、両方を知っておくと、書きたい動きに対して素直な方を選べます。この章では同じ題材を2通りに書き比べ、使い分けの勘どころをつかみます。

同じ動きを2通りで書く

題材として、四角形がふわっと現れる動き(フェードインしながら少し上に移動する)を考えます。

外部の値に追従するHooks APIと、キーフレームを再生するCSS APIでは、同じ見た目でも組み立て方が異なります。

まずはコアAPIです。共有値を用意し、useAnimatedStyleの中でその値からスタイルを組み立て、表示のタイミングでwithTimingを使って目標値へ動かします。

import { useEffect } from 'react';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from 'react-native-reanimated';

function FadeInBox() {
  const progress = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: progress.value,
    transform: [{ translateY: (1 - progress.value) * 20 }],
  }));

  useEffect(() => {
    progress.value = withTiming(1, { duration: 500 });
  }, []);

  return <Animated.View style={[styles.box, animatedStyle]} />;
}

progressという0から1へ動く値を一本用意し、そこから不透明度と位置を導いています。値がひとつあれば、それを起点に複数のスタイルを連動させられるのがコアAPIの考え方です。

次に、同じ動きをCSSアニメーションAPIで書いてみます。

import Animated from 'react-native-reanimated';

const fadeIn = {
  from: {
    opacity: 0,
    transform: [{ translateY: 20 }],
  },
  to: {
    opacity: 1,
    transform: [{ translateY: 0 }],
  },
};

function FadeInBox() {
  return (
    <Animated.View
      style={{
        ...styles.box,
        animationName: fadeIn,
        animationDuration: '500ms',
      }}
    />
  );
}

開始と終了の見た目をキーフレームとして書き、あとはanimationNameとanimationDurationをスタイルに渡すだけです。共有値もフックも登場しません。コンポーネントが表示された瞬間に、アニメーションが自分から動きはじめます。

Webでブラウザの@keyframesを書いたことがあれば、考え方はほとんど同じだと感じるのではないでしょうか。宣言的に「こう動く」と書けば、あとはReanimatedがキーフレームの間を補間して再生してくれます。

どちらを選ぶか

2つのコードを見比べると、書き味の違いがはっきりします。

CSSアニメーションAPIは、動きがあらかじめ決まっていて、それ自体で完結している場合に向いています。ローディングスピナー、脈打つバッジ、注意を引くための繰り返しの動きなど、外からの入力を必要としない自己完結した動きです。公式ドキュメントも、こうした宣言的なアニメーションではCSSアニメーションAPIを最初の選択肢として勧めています。

一方コアAPIは、値に駆動される動きに向いています。指のドラッグ量やスクロール位置といった、刻々と変わる生きた値にアニメーションを追従させたいとき。あるいは複数の値を組み合わせて、フレーム単位で細かく制御したいとき。こうした場面では、共有値を起点に据えるコアAPIが力を発揮します。公式ドキュメントも、ジェスチャー駆動やスクロール駆動、ライブな値から組み立てる動きにはuseAnimatedStyleを使うよう案内しています。

指針をひとことで言えば、宣言的に書けて完結するならCSS、値に駆動されジェスチャーと連動するならHooks、となります。迷ったら、まず動かしたいものが「決まった動きを再生する」のか「変わり続ける値に追従する」のかを考えてみてください。それが選択の分かれ目になります。

この本での扱い

本書では、まず第2部でコアAPIをじっくり身につけます。共有値とworkletという土台の上に、値駆動のアニメーションを組み立てていく流れは、Reanimatedの中心的な考え方だからです。ジェスチャーやスクロールと連動させる第3部も、このコアAPIが主役になります。

CSSアニメーションAPIは、第5部であらためてまとめて扱います。この章のCSSアニメーションのコード例は本書のデモには載せていません。実際に動くデモは第5部で用意します。

この章のもとになった公式ドキュメント

• CSS Animations Overview
• useAnimatedStyle