uniapp轉場動畫怎麼做

隨著行動裝置應用的普及，豐富多彩的動態效果成為了許多應用開發的必備要素。其中，轉場動畫就是提升使用者使用體驗的重要手段。在uniapp這個跨平台應用程式開發框架中，實作轉場動畫也非常簡單易行。

uniapp中的轉場動畫可以分為兩類：原生轉場和自訂轉場。原生轉場就是系統預設的轉場效果，而自訂轉場則可以依照自己的需求進行客製化。

一、原生轉場動畫

uniapp中原生轉場動畫的實作非常簡單，只需要在pages.json設定檔中加入"animationType "屬性即可。以下是幾種常見的轉場動畫效果：

1. Push

在A頁面中透過uni.navigateTo跳到B頁面時，可以設定轉場動畫為Push：

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

效果如下：

2. #Pop

##在B頁面中經由

uni.navigateBack回到A頁面時，可以設定轉場動畫為Pop：

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

效果如下：

Fade

可以設定轉場動畫為漸隱漸現的Fade效果：

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

效果如下：

None

可以設定轉場動畫為無效果的None：

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

1. 效果如下：

# #二、自訂轉場動畫uniapp中的自訂轉場動畫需要結合uni-app-plus外掛程式和vue-router

路由元件來實現。以下就來詳細介紹一下自訂轉場動畫的實作過程。

安裝uni-app-plus外掛

使用

uni-app-plus外掛程式可以讓我們在uniapp中使用原生的一些API和插件，其中就包含iOS中UIKit

和Android中

android.view。因此，在使用自訂轉場動畫時，我們需要使用這個插件。

在專案目錄下執行以下指令即可安裝：

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

3. 修改vue-router設定

首先，我們需要在router .js設定檔中新增路由守衛，這樣我們才能捕捉到從A頁面跳到B頁面的事件，從而實現自訂轉場動畫。

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;

在這段程式碼中，我們新增了一個路由守衛

beforeEach

#，當跳到的頁面配置了自訂轉場動畫時，就將目前頁面和上一個頁面的動畫效果設定為左滑和右滑，這樣就可以實現自訂轉場動畫了。

1. 實作自訂轉場動畫
2. 在
App.vue
3. 檔案中，我們可以透過監聽頁面切換事件來實現自訂轉場動畫。首先，我們在mounted生命週期中加入以下程式碼：<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>以上程式碼主要實現了以下功能：

偵測目前裝置是否為iOS裝置（因為Android裝置預設支援自訂轉場動畫），如果是則執行下列步驟。如果不是，則直接跳過本流程。 在路由變更之前透過

UniViewJSBridge

傳送訊息給原生，告訴它需要開啟動畫。 監聽

UniViewJSBridge

傳送的訊息，當原生的動畫執行結束後，將router.app.animation賦為空字串，代表動畫效果已經結束。

然後，在

這裡我們使用了動畫函式庫

animate.css

來實現動畫效果，因此需要在頁面中引入：

<link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css">

最後，在

<script><code>標籤中添加以下程式碼：<pre class='brush:javascript;toolbar:false;'>data() { return { animation: '' }; },</pre><code>在進入A頁面前，將transType</script>

設定為###"custom"###即可：###

uni.navigateTo({
  url: '/pages/b-page/b-page',
  animationType: 'pop',
  animationDuration: 500,
  events: {
    finish: () => {
      console.log('finish');
    }
  },
  complete: () => {
    setTimeout(() => {
      this.animation = '';
    }, 500);
  },
  fail: () => {
    console.log('fail');
  },
  transType: 'custom'
});

###這樣，我們就完成了自訂轉場動畫的完整流程。在實際開發中，你也可以根據自己的需求來定義動畫類型和動畫效果。 ######總結######在uniapp中，實現轉場動畫非常簡單，我們可以使用原生的轉場動畫，也可以透過結合###uni-app-plus###外掛程式和###vue-router###路由元件來實作自訂轉場動畫。在開發過程中，我們要根據實際需求選擇不同的轉場動畫效果，以提升使用者的使用體驗。 ###

以上是uniapp轉場動畫怎麼做的詳細內容。更多資訊請關注PHP中文網其他相關文章！