经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
微信小程序wxss制作扭蛋机
来源:cnblogs  作者:写代码的农民  时间:2019/9/25 9:10:43  对本文有异议

小程序制作扭蛋机

2019-09-24 13:26:53

公司要制作活动小程序,其中有一个扭蛋机的效果实现抽奖的功能。在网上找了好久竟没有找到(不知道是不是我找代码的方式有问题)。最后还是自己做一个吧- _ - ,效果如下:

 

 1.wxml 

当然我这里没有用wx:for遍历

  1. <!-- 扭蛋机 -->
  2. <view class="egg">
  3. <image class="egg_ji" src="{{imgUrl}}small_program/game/game_luck_draw_nd.png" mode="widthFix"></image>
  4. <image class="play {{start?'go':''}}" bindtap="eggPlay" src="{{imgUrl}}small_program/game/game_luck_draw_eggplay.png" mode="widthFix"></image>
  5. <image class="ball ball_1 {{start?'weiyi_1':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg1.png" mode="widthFix"></image>
  6. <image class="ball ball_2 {{start?'weiyi_2':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg2.png" mode="widthFix"></image>
  7. <image class="ball ball_3 {{start?'weiyi_3':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg3.png" mode="widthFix"></image>
  8. <image class="ball ball_4 {{start?'weiyi_4':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg4.png" mode="widthFix"></image>
  9. <image class="ball ball_5 {{start?'weiyi_5':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg5.png" mode="widthFix"></image>
  10. <image class="ball ball_6 {{start?'weiyi_6':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg6.png" mode="widthFix"></image>
  11. <image class="ball ball_7 {{start?'weiyi_7':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg7.png" mode="widthFix"></image>
  12. <image hidden="{{qiu}}" animation="{{ani}}" class="ball ball_end" src="{{imgUrl}}small_program/game/game_luck_draw_egg7.png" mode="widthFix" ></image>
  13. </view>

2.wxss

