温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序如何制作扭蛋机

发布时间:2021-06-17 13:42:33 阅读:993 作者:小新 栏目:web开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章将为大家详细讲解有关微信小程序如何制作扭蛋机,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

效果如下:

微信小程序如何制作扭蛋机

1.wxml

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

<!-- 扭蛋机 -->
 <view class="egg">
  <image class="egg_ji" 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}}" class="ball ball_end" src="{{imgUrl}}small_program/game/game_luck_draw_egg7.png" mode="widthFix" ></image>
 </view>

2.wxss

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

/* 扭蛋机 */
.egg{
 width100%;
 position: absolute;
 z-index3;
 top260rpx;
}
.egg .egg_ji{
 width70%;
 margin-left15%;
 z-index3;
}
.egg .play{
 width80rpx;
 position: absolute;
 z-index4;
 top405rpx;
 left275rpx;
}
.egg .ball{
 width75rpx;
 position: absolute;
 z-index2;
}
.egg .ball_1{
 top290rpx;
 left300rpx;
}
.egg .ball_2{
 top295rpx;
 left360rpx;
}
.egg .ball_3{
 top260rpx;
 left240rpx;
}
.egg .ball_4{
 top260rpx;
 left420rpx;
}
.egg .ball_5{
 top230rpx;
 left280rpx;
}
.egg .ball_6{
 top230rpx;
 left340rpx;
}
.egg .ball_7{
 top220rpx;
 left390rpx;
}
.egg .ball_end{
 top410rpx;
 left390rpx;
}

.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;
}
.go{
 animation: around 0.3s linear 1;
}


/* 位移 */
@keyframes around{
 100% {
 -webkit-transformrotate(-180deg)
 }
}

@keyframes around1 {
 0% {
 -webkit-transformtranslate(0rpx, 0rpx)
 }
 20% {
 -webkit-transformtranslate(-100rpx, -200rpx)
 }
 40% {
 -webkit-transformtranslate(40rpx, -280rpx)
 }
 60% {
 -webkit-transformtranslate(150rpx, -200rpx)
 }
 80% {
 -webkit-transformtranslate(150rpx, -50rpx)
 }
 100% {
 -webkit-transformtranslate(00)
 }
}

@keyframes around2 {
 0% {
 -webkit-transformtranslate(0rpx, 0rpx)
 }
 20% {
 -webkit-transformtranslate(100rpx, -200rpx)
 }
 40% {
 -webkit-transformtranslate(-20rpx, -280rpx)
 }
 60% {
 -webkit-transformtranslate(-150rpx, -200rpx)
 }
 80% {
 -webkit-transformtranslate(-150rpx, -50rpx)
 }
 100% {
 -webkit-transformtranslate(00)
 }
}

@keyframes around3 {
 0% {
 -webkit-transformtranslate(0rpx, 0rpx)
 }
 20% {
 -webkit-transformtranslate(180rpx, 10rpx)
 }
 40% {
 -webkit-transformtranslate(240rpx, -110rpx)
 }
 60% {
 -webkit-transformtranslate(100rpx, -240rpx)
 }
 80% {
 -webkit-transformtranslate(-50rpx, -130rpx)
 }
 100% {
 -webkit-transformtranslate(00)
 }
}

@keyframes around4 {
 0% {
 -webkit-transformtranslate(0rpx, 0rpx)
 }
 20% {
 -webkit-transformtranslate(-180rpx, 10rpx)
 }
 40% {
 -webkit-transformtranslate(-240rpx, -110rpx)
 }
 60% {
 -webkit-transformtranslate(-100rpx, -240rpx)
 }
 80% {
 -webkit-transformtranslate(50rpx, -130rpx)
 }
 100% {
 -webkit-transformtranslate(00)
 }
}

@keyframes around5 {
 0% {
 -webkit-transformtranslate(0rpx, 0rpx)
 }
 20% {
 -webkit-transformtranslate(40rpx, 70rpx)
 }
 40% {
 -webkit-transformtranslate(50rpx, -210rpx)
 }
 60% {
 -webkit-transformtranslate(-80rpx, -100rpx)
 }
 80% {
 -webkit-transformtranslate(190rpx, -50rpx)
 }
 100% {
 -webkit-transformtranslate(00)
 }
}

@keyframes around6 {
 0% {
 -webkit-transformtranslate(0rpx, 0rpx)
 }
 20% {
 -webkit-transformtranslate(-150rpx, -50rpx)
 }
 40% {
 -webkit-transformtranslate(130rpx, -140rpx)
 }
 60% {
 -webkit-transformtranslate(-110rpx, -180rpx)
 }
 80% {
 -webkit-transformtranslate(-130rpx, -20rpx)
 }
 100% {
 -webkit-transformtranslate(00)
 }
}

@keyframes around7 {
 0% {
 -webkit-transformtranslate(0rpx, 0rpx)
 }
 20% {
 -webkit-transformtranslate(80rpx, -50rpx)
 }
 40% {
 -webkit-transformtranslate(-180rpx, -100rpx)
 }
 60% {
 -webkit-transformtranslate(50rpx, -150rpx)
 }
 80% {
 -webkit-transformtranslate(-180rpx, -20rpx)
 }
 100% {
 -webkit-transformtranslate(00)
 }
}

3.js

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

Page({

 /**
  * 页面的初始数据
  */
 data: {
  imgUrl: app.data.imgUrl,
  start false,
  qiutrue,
 },

/**
 * 点击扭蛋机
 */
 eggPlay(){
  let _this = this;

  _this.setData({
   starttrue,
  })
  setTimeout(() => {
   _this.setData({
    startfalse,
    qiufalse,
   })
   //球落下动画
   var animation = wx.createAnimation({
    duration1500,
    timingFunction'ease',
   });
   animation.opacity(1).step()
   this.setData({
    ani: animation.export()
   })
  }, 3000);

  _this.setData({
   qiutrue
  })
  //将动画返回到开始位置
  var animation = wx.createAnimation({
   duration1500,
   timingFunction'ease',
  });
  animation.opacity(0).step()
  this.setData({
   ani: animation.export()
  })
 },

关于“微信小程序如何制作扭蛋机”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×