用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序:扭蛋抽奖机-css3动画实现

Rolan 2019-11-26 00:59

最近快速上线一个抽奖活动,又不想用canvas做,思考了很久,还是决定使用css3的动画来做,只要小球动得快,就没人发现我这些个小球的运动路径都是一样的了。先上动图。扭蛋机抽奖.gifwxml文件:view class="ball-box ...

最近快速上线一个抽奖活动,又不想用canvas做,思考了很久,还是决定使用css3的动画来做,只要小球动得快,就没人发现我这些个小球的运动路径都是一样的了。先上动图。

扭蛋机抽奖.gif

wxml文件:

  1. <view class="ball-box">
  2. <image class="ball ball_1 {{start?'weiyi_1':''}}" src="https://acceleratepic.miniso.com/miniso/ball1.png"></image>
  3. <image class="ball ball_2 {{start?'weiyi_2':''}}" src="https://acceleratepic.miniso.com/miniso/ball1.png"></image>
  4. <image class="ball ball_3 {{start?'weiyi_3':''}}" src="https://acceleratepic.miniso.com/miniso/ball2.png"></image>
  5. <image class="ball ball_4 {{start?'weiyi_4':''}}" src="https://acceleratepic.miniso.com/miniso/ball2.png"></image>
  6. <image class="ball ball_5 {{start?'weiyi_5':''}}" src="https://acceleratepic.miniso.com/miniso/ball1.png"></image>
  7. <image class="ball ball_6 {{start?'weiyi_6':''}}" src="https://acceleratepic.miniso.com/miniso/ball2.png"></image>
  8. <image class="ball ball_7 {{start?'weiyi_7':''}}" src="https://acceleratepic.miniso.com/miniso/ball3.png"></image>
  9. <image class="ball ball_8 {{start?'weiyi_8':''}}" src="https://acceleratepic.miniso.com/miniso/ball3.png"></image>
  10. <image class="ball ball_9 {{start?'weiyi_9':''}}" src="https://acceleratepic.miniso.com/miniso/ball3.png"></image>
  11. <image class="ball ball_10 {{start?'weiyi_10':''}}" src="https://acceleratepic.miniso.com/miniso/ball4.png"></image>
  12. <image class="ball ball_11 {{start?'weiyi_11':''}}" src="https://acceleratepic.miniso.com/miniso/ball4.png"></image>
  13. </view>

这个做得我头皮发麻,但是写这篇文章时突然想到,为啥不用个for循环来做呢?!

  1. <view class="ball-box">
  2. <image wx:for="ballList" wx:for-index="i" class="ball ball_{{i}} {{start?'weiyi_{{i}}':''}}" src="https://acceleratepic.miniso.com/miniso/ball{{i}}.png"></image>
  3. </view>

这样看起来是不是舒服多了,因为是这段代码现场手写,如果有啥bug也不好说。

wxss文件:

  1. .weiyi_1 {
  2. animation: around1 1.5s linear infinite;
  3. -webkit-animation: around1 1.5s linear infinite;
  4. }

简单的动画

  1. /* 位移 */
  2. @-webkit-keyframes around1 {
  3. 0% {
  4. -webkit-transform: translate(0rpx, 0rpx)
  5. }
  6. 20% {
  7. -webkit-transform: translate(100rpx, -250rpx)
  8. }
  9. 40% {
  10. -webkit-transform: translate(200rpx, -100rpx)
  11. }
  12. 60% {
  13. -webkit-transform: translate(50rpx, -230rpx)
  14. }
  15. 80% {
  16. -webkit-transform: translate(300rpx, -50rpx)
  17. }
  18. 100% {
  19. -webkit-transform: translate(0, 0)
  20. }
  21. }
  22. @keyframes around1 {
  23. 0% {
  24. transform: translate(0rpx, 0rpx)
  25. }
  26. 20% {
  27. transform: translate(100rpx, -250rpx)
  28. }
  29. 40% {
  30. transform: translate(200rpx, -100rpx)
  31. }
  32. 60% {
  33. transform: translate(50rpx, -230rpx)
  34. }
  35. 80% {
  36. transform: translate(300rpx, -50rpx)
  37. }
  38. 100% {
  39. transform: translate(0, 0)
  40. }
  41. }

简单的位移 
其他就不一一列出来了,反正都差不多,改变一下运动轨迹就行了。

js文件:

相比丧病的样式,js文件就简单多了。

  1. _this.setData({
  2. start: true
  3. })
  4. 控制抽奖开始
  5. setTimeout(() => {
  6. _this.setData({
  7. start: false,
  8. end: true
  9. })
  10. //其他代码部分
  11. //time是接口请求开始到结束的时间
  12. }, Math.ceil(time / 1500) * 1500 - time)

这里用了一个setTimeout,用于设置动画结束时间,优化一下动画,不让结束看起来太突兀。 
1500是wxss里这是的动画时间。

总结:

简单的扭蛋机,有时间用canvas来做做。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 空箜崆 来自: 简书