rexseeTransition
返回手册目录
【函数】void load(String url, String style)
【说明】用style指定的动画样式载入一个网页,仅一次有效。
【返回】
【参数】url:URL地址。
style:动画样式,参见手册的样式表章节。
【示例】 以下示例都是复合效果,基本效果请参考setStyle()。这些效果都可以在弹出窗口使用。 弹出窗口

复合重叠效果:
rexseeTransition.load('index.php','animation-type:scale+alpha+rotate;animation-start-time:0;animation-duration:1000;animation-translate-x-from:0;animation-translate-x-to:-100;animation-translate-y-from:0;animation-translate-y-to:0;animation-scale-x-from:1;animation-scale-x-to:0;animation-scale-y-from:1;animation-scale-y-to:0;animation-alpha-from:100;animation-alpha-to:0;animation-rotate-from:-360;animation-rotate-to:0;animation-center-x:50;animation-center-y:50;');
运行示例
复合连续效果:
rexseeTransition.load('index.php','animation-type:rotate+rotate_3dx+rotate_3dy;animation-rotate-start-time:0;animation-rotate-duration:1000;animation-rotate-from:0;animation-rotate-to:360;animation-rotate-center-x:50;animation-rotate-center-y:50;animation-rotate-3dx-start-time:1000;animation-rotate-3dx-duration:1000;animation-rotate-3dx-from:0;animation-rotate-3dx-to:-180;animation-rotate-3dx-depth-z:0;animation-rotate-3dx-reverse:false;animation-rotate-3dx-center-x:50;animation-rotate-3dx-center-y:50;animation-rotate-3dy-start-time:2000;animation-rotate-3dy-duration:1000;animation-rotate-3dy-from:0;animation-rotate-3dy-to:-180;animation-rotate-3dy-depth-z:0;animation-rotate-3dy-reverse:false;animation-rotate-3dy-center-x:50;animation-rotate-3dy-center-y:50;');
运行示例
连续平移效果:
rexseeTransition.clearStyle();
rexseeTransition.clearPostStyle();
rexseeTransition.setStyle('animation-repeat:repeat;background-color:#000000;animation-type:translate;animation-translate-x-from:0;animation-translate-x-to:-100;animation-translate-y-from:0;animation-translate-y-to:0;animation-translate-repeat-count:0;animation-translate-duration:1000;');
rexseeTransition.setPostStyle('animation-post-start:start;animation-repeat:repeat;background-color:#000000;animation-type:translate;animation-translate-x-from:100;animation-translate-x-to:0;animation-translate-y-from:0;animation-translate-y-to:0;animation-translate-repeat-count:0;animation-translate-duration:1000;');
rexseeTransition.load('index.php','');
运行示例
Y轴3D翻页:
rexseeTransition.clearPostStyle();
rexseeTransition.setStyle('animation-type:rotate_3dy;background-color:#000000;animation-start-sound:none;animation-end-sound:file:///system/media/audio/ui/camera_click.ogg;animation-rotate-3dy-start-time:0;animation-rotate-3dy-repeat-count:0;animation-rotate-3dy-repeat-mode:reverse;animation-rotate-3dy-duration:1000;animation-rotate-3dy-from:0;animation-rotate-3dy-to:90;animation-rotate-3dy-depth-z:0;animation-rotate-3dy-reverse:false;animation-rotate-3dy-center-x:50;animation-rotate-3dy-center-y:50;');
rexseeTransition.setPostStyle('animation-type:rotate_3dy;background-color:#000000;animation-start-sound:none;animation-end-sound:none;animation-rotate-3dy-start-time:0;animation-rotate-3dy-repeat-count:0;animation-rotate-3dy-repeat-mode:reverse;animation-rotate-3dy-duration:1000;animation-rotate-3dy-from:-90;animation-rotate-3dy-to:0;animation-rotate-3dy-depth-z:0;animation-rotate-3dy-reverse:false;animation-rotate-3dy-center-x:50;animation-rotate-3dy-center-y:50;');
rexseeTransition.load('index.php','');
运行示例
X轴3D翻页:
rexseeTransition.clearPostStyle();
rexseeTransition.setStyle('animation-type:scale+rotate_3dx;background-color:transparent;animation-start-sound:none;animation-end-sound:file:///system/media/audio/ui/KeypressReturn.ogg;animation-scale:1 1 0.5 0.5;animation-scale-duration:1000;animation-scale-start-time:0;animation-rotate-3dx-start-time:1000;animation-rotate-3dx-duration:1000;animation-rotate-3dx-from:0;animation-rotate-3dx-to:90;animation-rotate-3dx-depth-z:0;animation-rotate-3dx-reverse:false;animation-rotate-3dx-center-x:50;animation-rotate-3dx-center-y:50;');
rexseeTransition.setPostStyle('animation-type:scale+rotate_3dx;background-color:transparent;animation-start-sound:none;animation-end-sound:none;animation-scale:0.5 0.5 1 1;animation-scale-duration:1000;animation-scale-start-time:0;animation-rotate-3dx-start-time:1000;animation-rotate-3dx-start-time:0;animation-rotate-3dx-duration:1000;animation-rotate-3dx-from:-90;animation-rotate-3dx-to:0;animation-rotate-3dx-depth-z:0;animation-rotate-3dx-reverse:false;animation-rotate-3dx-center-x:50;animation-rotate-3dx-center-y:50;');
rexseeTransition.load('index.php','');
运行示例

