UILoading 模块（加载动画）效果展示

uoaccw

本帖最后由 uoaccw 于 2018-9-8 16:28 编辑

UILoading 模块封装了两种款式的加载提示框，每一种款式都提供一个接口来调用。开发者可参考各个接口的样式来自定义加载提示框上的图片信息。
模块文档地址：https://docs.apicloud.com/Client-API/UI-Layout/UILoading

当进行耗时较长的操作时，可使用加载动画。待操作完成后，关闭动画。keyFrame动画效果，可传入不同的图片实现不同的动画。动画快慢可通过interval参数进行设置。

flower加载动画效果：

keyFrame动画效果：

keyFrame动画效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>title</title>
<style>
body {
padding: 50px;
}
div {
margin: 15px;
}
</style>
</head>
<body>
<div tapmode onclick="fnOpenflower()" name="button">fnOpenflower</div>
<div tapmode onclick="fnOpenkeyFrame()" name="button">fnOpenkeyFrame</div>
<div tapmode onclick="fncloseKeyFrame()" name="button">fncloseKeyFrame</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var UILoading;
apiready = function() {
UILoading = api.require('UILoading');
};
function fnOpenflower() {
UILoading.flower({
center: {
x: 160,
y: 240
},
size: 30,
mask: 'rgba(20,0,0,0.5)',
fixedOn: api.frameName,
fixed: true
}, function(ret) {
console.log(ret.id);
flowerid = ret.id;
setTimeout('fncloseFlower()', 1000);
});
}
function fnOpenkeyFrame() {
UILoading.keyFrame({
rect: {
w: 80,
h: 100
},
styles: {
bg: 'rgba(0,0,0,0.5)',
corner: 5,
interval: 100,
frame: {
w: 50,
h: 50
}
},
// content: [{
// "frame": "widget://image/dropdown_anim_00.png"
// }, {
// "frame": "widget://image/dropdown_anim_01.png"
// }, {
// "frame": "widget://image/dropdown_anim_02.png"
// }, {
// "frame": "widget://image/dropdown_anim_03.png"
// }, {
// "frame": "widget://image/dropdown_anim_04.png"
// }, {
// "frame": "widget://image/dropdown_anim_05.png"
// }, {
// "frame": "widget://image/dropdown_anim_06.png"
// }, {
// "frame": "widget://image/dropdown_anim_07.png"
// }, {
// "frame": "widget://image/dropdown_anim_08.png"
// }, {
// "frame": "widget://image/dropdown_anim_09.png"
// },{
// "frame": "widget://image/dropdown_loading_00.png"
// },{
// "frame": "widget://image/dropdown_loading_01.png"
// },{
// "frame": "widget://image/dropdown_loading_02.png"
// }
// ],
//mask: 'rgba(0,0,0,0.5)' //遮罩层配置，支持#、rgb、rgba，若不传则无遮罩层
});
}
function fncloseFlower() {
UILoading.closeFlower({
id: flowerid
});
}
function fncloseKeyFrame() {
UILoading.closeKeyFrame();
}
</script>
</html>

复制代码

daocaoren1024 · 回复于2018-12-23 17:47:31

正好需要

jadeLyc

content直接可以设置动图多好，整的还得传个数组

得呤

从用户体验考虑，需要遵照原生动画理念，使用关键帧（即多张具有微小差别的图片）来完成完整的动画过程

绅士Go

本帖最后由绅士Go 于 2019-1-11 17:35 编辑

已删除。。。。。。。。。。

ipdun

官方能增加一个文字提示么

大蒙100

好东西

HarryRobin

学习学习

Alexander Zhao

两种方式不错。

ganggegeg

安卓不显示，为啥