cordova原生页面切换效果插件的使用:com.telerik.plugins.nativepagetransitions

1. 添加插件:cordova plugin add com.telerik.plugins.nativepagetransitions
2. 使用方法:

在index.html中添加:

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
app.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        // then override any default you want
        window.plugins.nativepagetransitions.globalOptions.duration = 500;
        window.plugins.nativepagetransitions.globalOptions.iosdelay = 350;
        window.plugins.nativepagetransitions.globalOptions.androiddelay = 350;
        window.plugins.nativepagetransitions.globalOptions.winphonedelay = 350;
        window.plugins.nativepagetransitions.globalOptions.slowdownfactor = 4;
        // these are used for slide left/right only currently
        window.plugins.nativepagetransitions.globalOptions.fixedPixelsTop = 0;
        window.plugins.nativepagetransitions.globalOptions.fixedPixelsBottom = 0;
    });
});
$state.go('view', {movieid: id});   
window.plugins.nativepagetransitions.slide(
  {"direction":"up"},
  function (msg) {console.log("success: " + msg)}, // called when the animation has finished
  function (msg) {alert("error: " + msg)} // called in case you pass in weird values
);

3. 取消默认的动画:

$ionicConfigProvider.views.transition('no');

4. 如果不希望哪个页面有动画也可以禁用某个页面的动画效果:

.state('tab.message', {
        url: '/message',
        nativeTransitions: null,
        cache:false,
        views: {
            'tab-message': {
                templateUrl: 'templates/tab-message.html',
                resolve: load([
                    'js/services/commonusefunction/messagesFactory.js',                    
                    'js/controllers/messageController.js',
                    'js/services/public/ionicModalService.js'
                ])
            }
        }
 })

5. 设置点击进入某个页面时候的动画:

.config(function($ionicNativeTransitionsProvider){
    $ionicNativeTransitionsProvider.setDefaultBackTransition({
        type: 'slide',
        direction: 'right'
    });
});

6.  您还可以根据这样的设备定义不同的转换(向后和向前):

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

 

posted @ 2017-10-16 10:25  三石!  阅读(2847)  评论(0编辑  收藏  举报