这一步比较麻烦,需要调试扭蛋的位置和动画路径

  1. 1 /* 扭蛋机 */
  2. 2 .egg{
  3. 3 width: 100%;
  4. 4 position: absolute;
  5. 5 z-index: 3;
  6. 6 top: 260rpx;
  7. 7 }
  8. 8 .egg .egg_ji{
  9. 9 width: 70%;
  10. 10 margin-left: 15%;
  11. 11 z-index: 3;
  12. 12 }
  13. 13 .egg .play{
  14. 14 width: 80rpx;
  15. 15 position: absolute;
  16. 16 z-index: 4;
  17. 17 top: 405rpx;
  18. 18 left: 275rpx;
  19. 19 }
  20. 20 .egg .ball{
  21. 21 width: 75rpx;
  22. 22 position: absolute;
  23. 23 z-index: 2;
  24. 24 }
  25. 25 .egg .ball_1{
  26. 26 top: 290rpx;
  27. 27 left: 300rpx;
  28. 28 }
  29. 29 .egg .ball_2{
  30. 30 top: 295rpx;
  31. 31 left: 360rpx;
  32. 32 }
  33. 33 .egg .ball_3{
  34. 34 top: 260rpx;
  35. 35 left: 240rpx;
  36. 36 }
  37. 37 .egg .ball_4{
  38. 38 top: 260rpx;
  39. 39 left: 420rpx;
  40. 40 }
  41. 41 .egg .ball_5{
  42. 42 top: 230rpx;
  43. 43 left: 280rpx;
  44. 44 }
  45. 45 .egg .ball_6{
  46. 46 top: 230rpx;
  47. 47 left: 340rpx;
  48. 48 }
  49. 49 .egg .ball_7{
  50. 50 top: 220rpx;
  51. 51 left: 390rpx;
  52. 52 }
  53. 53 .egg .ball_end{
  54. 54 top: 410rpx;
  55. 55 left: 390rpx;
  56. 56 }
  57. 57
  58. 58 .weiyi_1 {
  59. 59 animation: around1 1.5s linear infinite;
  60. 60 }
  61. 61 .weiyi_2 {
  62. 62 animation: around2 1.5s linear infinite;
  63. 63 }
  64. 64 .weiyi_3 {
  65. 65 animation: around3 1.5s linear infinite;
  66. 66 }
  67. 67 .weiyi_4 {
  68. 68 animation: around4 1.5s linear infinite;
  69. 69 }
  70. 70 .weiyi_5 {
  71. 71 animation: around5 1.5s linear infinite;
  72. 72 }
  73. 73 .weiyi_6 {
  74. 74 animation: around6 1.5s linear infinite;
  75. 75 }
  76. 76 .weiyi_7 {
  77. 77 animation: around7 1.5s linear infinite;
  78. 78 }
  79. 79 .go{
  80. 80 animation: around 0.3s linear 1;
  81. 81 }
  82. 82
  83. 83
  84. 84 /* 位移 */
  85. 85 @keyframes around{
  86. 86 100% {
  87. 87 -webkit-transform: rotate(-180deg)
  88. 88 }
  89. 89 }
  90. 90
  91. 91 @keyframes around1 {
  92. 92 0% {
  93. 93 -webkit-transform: translate(0rpx, 0rpx)
  94. 94 }
  95. 95 20% {
  96. 96 -webkit-transform: translate(-100rpx, -200rpx)
  97. 97 }
  98. 98 40% {
  99. 99 -webkit-transform: translate(40rpx, -280rpx)
  100. 100 }
  101. 101 60% {
  102. 102 -webkit-transform: translate(150rpx, -200rpx)
  103. 103 }
  104. 104 80% {
  105. 105 -webkit-transform: translate(150rpx, -50rpx)
  106. 106 }
  107. 107 100% {
  108. 108 -webkit-transform: translate(0, 0)
  109. 109 }
  110. 110 }
  111. 111
  112. 112 @keyframes around2 {
  113. 113 0% {
  114. 114 -webkit-transform: translate(0rpx, 0rpx)
  115. 115 }
  116. 116 20% {
  117. 117 -webkit-transform: translate(100rpx, -200rpx)
  118. 118 }
  119. 119 40% {
  120. 120 -webkit-transform: translate(-20rpx, -280rpx)
  121. 121 }
  122. 122 60% {
  123. 123 -webkit-transform: translate(-150rpx, -200rpx)
  124. 124 }
  125. 125 80% {
  126. 126 -webkit-transform: translate(-150rpx, -50rpx)
  127. 127 }
  128. 128 100% {
  129. 129 -webkit-transform: translate(0, 0)
  130. 130 }
  131. 131 }
  132. 132
  133. 133 @keyframes around3 {
  134. 134 0% {
  135. 135 -webkit-transform: translate(0rpx, 0rpx)
  136. 136 }
  137. 137 20% {
  138. 138 -webkit-transform: translate(180rpx, 10rpx)
  139. 139 }
  140. 140 40% {
  141. 141 -webkit-transform: translate(240rpx, -110rpx)
  142. 142 }
  143. 143 60% {
  144. 144 -webkit-transform: translate(100rpx, -240rpx)
  145. 145 }
  146. 146 80% {
  147. 147 -webkit-transform: translate(-50rpx, -130rpx)
  148. 148 }
  149. 149 100% {
  150. 150 -webkit-transform: translate(0, 0)
  151. 151 }
  152. 152 }
  153. 153
  154. 154 @keyframes around4 {
  155. 155 0% {
  156. 156 -webkit-transform: translate(0rpx, 0rpx)
  157. 157 }
  158. 158 20% {
  159. 159 -webkit-transform: translate(-180rpx, 10rpx)
  160. 160 }
  161. 161 40% {
  162. 162 -webkit-transform: translate(-240rpx, -110rpx)
  163. 163 }
  164. 164 60% {
  165. 165 -webkit-transform: translate(-100rpx, -240rpx)
  166. 166 }
  167. 167 80% {
  168. 168 -webkit-transform: translate(50rpx, -130rpx)
  169. 169 }
  170. 170 100% {
  171. 171 -webkit-transform: translate(0, 0)
  172. 172 }
  173. 173 }
  174. 174
  175. 175 @keyframes around5 {
  176. 176 0% {
  177. 177 -webkit-transform: translate(0rpx, 0rpx)
  178. 178 }
  179. 179 20% {
  180. 180 -webkit-transform: translate(40rpx, 70rpx)
  181. 181 }
  182. 182 40% {
  183. 183 -webkit-transform: translate(50rpx, -210rpx)
  184. 184 }
  185. 185 60% {
  186. 186 -webkit-transform: translate(-80rpx, -100rpx)
  187. 187 }
  188. 188 80% {
  189. 189 -webkit-transform: translate(190rpx, -50rpx)
  190. 190 }
  191. 191 100% {
  192. 192 -webkit-transform: translate(0, 0)
  193. 193 }
  194. 194 }
  195. 195
  196. 196 @keyframes around6 {
  197. 197 0% {
  198. 198 -webkit-transform: translate(0rpx, 0rpx)
  199. 199 }
  200. 200 20% {
  201. 201 -webkit-transform: translate(-150rpx, -50rpx)
  202. 202 }
  203. 203 40% {
  204. 204 -webkit-transform: translate(130rpx, -140rpx)
  205. 205 }
  206. 206 60% {
  207. 207 -webkit-transform: translate(-110rpx, -180rpx)
  208. 208 }
  209. 209 80% {
  210. 210 -webkit-transform: translate(-130rpx, -20rpx)
  211. 211 }
  212. 212 100% {
  213. 213 -webkit-transform: translate(0, 0)
  214. 214 }
  215. 215 }
  216. 216
  217. 217 @keyframes around7 {
  218. 218 0% {
  219. 219 -webkit-transform: translate(0rpx, 0rpx)
  220. 220 }
  221. 221 20% {
  222. 222 -webkit-transform: translate(80rpx, -50rpx)
  223. 223 }
  224. 224 40% {
  225. 225 -webkit-transform: translate(-180rpx, -100rpx)
  226. 226 }
  227. 227 60% {
  228. 228 -webkit-transform: translate(50rpx, -150rpx)
  229. 229 }
  230. 230 80% {
  231. 231 -webkit-transform: translate(-180rpx, -20rpx)
  232. 232 }
  233. 233 100% {
  234. 234 -webkit-transform: translate(0, 0)
  235. 235 }
  236. 236 }

