React Nativeでカラー変更をアニメーションさせる

カレンダーUIで月毎のカラーを変更する際のアニメーションさせてみた。

デモ

www.youtube.com

実装方法

React Nativeでアニメーションを使う場合は Animated を使用します

facebook.github.io

実装コードは、このファイルで書いています

https://github.com/wheatandcat/Peperomia/blob/d60939133110d0da848d037aba9a8a5d2bae1814/PeperomiaNative/src/components/pages/Calendars/Page.tsx

まず、1〜12月までの色を定義

const backgroundColors = [
  "#e5e4e6",
  "#d4dcda",
  "#e8d3d1",
  "#fdeff2",
  "#badcad",
  theme().color.dodgerBlue,
  "#a0d8ef",
  "#f2f2b0",
  theme().color.beige,
  theme().color.lightNavy,
  "#eaedf7",
  "#ebf6f7"
];

stateの初期値にAnimated.Valueを設定

  state = {
    currentDate: "2019-10-01",
    count: 0,
    backgroundColor: new Animated.Value(9) ← これ
  };

Animatedの interpolate を使用します

facebook.github.io

interpolateに1〜12月（+ ループさせるように -1、12）を設定する

    const backgroundColor = this.state.backgroundColor.interpolate({
      inputRange: [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      outputRange: [
        backgroundColors[11],
        ...backgroundColors,
        backgroundColors[0]
      ]
    });

上記のアニメーションをAnimatedのコンポーネントのstyleに設定します

const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);

...（略）
    const animationStyle = {
      backgroundColor
    };


...（略）
    <AnimatedSafeAreaView style={[styles.root, animationStyle]}>

最後に月を変更するハンドリングの際に Animated.timing を実行する

  onNextMonth = () => {

    ...（略）

    Animated.timing(this.state.backgroundColor, {
      toValue: currentMonth
    }).start();

これで背景色をアニメーションさせる事ができます。 interpolateの概念が分かると色々アニメーションに使えそう