【函数】void setStyle(String style)
【说明】设置过场动画的样式。
【返回】
【参数】style:过场动画的样式,参见手册中的样式表章节。
【示例】 以下是7种基本动画样式,其它样式都可以组合起来形成复合效果(设置animation-type时使用"+"号连接类型名称,使用animation-xxxx-start-time设定重叠或连续):

透明(渐隐渐现)效果:
rexseeTransition.clearStyle();rexseeTransition.clearPostStyle();rexseeTransition.setStyle('animation-type:alpha;animation-repeat:repeat;animation-start-time:0;animation-duration:1000;animation-alpha-from:100;animation-alpha-to:0;');rexseeTransition.enable();rexseeDialog.toast('已启动过场动画。');
运行示例
平移效果:
rexseeTransition.clearStyle();rexseeTransition.clearPostStyle();rexseeTransition.setStyle('animation-type:translate;animation-repeat:repeat;animation-start-time:0;animation-duration:1000;animation-translate-x-from:0;animation-translate-x-to:-100;animation-translate-y-from:0;animation-translate-y-to:100;animation-center-x:0;animation-center-y:0;');rexseeTransition.enable();rexseeDialog.toast('已启动过场动画。');
运行示例
缩放效果:
rexseeTransition.clearStyle();rexseeTransition.clearPostStyle();rexseeTransition.setStyle('animation-type:scale;animation-repeat:repeat;animation-start-time:0;animation-duration:1000;animation-scale-x-from:1;animation-scale-x-to:0.2;animation-scale-y-from:1;animation-scale-y-to:0;animation-center-x:50;animation-center-y:50;');rexseeTransition.enable();rexseeDialog.toast('已启动过场动画。');
运行示例
平面旋转效果:
rexseeTransition.clearStyle();rexseeTransition.clearPostStyle();rexseeTransition.setStyle('animation-type:rotate;animation-repeat:repeat;animation-duration:1000;animation-rotate-from:0;animation-rotate-to:180;animation-center-x:0;animation-center-y:0;');rexseeTransition.enable();rexseeDialog.toast('已启动过场动画。');
运行示例
Y轴3D旋转效果:
rexseeTransition.clearStyle();rexseeTransition.clearPostStyle();rexseeTransition.setStyle('animation-type:rotate_3dy;animation-repeat:repeat;animation-rotate-3dy-start-time:0;animation-rotate-3dy-repeat-count:0;animation-rotate-3dy-repeat-mode:reverse;animation-rotate-3dy-duration:1000;animation-rotate-3dy-from:0;animation-rotate-3dy-to:-180;animation-rotate-3dy-depth-z:0;animation-rotate-3dy-reverse:false;animation-rotate-3dy-center-x:50;animation-rotate-3dy-center-y:50;');rexseeTransition.enable();rexseeDialog.toast('已启动过场动画。');
运行示例
X轴3D旋转效果:
rexseeTransition.clearStyle();rexseeTransition.clearPostStyle();rexseeTransition.setStyle('animation-type:rotate_3dx;animation-repeat:repeat;animation-rotate-3dx-start-time:0;animation-rotate-3dx-duration:1000;animation-rotate-3dx-from:0;animation-rotate-3dx-to:-180;animation-rotate-3dx-depth-z:0;animation-rotate-3dx-reverse:false;animation-rotate-3dx-center-x:50;animation-rotate-3dx-center-y:50;');rexseeTransition.enable();rexseeDialog.toast('已启动过场动画。');
运行示例
倾斜效果:
rexseeTransition.clearStyle();rexseeTransition.clearPostStyle();rexseeTransition.setStyle('animation-type:skew;animation-repeat:repeat;animation-skew-repeat-count:0;animation-skew-repeat-mode:reverse;animation-skew-start-time:0;animation-skew-duration:1000;animation-skew-x-from:0;animation-skew-x-to:-3;animation-skew-y-from:0;animation-skew-y-to:0;animation-skew-depth-z:0;animation-skew-reverse:true;animation-skew-center-x:0;animation-skew-center-y:100;');rexseeTransition.enable();rexseeDialog.toast('已启动过场动画。');
运行示例

