首頁 > web前端 > uni-app > uniapp轉場動畫怎麼做

uniapp轉場動畫怎麼做

WBOY
發布: 2023-05-22 10:24:36
原創
1901 人瀏覽過

隨著行動裝置應用的普及,豐富多彩的動態效果成為了許多應用開發的必備要素。其中,轉場動畫就是提升使用者使用體驗的重要手段。在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
});
登入後複製

效果如下:

uniapp轉場動畫怎麼做

  1. #Pop
##在B頁面中經由

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

uni.navigateBack({
  animationType: 'pop',
  animationDuration: 500
});
登入後複製

效果如下:

uniapp轉場動畫怎麼做

uniapp轉場動畫怎麼做

Fade

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

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
    });
    登入後複製
  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
    登入後複製
  1. 修改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生命週期中加入以下程式碼:<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>以上程式碼主要實現了以下功能:

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

UniViewJSBridge

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

UniViewJSBridge

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

然後,在