uniappでトランジションアニメーションを作る方法

モバイル デバイス アプリケーションの人気に伴い、カラフルなダイナミック エフェクトは多くのアプリケーション開発にとって不可欠な要素となっています。中でもトランジションアニメーションはユーザーエクスペリエンスを向上させる重要な手段です。クロスプラットフォーム アプリケーション開発フレームワーク uniapp では、遷移アニメーションの実装も非常にシンプルで簡単です。

uniapp のトランジション アニメーションは、ネイティブ トランジションとカスタム トランジションの 2 つのカテゴリに分類できます。ネイティブ トランジションはシステムのデフォルトのトランジション効果ですが、カスタム トランジションは必要に応じてカスタマイズできます。

1. ネイティブ トランジション アニメーション

uniapp でのネイティブ トランジション アニメーションの実装は非常に簡単です。pages.json に "animationType を追加するだけです。設定ファイル " 属性で十分です。以下に、一般的なトランジション アニメーション効果をいくつか示します。

1. Push

ページ A の uni.navigateTo を介してページ B にジャンプするとき、次のように設定できます。プッシュへの遷移アニメーション:

uni.navigateTo({
  url: '/pages/b-page/b-page',
  animationType: 'push',
  animationDuration: 500
});

効果は次のとおりです:

2. Pop

(ページ B) uni.navigateBack を通じてページ A に戻るとき、遷移アニメーションをポップに設定できます:

uni.navigateBack({
  animationType: 'pop',
  animationDuration: 500
});

効果は次のとおりです:

3. フェード

トランジション アニメーションをフェード インおよびフェード アウトのフェード効果に設定できます:

uni.navigateTo({
  url: '/pages/b-page/b-page',
  animationType: 'fade',
  animationDuration: 500
});

効果は次のとおりです:

4. None

#トランジション アニメーションを効果なしで None に設定できます:

uni.navigateTo({
  url: '/pages/b-page/b-page',
  animationType: 'none',
  animationDuration: 500
});

効果は次のとおりです:

2. カスタム遷移アニメーション

uniapp のカスタム遷移アニメーションは、

uni-app-plus プラグと組み合わせて実装する必要があります。 -in および vue-router ルーティング コンポーネント。カスタムトランジションアニメーションの実装プロセスを詳しく紹介します。

uni-app-plus プラグインをインストールします

uni-app-plus プラグインを使用すると、いくつかのネイティブ機能を使用できるようになります。 API および uniapp プラグインの API (iOS の UIKit および Android の android.view を含む)。したがって、カスタムトランジションアニメーションを使用する場合は、このプラグインを使用する必要があります。

プロジェクト ディレクトリで次のコマンドを実行してインストールします:

npm install uni-app-plus --save-dev

vue-router 構成を変更します

まず、 # にインストールする必要があります。 ##router .js

ルーティング ガードを構成ファイルに追加して、ページ A からページ B にジャンプするイベントをキャプチャしてカスタム遷移アニメーションを実現できるようにします。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }); router.beforeEach((to, from, next) =&gt; { if (to.meta.animation === 'custom') { const pages = getCurrentPages(); const currentPage = pages[pages.length - 1]; const prevPage = pages[pages.length - 2]; currentPage.animation = 'slide-left'; prevPage.animation = 'slide-right'; } next(); }); export default router;</pre><div class="contentsignin">ログイン後にコピー</div></div>このコードでは、ルーティング ガード

beforeEach

を追加しました。ジャンプ先のページにカスタム遷移アニメーションが設定されている場合、現在のページと前のページはアニメーションになります。エフェクトは左右にスライドするように設定されているため、カスタムのトランジション アニメーションを実装できます。

カスタム遷移アニメーションの実装

App.vue

ファイルでは、ページ切り替えイベントのアニメーションをリッスンすることでカスタム遷移を実装できます。まず、mounted ライフ サイクルに次のコードを追加します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>mounted() { if (uni.getSystemInfoSync().platform === 'ios') { const router = this.$router; router.beforeEach(function(to, from, next) { if (from.meta.animation === 'custom') { UniViewJSBridge.publishHandler('animation', { type: 'set', pageParam: { animationEnabled: true } }, function() { router.app.animation = uni.createFromIconfontCN({ scriptUrl: &quot;//at.alicdn.com/t/font_2581006_ourmsf7tpoi.js&quot; }).css({ animationDuration: '0.4s', animationTimingFunction: 'ease-in' }).toStyle(); next(); }) } else { router.app.animation = ''; next(); } }); UniViewJSBridge.subscribeHandler('animation', function(dat) { if (dat.type === 'finish') { router.app.animation = ''; } }); } },</pre><div class="contentsignin">ログイン後にコピー</div></div> 上記のコードは主に次の機能を実装します。

現在のデバイスがiOS デバイス (Android デバイスはデフォルトでカスタム遷移アニメーションをサポートしているため)、その場合は、次の手順を実行します。そうでない場合は、このプロセスを直接スキップしてください。

1. ルーティングが変更される前に、
UniViewJSBridge
2. を通じてネイティブにメッセージを送信し、アニメーションをオンにする必要があることを伝えます。
UniViewJSBridge
3. によって送信されたメッセージを聞きます。ネイティブ アニメーションの実行が終了したら、router.app.animation を空の文字列に割り当て、アニメーション効果が完了したことを示します。終了しました。
次に、次のコードを