LayoutAnimation 使うと楽しい

ReactNativeで LayoutAnimation を使うと、要素が消えたり表示したりする時に

勝手にいい感じのアニメーションを付けてくれるから便利

import {
  LayoutAnimation,
} from 'react-native';

ボタンを押すとメニューが出てくる仕様があったとして、それにアニメーションを付けたい場合、 トリガーになる onPress() なんかの一番最初に LayoutAnimation.spring() を書くだけで勝手にアニメーションしてくれます。

spring() はバネみたいなアニメーションで、他にはeaseInEaseOut ()linear () がデフォルトで用意されています。

サクッと確認したい場合は、ここを見るとウェブ上で実行できるサンプルがあるので、それを編集すれば良さそうです。

http://facebook.github.io/react-native/releases/0.45/docs/animations.html#layoutanimation-api

自分で動きをカスタマイズも出来ます。

こんな感じ

componentWillUpdate()LayoutAnimation を実行すれば、とにかく画面が変更される度にアニメーションがかかるようになります。

LayoutAnimation は難しい設定なしで、かってにアニメーションをいい感じにしてくれる良い子です。

ぜひ使ってみて下さい。

ドキュメント http://facebook.github.io/react-native/releases/0.45/docs/layoutanimation.html#layoutanimation