apicloud apicloud

注册
查看: 1927|回复: 7

[模块教程] UILoading 模块(加载动画)效果展示

实习司机

UID:253705

主题:
53
帖子:
175
云币:
453

[模块教程] UILoading 模块(加载动画)效果展示

1927 7 | 发表于 2018-9-8 16:04:39 |阅读模式 | |
本帖最后由 uoaccw 于 2018-9-8 16:28 编辑

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

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

flower加载动画效果:


keyFrame动画效果:


keyFrame动画效果:

  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6.     <title>title</title>
  7.     <style>
  8.         body {
  9.             padding: 50px;
  10.         }

  11.         div {
  12.             margin: 15px;
  13.         }
  14.     </style>
  15. </head>

  16. <body>
  17.     <div tapmode onclick="fnOpenflower()" name="button">fnOpenflower</div>
  18.     <div tapmode onclick="fnOpenkeyFrame()" name="button">fnOpenkeyFrame</div>
  19.     <div tapmode onclick="fncloseKeyFrame()" name="button">fncloseKeyFrame</div>
  20. </body>
  21. <script type="text/javascript" src="../script/api.js"></script>
  22. <script type="text/javascript">
  23.     var UILoading;

  24.     apiready = function() {
  25.         UILoading = api.require('UILoading');
  26.     };

  27.     function fnOpenflower() {
  28.         UILoading.flower({
  29.             center: {
  30.                 x: 160,
  31.                 y: 240
  32.             },
  33.             size: 30,
  34.             mask: 'rgba(20,0,0,0.5)',
  35.             fixedOn: api.frameName,
  36.             fixed: true
  37.         }, function(ret) {

  38.             console.log(ret.id);
  39.             flowerid = ret.id;
  40.             setTimeout('fncloseFlower()', 1000);

  41.         });
  42.     }

  43.     function fnOpenkeyFrame() {
  44.         UILoading.keyFrame({
  45.             rect: {
  46.                 w: 80,
  47.                 h: 100
  48.             },
  49.             styles: {
  50.                 bg: 'rgba(0,0,0,0.5)',
  51.                 corner: 5,
  52.                 interval: 100,
  53.                 frame: {
  54.                     w: 50,
  55.                     h: 50
  56.                 }
  57.             },
  58.           //   content: [{
  59.           //       "frame": "widget://image/dropdown_anim_00.png"
  60.           //   }, {
  61.           //       "frame": "widget://image/dropdown_anim_01.png"
  62.           //   }, {
  63.           //       "frame": "widget://image/dropdown_anim_02.png"
  64.           //   }, {
  65.           //       "frame": "widget://image/dropdown_anim_03.png"
  66.           //   }, {
  67.           //       "frame": "widget://image/dropdown_anim_04.png"
  68.           //   }, {
  69.           //       "frame": "widget://image/dropdown_anim_05.png"
  70.           //   }, {
  71.           //       "frame": "widget://image/dropdown_anim_06.png"
  72.           //   }, {
  73.           //       "frame": "widget://image/dropdown_anim_07.png"
  74.           //   }, {
  75.           //       "frame": "widget://image/dropdown_anim_08.png"
  76.           //   }, {
  77.           //       "frame": "widget://image/dropdown_anim_09.png"
  78.           //   },{
  79.           //       "frame": "widget://image/dropdown_loading_00.png"
  80.           //   },{
  81.           //       "frame": "widget://image/dropdown_loading_01.png"
  82.           //   },{
  83.           //       "frame": "widget://image/dropdown_loading_02.png"
  84.           //   }
  85.           // ],
  86.             //mask: 'rgba(0,0,0,0.5)'       //遮罩层配置,支持#、rgb、rgba,若不传则无遮罩层
  87.         });
  88.     }

  89.     function fncloseFlower() {
  90.         UILoading.closeFlower({
  91.             id: flowerid
  92.         });
  93.     }

  94.     function fncloseKeyFrame() {
  95.         UILoading.closeKeyFrame();
  96.     }
  97. </script>

  98. </html>
复制代码



本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

主题:
6
帖子:
17
云币:
49
发表于 2018-12-23 17:47:31 |
正好需要

驾校小白

UID:541097

主题:
10
帖子:
50
云币:
61
发表于 2019-1-7 14:48:55 |
content直接可以设置动图多好,整的还得传个数组

老司机

UID:673413

主题:
175
帖子:
12678
云币:
5650

圣诞节

发表于 2019-1-8 18:22:01 |
从用户体验考虑,需要遵照原生动画理念,使用关键帧(即多张具有微小差别的图片)来完成完整的动画过程

驾校小白

UID:739325

主题:
0
帖子:
3
云币:
3
发表于 2019-1-11 17:14:55 |
本帖最后由 绅士Go 于 2019-1-11 17:35 编辑

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

马路杀手

UID:289148

主题:
43
帖子:
248
云币:
387
发表于 2019-1-22 15:07:10 |
官方能增加一个文字提示么

主题:
0
帖子:
2
云币:
8
发表于 2019-7-4 13:48:56 |
好东西

主题:
0
帖子:
2
云币:
2
发表于 2019-8-5 09:26:13 |
学习学习
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表