小程序又要更新了_微信小程序制造扭蛋机代码实

微信小程序制作扭蛋机代码实例       这篇文章主要介绍了微信小程序制作扭蛋机代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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

1.wxml

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

 !-- 扭蛋机 -- 
 view 
 image src="{{imgUrl}}small_program/game/game_luck_draw_nd.png" mode="widthFix" /image 
 image class="play {{start 'go':''}}" bindtap="eggPlay" src="{{imgUrl}}small_program/game/game_luck_draw_eggplay.png" mode="widthFix" /image 
 image class="ball ball_1 {{start 'weiyi_1':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg1.png" mode="widthFix" /image 
 image class="ball ball_2 {{start 'weiyi_2':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg2.png" mode="widthFix" /image 
 image class="ball ball_3 {{start 'weiyi_3':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg3.png" mode="widthFix" /image 
 image class="ball ball_4 {{start 'weiyi_4':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg4.png" mode="widthFix" /image 
 image class="ball ball_5 {{start 'weiyi_5':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg5.png" mode="widthFix" /image 
 image class="ball ball_6 {{start 'weiyi_6':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg6.png" mode="widthFix" /image 
 image class="ball ball_7 {{start 'weiyi_7':''}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg7.png" mode="widthFix" /image 
 image hidden="{{qiu}}" animation="{{ani}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg7.png" mode="widthFix" /image 
 /view 

2.wxss

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

/* 扭蛋机 */
.egg{
 width: 100%;
 position: absolute;
 z-index: 3;
 top: 260rpx;
.egg .egg_ji{
 width: 70%;
 margin-left: 15%;
 z-index: 3;
.egg .play{
 width: 80rpx;
 position: absolute;
 z-index: 4;
 top: 405rpx;
 left: 275rpx;
.egg .ball{
 width: 75rpx;
 position: absolute;
 z-index: 2;
.egg .ball_1{
 top: 290rpx;
 left: 300rpx;
.egg .ball_2{
 top: 295rpx;
 left: 360rpx;
.egg .ball_3{
 top: 260rpx;
 left: 240rpx;
.egg .ball_4{
 top: 260rpx;
 left: 420rpx;
.egg .ball_5{
 top: 230rpx;
 left: 280rpx;
.egg .ball_6{
 top: 230rpx;
 left: 340rpx;
.egg .ball_7{
 top: 220rpx;
 left: 390rpx;
.egg .ball_end{
 top: 410rpx;
 left: 390rpx;
.weiyi_1 {
 animation: around1 1.5s linear infinite;
.weiyi_2 {
 animation: around2 1.5s linear infinite;
.weiyi_3 {
 animation: around3 1.5s linear infinite;
.weiyi_4 {
 animation: around4 1.5s linear infinite;
.weiyi_5 {
 animation: around5 1.5s linear infinite;
.weiyi_6 {
 animation: around6 1.5s linear infinite;
.weiyi_7 {
 animation: around7 1.5s linear infinite;
 animation: around 0.3s linear 1;

3.js
这一步要比css要是要简单的多,点击使动画动起来,调用api接口获取奖品就可以了
Page({
 * 页面的初始数据
 data: {
 imgUrl: app.data.imgUrl,
 start : false,
 qiu: true,
 * 点击扭蛋机
 eggPlay(){
 let _this = this;
 _this.setData({
 start: true,
 setTimeout(() = {
 _this.setData({
 start: false,
 qiu: false,
 //球落下动画
 var animation = wx.createAnimation({
 duration: 1500,
 timingFunction: 'ease',
 animation.opacity(1).step()
 this.setData({
 ani: animation.export()
 }, 3000);
 _this.setData({
 qiu: true
 //将动画返回到开始位置
 var animation = wx.createAnimation({
 duration: 1500,
 timingFunction: 'ease',
 animation.opacity(0).step()
 this.setData({
 ani: animation.export()
 },
这个动画有个小的bug,就是连续点击按钮动画时间会变快,如果有更好的方法可以留言交流。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。