隨著行動裝置應用的普及,豐富多彩的動態效果成為了許多應用開發的必備要素。其中,轉場動畫就是提升使用者使用體驗的重要手段。在uniapp這個跨平台應用程式開發框架中,實作轉場動畫也非常簡單易行。
uniapp中的轉場動畫可以分為兩類:原生轉場和自訂轉場。原生轉場就是系統預設的轉場效果,而自訂轉場則可以依照自己的需求進行客製化。
一、原生轉場動畫
uniapp中原生轉場動畫的實作非常簡單,只需要在pages.json
設定檔中加入"animationType "
屬性即可。以下是幾種常見的轉場動畫效果:
在A頁面中透過uni.navigateTo
跳到B頁面時,可以設定轉場動畫為Push:
uni.navigateTo({ url: '/pages/b-page/b-page', animationType: 'push', animationDuration: 500 });
效果如下:
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
uni.navigateTo({ url: '/pages/b-page/b-page', animationType: 'none', animationDuration: 500 });
# #二、自訂轉場動畫
uniapp中的自訂轉場動畫需要結合
uni-app-plus外掛程式和
vue-router
uni-app-plus外掛程式可以讓我們在uniapp中使用原生的一些API和插件,其中就包含iOS中
UIKit
android.view。因此,在使用自訂轉場動畫時,我們需要使用這個插件。
npm install uni-app-plus --save-dev
首先,我們需要在
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
#,當跳到的頁面配置了自訂轉場動畫時,就將目前頁面和上一個頁面的動畫效果設定為左滑和右滑,這樣就可以實現自訂轉場動畫了。
在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
賦為空字串,代表動畫效果已經結束。
然後,在
標籤中加入以下程式碼:
<view :class="{ 'animated': animation }">
<router-view class="page"></router-view>
</view>
animate.css
來實現動畫效果,因此需要在頁面中引入:<link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css">