浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】Animatedを使って画像をフェードインさせる

React Native アプリで、画像を徐々に表示させる方法についてです。
全く方法が分からず、ライブラリを追加する必要があるのかと思いきや、React Native に標準で用意されている Animated を使えば一発解決でした!

今回参考にさせていただいたサイトはこちらから。

【React Native】Animatedを使ったアニメーションの実装方法 | プログラマーを目指す 「中卒」 男のブログ
https://chusotsu-program.com/react-native-animated/

 

実装方法ですが、まず Animated をインポートして、フェードインさせたい要素を置き換えます。

import { Animated, View } from 'react-native';
<View>
  <Animated.Text
    style={{...styles.title, opacity: this.state.opacity }}>テキスト</Animated.Text>
  <Animated.Image
    source={require('[画像パス]')}
    style={{...styles.logo, opacity: this.state.opacity }}
    resizeMode='contain' />
</View>

なお、styleprops は、React Native 標準の <Text><Image> と同じ指定方法で大丈夫です。

次に、stateopacity を追加し、初期値に new Animated.Value(0) を指定します。

this.state = {
  opacity: new Animated.Value(0),
}

あとは、画像の不透明度を徐々に 0 から 1 に変更していく処理を追加すれば完了です!
コードは下記のとおりです。

Animated.timing(this.state.opacity, {
  toValue: 1,
  duration: 1000,
  useNativeDriver: true,
}).start();

私は componentDidMount() 内に上記を記述し、ページを開いたら画像とテキストが徐々に表示するようにしました。
追加するコードは以上です!
duration の値を変更すれば、フェードインの時間を変更できるので、素早く表示させたり、逆にゆっくりと表示させたりできます。
こちらは実際に動かしながら調整するのがいいと思います。

予想していたよりもはるかに簡単に実装出来ました!

 

以上、React Native アプリで画像やテキストをフェードイン表示させる方法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)