分享到:

让ionic应用实现类原生app的平滑过渡

日期:2017-02-04 16:52:00     阅读:233     文章来源:源美设计     标签:深圳网站建设,深圳网站设计

让ionic应用实现类原生app的平滑过渡

该插件可以使ionic开发的app,页面之间的切换实现类似原生app的平滑过渡,并且可以选择滑动的形式,速度非常快。同时支持Android和IOS。

ionic.gif


插件安装:

# 使用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下有时可能出现闪烁等异常,安装以下插件解决该问题:

# 使用Cordova

cordova plugin add cordova-plugin-wkwebview

# 使用Ionic CLI

ionic plugin add cordova-plugin-wkwebview


andorid下如果使用了Crosswalk,且版本大于1.3,需要在config.xml中添加以下内容:

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


配置

首先注入该插件:

angular.module('yourApp', [

    'ionic-native-transitions'

]);

默认配置方式:

.config(function($ionicNativeTransitionsProvider){

    $ionicNativeTransitionsProvider.setDefaultOptions({

        type: 'slide', 

        direction: 'left', //left right top up ,四参数可选

        duration: 400, //延时时间,单位毫秒,默认400ms

        slowdownfactor: 4, //重叠衔接效果,1不使用,默认 4

        iosdelay: -1, // ios系统的webview延迟,默认 -1

        androiddelay: -1, // android系统的webview延迟,默认 -1

        winphonedelay: -1, // 同上,针对windowphone,默认 -1,

        fixedPixelsTop: 0, // 顶部固定像素数, 默认 0 (iOS and Android)

        fixedPixelsBottom: 0, // 底部固定像素数, 默认 0 (iOS and Android)

        triggerTransitionEvent: '$ionicView.afterEnter', 

        backInOppositeDirection: false 

    });

});

默认配置完成后针对所有路由UI页面生效。


如果需要单独定义某个路由的效果:

.state('home', {

    url: '/home',

    nativeTransitions: {

        "type": "flip",

        "direction": "up"

    }

    templateUrl: "templates/home.html"

})

也可以自行配置针对各种操作系统的滑动效果。

.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"

})

针对一种设备进行设置(以下将仅改变安卓下的效果,其他设备继承setDefaultOptions设置的效果):

.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"

})

该插件更详细介绍参看github项目地址https://github.com/shprink/ionic-native-transitions



文章引用:http://www.szymweb.com/new/204.html

本站文章为深圳网站建设·源美设计原创策划,如有版权纠纷或者违规问题,请联系我们删除,谢谢!

上一篇: JUI(DWZ)框架,实现刷新当前navTab的方法

下一篇: 支付宝回应安全漏洞

返回列表
最新案例
OUR ADVANTAGE WORKS

售后响应及时

全国7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉,无效全额退款