讓ionic應(yīng)用實現(xiàn)類原生app的平滑過渡

該插件可以使ionic開發(fā)的app，頁面之間的切換實現(xiàn)類似原生app的平滑過渡，并且可以選擇滑動的形式，速度非常快。同時支持Android和IOS。

插件安裝：

# 使用Cordova

cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5

# 使用Ionic CLI

ionic plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5

ios9下有時可能出現(xiàn)閃爍等異常，安裝以下插件解決該問題：

# 使用Cordova

cordova plugin add cordova-plugin-wkwebview

# 使用Ionic CLI

ionic plugin add cordova-plugin-wkwebview

andorid下如果使用了Crosswalk，且版本大于1.3，需要在config.xml中添加以下內(nèi)容：

<preference name="CrosswalkAnimatable" value="true" />

配置

首先注入該插件：

angular.module('yourApp', [

    'ionic-native-transitions'

]);

默認(rèn)配置方式：

.config(function($ionicNativeTransitionsProvider){

    $ionicNativeTransitionsProvider.setDefaultOptions({

        type: 'slide', 

        direction: 'left', //left right top up ，四參數(shù)可選

        duration: 400, //延時時間，單位毫秒，默認(rèn)400ms

        slowdownfactor: 4, //重疊銜接效果，1不使用，默認(rèn) 4

        iosdelay: -1, // ios系統(tǒng)的webview延遲,默認(rèn) -1

        androiddelay: -1, // android系統(tǒng)的webview延遲，默認(rèn) -1

        winphonedelay: -1, // 同上，針對windowphone，默認(rèn) -1,

        fixedPixelsTop: 0, // 頂部固定像素數(shù), 默認(rèn) 0 (iOS and Android)

        fixedPixelsBottom: 0, // 底部固定像素數(shù), 默認(rèn) 0 (iOS and Android)

        triggerTransitionEvent: '$ionicView.afterEnter', 

        backInOppositeDirection: false 

    });

});

默認(rèn)配置完成后針對所有路由UI頁面生效。

如果需要單獨定義某個路由的效果：

.state('home', {

    url: '/home',

    nativeTransitions: {

        "type": "flip",

        "direction": "up"

    }

    templateUrl: "templates/home.html"

})

也可以自行配置針對各種操作系統(tǒng)的滑動效果。

.state('home', {

    url: '/home',

    nativeTransitionsAndroid: {

        "type": "flip",

        "direction": "right"

    },

    nativeTransitionsIOS: {

        "type": "flip",

        "direction": "left"

    },

    nativeTransitionsWindowsPhone: {

        "type": "flip",

        "direction": "down"

    },

    nativeTransitionsBackAndroid: {

        "type": "flip",

        "direction": "left"

    },

    nativeTransitionsBackIOS: {

        "type": "flip",

        "direction": "right"

    },

    nativeTransitionsBackWindowsPhone: {

        "type": "flip",

        "direction": "up"

    },

    templateUrl: "templates/home.html"

})

針對一種設(shè)備進(jìn)行設(shè)置(以下將僅改變安卓下的效果，其他設(shè)備繼承setDefaultOptions設(shè)置的效果)：

.state('home', {

    url: '/home',

    nativeTransitions: {

        "type": "flip",

        "direction": "up"

    },

    nativeTransitionsAndroid: {

        "type": "flip",

        "direction": "right"

    }

    templateUrl: "templates/home.html"

})

在某個路由中禁用本插件，比如tab上的一個按鈕：

.state('home', {

    url: '/home',

    nativeTransitions: null,

    templateUrl: "templates/home.html"

})

該插件更詳細(xì)介紹參看github項目地址https://github.com/shprink/ionic-native-transitions

文章引用：http://www.lt-ad.com/new/204.html

本站文章為深圳網(wǎng)站建設(shè)·源美網(wǎng)絡(luò)原創(chuàng)策劃，如有版權(quán)糾紛或者違規(guī)問題，請聯(lián)系我們刪除，謝謝！