uniappでトランジションアニメーションを作る方法-uni-app-php.cn

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

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

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

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

Push

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

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

ログイン後にコピー

効果は次のとおりです:

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

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

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

ログイン後にコピー

効果は次のとおりです:

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

フェード

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

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

ログイン後にコピー

効果は次のとおりです:

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

None

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

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

ログイン後にコピー

効果は次のとおりです:

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

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

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

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

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

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

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

ログイン後にコピー

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

ルーティングガードを構成ファイルに追加して、ページ A からページ B にジャンプするイベントをキャプチャしてカスタム遷移アニメーションを実現できるようにします。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }); router.beforeEach((to, from, next) => { 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:javascript;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: "//at.alicdn.com/t/font_2581006_ourmsf7tpoi.js" }).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 デバイスはデフォルトでカスタム遷移アニメーションをサポートしているため)、その場合は、次の手順を実行します。そうでない場合は、このプロセスを直接スキップしてください。

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