apicloud apicloud

注册
查看: 1718|回复: 8

[案例源码] applause动画模块开源

版主

UID:83211

主题:
169
帖子:
9239
云币:
1994

APICloud粉丝模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

[案例源码] applause动画模块开源

1718 8 | 发表于 2019-1-16 20:03:15 |阅读模式 | |
applause模块封装ios和安卓鼓掌动画效果,可以快速的接入直播鼓掌动画效果.


点击进入模块详情

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <title>Module Develop</title>
  5.                 <meta charset="utf-8">
  6.                 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  7.                 <style type="text/css">
  8.                         html, body {
  9.                                 height: 100%
  10.                         }
  11.                         body {
  12.                                 background-color: #fff;
  13.                                 margin: 0;
  14.                         }
  15.                         #wrap {
  16.                                 height: 100%;
  17.                                 position: relative;
  18.                         }
  19.                         #header {
  20.                                 padding-top: 20px;
  21.                                 background-color: #5082c2;
  22.                                 height: 44px;
  23.                                 position: relative;
  24.                         }
  25.                         #header h1 {
  26.                                 font-size: 20px;
  27.                                 height: 44px;
  28.                                 line-height: 44px;
  29.                                 margin: 0em;
  30.                                 color: #fff;
  31.                                 margin-left: 100px;
  32.                                 margin-right: 100px;
  33.                                 text-align: center;
  34.                         }
  35.                         #main {
  36.                                 display: -webkit-box;
  37.                                 -webkit-box-orient: vertical;
  38.                                 -webkit-box-pack: center;
  39.                         }
  40.                         a.button {
  41.                                 display: -webkit-box;
  42.                                 -webkit-box-orient: vertical;
  43.                                 -webkit-box-pack: center;
  44.                                 -webkit-box-align: center;
  45.                                 height: 32px;
  46.                                 margin: 8px;
  47.                                 background-color: rgba(240,240,240,1.0);
  48.                                 border-color: rgba(220,220,220,1.0);
  49.                                 border-width: 2px;
  50.                                 border-style: solid;
  51.                         }
  52.                         a.active {
  53.                                 background-color: rgba(240,240,240,0.7);
  54.                         }
  55.                 </style>
  56.         </head>
  57.         <body>
  58.                 <div id="wrap">
  59.                         <div id="main">
  60.                                 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  61.                                 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  62.                                 <a class="button" tapmode="active" onclick="showAppLause()">显示点赞动画按钮</a>
  63.                                 <a class="button" tapmode="active" onclick="clickAppLause()">点击点赞动画按钮</a>
  64.                         </div>
  65.                 </div>
  66.         </body>
  67.         <script>
  68.                 var demo;
  69.                 function clickAppLause(){
  70.             demo.clickAppLause(function(ret,err){
  71.                 api.toast({
  72.                         msg : JSON.stringify(ret)
  73.                 });            
  74.             });
  75.         }


  76.                 function showAppLause() {
  77.                         demo.showAppLause({
  78.                                 rect : {
  79.                                         x : 100,
  80.                                         y : api.frameHeight - 80,
  81.                                         w : 60,
  82.                                         h : 60
  83.                                 },
  84.                                 placeholderImg : "widget://res/image/applause.png",
  85. //                                iamges : ["widget://res/heartpic/heart0.png",
  86. //                                        "widget://res/heartpic/heart1.png",
  87. //                                        "widget://res/heartpic/heart2.png",
  88. //                                        "widget://res/heartpic/heart3.png",
  89. //                                        "widget://res/heartpic/heart4.png",
  90. //                                        "widget://res/heartpic/heart5.png",
  91. //                                        "widget://res/heartpic/heart6.png",
  92. //                                        "widget://res/heartpic/heart7.png",
  93. //                                        "widget://res/heartpic/heart8.png",
  94. //                                        "widget://res/heartpic/heart9.png",
  95. //                                        "widget://res/heartpic/heart10.png",
  96. //                                        "widget://res/heartpic/heart11.png"
  97. //                                ],
  98.                                
  99.                                 iamges : ["widget://res/image/applause_1.png",
  100.                                         "widget://res/image/applause_2.png",
  101.                                         "widget://res/image/applause_3.png",
  102.                                         "widget://res/image/applause_4.png",
  103.                                         "widget://res/image/applause_5.png",
  104.                                         "widget://res/image/applause_6.png",
  105.                                         "widget://res/image/applause_7.png"
  106.                                 ],
  107.                                 isShowNum : false,
  108.                                 applauseNum : 0,
  109.                                 fixedOn : api.frameName,
  110.                 fixed : false
  111.                         }, function(ret, err) {
  112.                                 api.toast({
  113.                                         msg : JSON.stringify(ret)
  114.                                 });
  115.                         });
  116.                 }

  117.                 function apiready() {
  118.                         demo = api.require('applause');
  119.                         if (!demo) {
  120.                                 alert("请添加模块后编译");
  121.                                 return;
  122.                         }
  123.                 }
  124.         </script>
  125. </html>
复制代码



模块开源git地址:

https://github.com/52yaoer/applause
模块定制开发 qq: 176142998

新手上路

UID:653264

主题:
19
帖子:
117
云币:
97
发表于 2019-1-17 11:06:00 |

主题:
22
帖子:
85
云币:
99
发表于 2020-3-30 19:11:48 |
clickAppLause返回的status是false啊

版主

UID:83211

主题:
169
帖子:
9239
云币:
1994

APICloud粉丝模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2020-3-30 19:29:57 |
李宇唐131419 发表于 2020-3-30 19:11
clickAppLause返回的status是false啊

err是什么内容?
模块定制开发 qq: 176142998

主题:
22
帖子:
85
云币:
99
发表于 2020-3-30 19:32:22 |
52yaoer 发表于 2020-3-30 19:29
err是什么内容?

请执行鼓掌初始化接口

版主

UID:83211

主题:
169
帖子:
9239
云币:
1994

APICloud粉丝模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2020-3-30 19:37:13 |
那你showAppLause接口都没执行咯。
模块定制开发 qq: 176142998

版主

UID:83211

主题:
169
帖子:
9239
云币:
1994

APICloud粉丝模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2020-3-30 19:37:34 |
可以直接复制本文的demo测试。
模块定制开发 qq: 176142998

主题:
22
帖子:
85
云币:
99
发表于 2020-3-30 20:09:44 |
52yaoer 发表于 2020-3-30 19:37
可以直接复制本文的demo测试。

好吧,我知道了,我以为我给我自己的按钮加点击事件就能出点赞效果了,,谢谢啦

版主

UID:83211

主题:
169
帖子:
9239
云币:
1994

APICloud粉丝模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2020-3-31 11:20:37 来自手机 |
OK
您需要登录后才可以回帖 登录 | 立即注册

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