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

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

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 構成を変更します

ルーティング ガードを構成ファイルに追加して、ページ 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) =&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>このコードでは、ルーティング ガード

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

ファイルでは、ページ切り替えイベントのアニメーションをリッスンすることでカスタム遷移を実装できます。まず、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: &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> 上記のコードは主に次の機能を実装します。

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