【函数】String getStyle(String name)
【说明】读取过场动画样式。
【返回】样式的值。
【参数】name:样式名称。
【示例】
alert(rexseeTransition.getStyle('animation-type'));
运行示例

【函数】void clearStyle()
【说明】清除样式。
【返回】
【参数】
【示例】
rexseeTransition.clearStyle();
rexseeDialog.toast('已清除样式。');
运行示例

【函数】void setPostStyle(String style)
【说明】设置后场动画的样式,“后场”是指当前页动画播放完毕后新页面是否紧接着播放新的动画,通常用于连续播放预先设计的动画以达到特殊效果(例如翻页)。
【返回】
【参数】style:后场动画的样式,参见手册中的样式表章节。
【示例】请参考load()。

【函数】String getPostStyle()
【说明】读取后场动画样式。
【返回】样式的值。
【参数】
【示例】
alert(rexseeTransition.getPostStyle());
运行示例

【函数】void clearPostStyle()
【说明】清除后场样式。
【返回】
【参数】
【示例】
rexseeTransition.clearPostStyle();
rexseeDialog.toast('已清除后场样式。');
运行示例

【函数】void enable()
【说明】启动过场动画。
【返回】
【参数】
【示例】
rexseeTransition.setStyle('animation-repeat:repeat;');
rexseeTransition.enable();
rexseeDialog.toast('已启动过场动画。');
运行示例

【函数】void disable()
【说明】禁止过场动画。
【返回】
【参数】
【示例】
rexseeTransition.disable();
rexseeDialog.toast('已禁止过场动画。');
运行示例

【函数】boolean isEnabled()
【说明】过场动画是否已经启动。
【返回】true或false。
【参数】
【示例】
alert(rexseeTransition.isEnabled());
运行示例

【函数】boolean hasAnimation()
【说明】是否已经设置了合法的动画样式。
【返回】true或false。
【参数】
【示例】
alert(rexseeTransition.hasAnimation());
运行示例

【函数】void hide()
【说明】立即停止过场动画。
【返回】
【参数】
【示例】
返回手册目录