3.js

这一步要比css要是要简单的多,点击使动画动起来,调用api接口获取奖品就可以了

  1. 1 Page({
  2. 2
  3. 3 /**
  4. 4 * 页面的初始数据
  5. 5 */
  6. 6 data: {
  7. 7 imgUrl: app.data.imgUrl,
  8. 8 start : false,
  9. 9 qiu: true,
  10. 10 },
  11. 11
  12. 12 /**
  13. 13 * 点击扭蛋机
  14. 14 */
  15. 15 eggPlay(){
  16. 16 let _this = this;
  17. 17
  18. 18 _this.setData({
  19. 19 start: true,
  20. 20 })
  21. 21 setTimeout(() => {
  22. 22 _this.setData({
  23. 23 start: false,
  24. 24 qiu: false,
  25. 25 })
  26. 26 //球落下动画
  27. 27 var animation = wx.createAnimation({
  28. 28 duration: 1500,
  29. 29 timingFunction: 'ease',
  30. 30 });
  31. 31 animation.opacity(1).step()
  32. 32 this.setData({
  33. 33 ani: animation.export()
  34. 34 })
  35. 35 }, 3000);
  36. 36
  37. 37 _this.setData({
  38. 38 qiu: true
  39. 39 })
  40. 40 //将动画返回到开始位置
  41. 41 var animation = wx.createAnimation({
  42. 42 duration: 1500,
  43. 43 timingFunction: 'ease',
  44. 44 });
  45. 45 animation.opacity(0).step()
  46. 46 this.setData({
  47. 47 ani: animation.export()
  48. 48 })
  49. 49 },

 这个动画有个小的bug,就是连续点击按钮动画时间会变快,如果有更好的方法可以留言交流。

原文链接:http://www.cnblogs.com/li-fenghan/p/11577828.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号