微信小程序扭蛋抽奖机css3动画实现详解

前言

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

页面结构文件：

view class=' ball-box ' image class=' ball ball _ 1 { { start？魏一_ 1 ' : ' ' } } ' src=' http :3359加速pic。迷你索。com/miniso/ball 1。png '/image class=' ball ball _ 2 { { start？魏一_ 2 ' : ' ' } } ' src=' http :3359加速pic。迷你索。com/miniso/ball 1。png '/image class=' ball ball _ 3 { { start？魏一_ 3 ' : ' ' } } ' src=' http :3359加速pic。迷你索。com/miniso/ball 2。png '/image class=' ball ball _ 4 ' { start？魏一_ 4 ' : ' ' } } ' src=' http :3359加速pic。迷你索。com/miniso/ball 2。png '/image class=' ball ball _ 5 ' { start？魏一_ 5 ' : ' ' } } ' src=' http :3359加速pic。迷你索。com/miniso/ball 1。png '/image class=' ball ball _ 6 ' { start？魏一_ 6 ' : ' ' } } ' src=' http :3359加速pic。迷你索。com/miniso/ball 2。png '/image class=' ball ball _ 7 { { start？魏一_ 7 ' : ' ' } } ' src=' http :3359加速pic。迷你索。com/miniso/ball 3。png '/image class=' ball ball _ 8 ' { start？魏一_ 8 ' : ' ' } } ' src=' http :3359加速pic。迷你索。com/miniso/ball 3。png '/image class=' ball ball _ 9 { { start？魏一_ 9 ' : ' ' } } ' src=' http :3359 accelerate pic。迷你索。com/miniso/ball 3。png '/image class=' ball ball _ 10 { { start？魏一_ 10 ' : ' ' } } ' src=' http :3359加速pic。迷你索。com/miniso/ball 4。png '/image class=' ball ball _ 11 { { start？魏一_ 11 ' : ' ' } } ' src=' http :3359加速pic。迷你索。com/miniso/ball 4。png '/图像/视图这个做得我头皮发麻，但是写这篇文章时突然想到，为啥不用个为循环来做呢？

view class=' ball-box ' image wx : for=' ball list ' wx : for-index=' I ' class=' ball ball _ { { I } } { { start？魏一_ { { I } } ' : ' ' } } ' src=' http :https://accelerate pic。迷你索。com/miniso/ball { { I } } .png‘/图像/视图这样看起来是不是舒服多了，因为是这段代码现场手写，如果有啥病菌也不好说。

页面样式表文件：魏一_1 { animation:约1 1.5s线性无限；-网络套件-动画：约1 1.5s线性无限；}简单的动画

/* 位移*/@-网络套件-关键帧大约1 { 0% {-web kit-transform : translate(0rpx，0rpx)} 20% {-web kit-transform : translate(100 rpx，-250 rpx)} 40% {-web kit-transform : translate(200 rpx，-100 rpx)} 60% {-web kit-transform : translate(50 rpx，-230 rpx)} 80% { }简单的位移

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

射流研究…文件：

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

_this.setData({ start: true})控制抽奖开始

setTimeout(()={ _ this。setdata({ start : false，end: true }) //其他代码部分//时间是接口请求开始到结束的时间}，Math.ceil(time/1500) * 1500 - time)这里用了一个setTimeout，用于设置动画结束时间，优化一下动画，不让结束看起来太突兀。

1500是页面样式表里这是的动画时间。

总结：

简单的扭蛋机，有时间用帆布来做做。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。