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

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

扭蛋机抽奖.gif

wxml文件：

<view class="ball-box">
      <image"ball ball_1 {{start?'weiyi_1':''}}"src"https://acceleratepic.miniso.com/miniso/ball1.png"></image>
></image>
"https://acceleratepic.miniso.com/miniso/ball2.png"></image>
></image>
></image>
></image>
"https://acceleratepic.miniso.com/miniso/ball3.png"></image>
></image>
></image>
"https://acceleratepic.miniso.com/miniso/ball4.png"></image>
</view>

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

"https://acceleratepic.miniso.com/miniso/ball{{i}}.png"</view>

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

wxss文件：

.weiyi_1 {
  -webkitanimation;
简单的动画


/* 位移 */

  0% {
}
100rpx-250rpx)
40{
}
}
300rpx)
100{
}

@keyframes around1 {
}
)
)
}

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

js文件：

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

  start true
控制抽奖开始

          startfalse        })

//time是接口请求开始到结束的时间
这里用了一个setTimeout，用于设置动画结束时间，优化一下动画，不让结束看起来太突兀。?
1500是wxss里这是的动画时间。


总结：
简单的扭蛋机，有时间用canvas来做做。
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!