【函数】 | 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() |
【说明】 | 立即停止过场动画。 |
【返回】 | 无 |
【参数】 | 无 |
【示例】 | 无 |