OnsenUI v2/React/Monacaで画面遷移アニメーションの設定方法
ハイブリッドアプリ開発のMonaca、３－４年前に使ったことあったのですが最近みてみるとだいぶ良い方に変わっていました。
monaca CLIを使えばローカルで開発したソースをコマンドをたたいてブラウザ確認、やシミュレータ確認ができるようになっててとても便利です。（cordovaでもできるけど） そのままローカルのデータをCloudにアップし、MonacaIDE上で確認、ビルドすることもできるようです。
日々進化してますね。
中でもOnsenUIは気になって、少し試してみました。 日本語で解説もされており、一通りはスムーズに進むのですが一般の人の記事や情報は少なめですね。アシアルさんの情報は結構あるので、その範囲で解決できるような仕様にすれば問題ないですが。
詰まったところはReactでOnsenUIを使うとき、画面遷移pushPage()でスライド遷移するのは問題なかったけど、下から上へスライドとか、フェード効果で切り替えとかがなかなかできずにかなりの時間を使ってしまいました。
現時点でどこにも載っていないか探しきれなかったのでメモしておきます。
ソースはOnsen UI v2 + React Navigationを使いました。
画面遷移 pushPage()
画面遷移のメソッドにpushPage()というのがあります。
pushPage() { this.props.navigator.pushPage({component: SecondPage}); }
アニメーションの種類の記載はあるけど、どう書いたらいいのかわかりません。
| 種類 | 動作 |
|---|---|
slide |
指定しない場合のデフォルト、右からスライドして画面が現れる |
lift |
下からスライドして画面が現れる |
fade |
ぼわーっと画面が切り替わる |
none |
指定なし。パッと画面が切り替わる |
アニメーションを変更した記述方法
いろんな書き方で試したけど、結局これが正解のようです。
this.props.navigator.pushPage({component: SecondPage}, {animation: "lift"});
iOSアプリをswiftで開発したような動きになっており、描画速度やアニメーションの動きという点ではハイブリッドアプリとはわかりません。
端末もスペックアップしているし以前に比べずいぶんとハイブリッドアプリは使えるようになってきていると感じましたよ。
