微信小程序?qū)崿F(xiàn)翻牌抽獎動畫

更新時間：2020年09月21日 10:40:13 作者：換日線°

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)翻牌抽獎動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)翻牌抽獎的具體代碼，供大家參考，具體內(nèi)容如下

效果圖如下所示

這里做的比較簡陋，就花了一點時間實現(xiàn)了翻牌抽獎效果,提供思路

.wxml

<view class="button" bindtap="again">重新翻牌</view>
<view class="curin-index">
 <view bindtap="{{whether?'':'tamin'}}" wx:for="{{9}}" wx:key="index" data-index="{{index+1}}" class="currin {{really == index+1?'animt':''}} {{really != index+1 && surplus?'animt':''}} {{really == ''?'cinton'+(index+1):''}}" style="{{really == index+1 && implement > 1?'background-image: linear-gradient(45deg, #f43f3b, #ec008c);':''}}{{really != index+1 && surplus && implement > 2?'background-image: linear-gradient(45deg, #39b54a, #8dc63f);':''}}">
  {{really == index+1?flop:''}}{{really != index+1 && really != ''?biutin:''}}{{really == ''?'點擊翻牌':''}}
 </view>
</view>

.wxss

view{
 box-sizing: border-box;
}
.button{
 width: 40%;
 height: 80rpx;
 line-height: 80rpx;
 background-color: #fadbd9;
 color: #e54d42;
 text-align: center;
 border-radius: 10rpx;
 margin: 30rpx 30%;
 float: left;
 position: relative;
}
.curin-index{
 width: 100%;
 float: left;
}
.currin{
 margin-left: 4%;
 margin-top: 50rpx;
 width: 28%;
 float: left;
 background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
 color: #fff;
 text-align: center;
 height: 200rpx;
 line-height: 200rpx;
 border-radius: 10rpx;
 position: relative;
}
.currin::before {
 content: "";
 display: block;
 background: inherit;
 filter: blur(10rpx);
 position: absolute;
 width: 100%;
 height: 100%;
 top: 10rpx;
 left: 10rpx;
 z-index: -1;
 opacity: 0.4;
 transform-origin: 0 0;
 border-radius: inherit;
 transform: scale(1, 1);
}
.cinton1{
 animation: cinton1 alternate linear 2 1s;
}
@keyframes cinton1{
 from {
  top: 0;
  left: 0;
 }
 to {
  top: 230rpx;
  left: 230rpx;
 }
}
.cinton2{
 animation: cinton2 alternate linear 2 1s;
}
@keyframes cinton2{
 from {
  top: 0;
  left: 0;
 }
 to {
  top: 230rpx;
  left: 0rpx;
 }
}
.cinton3{
 animation: cinton3 alternate linear 2 1s;
}
@keyframes cinton3{
 from {
  top: 0;
  left: 0;
 }
 to {
  top: 230rpx;
  left: -230rpx;
 }
}
.cinton4{
 animation: cinton4 alternate linear 2 1s;
}
@keyframes cinton4{
 from {
  top: 0;
  left: 0;
 }
 to {
  top: 0rpx;
  left: 230rpx;
 }
}
.cinton6{
 animation: cinton6 alternate linear 2 1s;
}
@keyframes cinton6{
 from {
  top: 0;
  left: 0;
 }
 to {
  top: 0rpx;
  left: -230rpx;
 }
}
.cinton7{
 animation: cinton7 alternate linear 2 1s;
}
@keyframes cinton7{
 from {
  top: 0;
  left: 0;
 }
 to {
  top: -230rpx;
  left: 230rpx;
 }
}
.cinton8{
 animation: cinton8 alternate linear 2 1s;
}
@keyframes cinton8{
 from {
  top: 0;
  left: 0;
 }
 to {
  top: -230rpx;
  left: 0rpx;
 }
}
.cinton9{
 animation: cinton9 alternate linear 2 1s;
}
@keyframes cinton9{
 from {
  top: 0;
  left: 0;
 }
 to {
  top: -230rpx;
  left: -230rpx;
 }
}
.animt{
 animation: fanzhuan 1.2s;
}
@keyframes fanzhuan{
 0% {
  transform: perspective(150px) rotateY(0deg);
 } 
 50% {
  transform: perspective(150px) rotateY(0deg);
 } 
 100% {
  transform: perspective(150px) rotateY(179.9deg);
 }
}

.js

Page({
 data: {
  whether: false,
  flop:'點擊翻牌',
  really:'',
  implement: 0,
  surplus:false,
  biutin:'點擊翻牌',
 }, 
 again:function(e){
  if (this.data.implement == 3 || this.data.implement == 0){
   this.setData({
    whether: false,
    flop: '點擊翻牌',
    really: '',
    implement: 0,
    surplus: false,
    biutin: '點擊翻牌',
   })
  }else{
   wx.showToast({
    title: '正在執(zhí)行抽獎中...',
    icon: 'none',
    duration: 2000
   })
   return false
  }
 },
 tamin:function(e){
  let that = this
  let index = e.currentTarget.dataset.index
  that.setData({
   whether:true,
   really: index,
   implement:1,
  })
  setTimeout(function () {
   that.setData({
    flop: '',
   })
  }, 500)
  setTimeout(function () {
   that.setData({
    flop:'有獎品',
    surplus:true,
    implement: 2,
   })
  }, 1200)
  setTimeout(function () {
   that.setData({
    biutin: '',
   })
  }, 1700)
  setTimeout(function () {
   that.setData({
    biutin: '沒有獎品',
    implement:3,
   })
  }, 2500)
 }
})

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: