微信小程序制作一个老虎机抽奖动画

可以把随机数换成后端传递的数据控制抽奖结果
效果图：

动图有点卡…

wxml

<view class="content relative">
	<view class="absolute img1">
		<image class="images" src="../../images/2_03.png" />
		<view class="list absolute flex">
			<view class="imgItem imgList1 flex">
				<!-- <view class="item" animation="{{animationData1}}">
					<view wx:for="{{duckDate}}" wx:key="index">{{ item }}</view>
				</view> -->
				<swiper vertical="true">
					<view class="item" animation="{{animationData1}}">
						<block wx:for="{{duckDate}}" wx:key="index">
							<swiper-item class="swiperItem">
								<view>{{ item }}</view>
							</swiper-item>
						</block>
					</view>
				</swiper>
			</view>
			<view class="imgItem imgList2 flex">
				<swiper autoplay="{{false}}" vertical="true">
					<view class="item" animation="{{animationData2}}">
						<block wx:for="{{duckDate}}" wx:key="index">
							<swiper-item class="swiperItem">
								<view>{{ item }}</view>
							</swiper-item>
						</block>
					</view>
				</swiper>
			</view>
			<view class="imgItem imgList3 flex">
				<view class="item" animation="{{animationData3}}">
					<view wx:for="{{duckDate}}" wx:key="index">{{ item }}</view>
				</view>
				<!-- <swiper vertical="true">
					<view class="item" animation="{{animationData3}}">
						<block wx:for="{{duckDate}}" wx:key="index">
							<swiper-item class="swiperItem">
								<view>{{ item }}</view>
							</swiper-item>
						</block>
					</view>
				</swiper> -->
			</view>
			<view class="imgItem imgList4 flex">
				<view class="item">
					<view>%</view>
				</view>
			</view>
		</view>
		<view class="absolute img2" animation="{{animationData4}}">
			<image class="images" bindtap="start" src="../../images/1_03.png" />
		</view>
	</view>
	<view class="absolute img3" bindtap="start" animation="{{animationData5}}">
		<image class="images" src="../../images/21_07.png" />
	</view>
</view>

wxss

.flex {
  display: flex;
  align-items: center;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.images {
  height: 100%;
  width: 100%;
  display: block;
}

.content {
  height: 100vh;
  background-color: #ddd8eb;
}

.img1 {
  width: 640rpx;
  height: 480rpx;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.list {
  background-color: #3e2f80;
  width: 482rpx;
  height: 210rpx;
  top: 60%;
  left: 49%;
  transform: translate(-50%, -55%);
  border-radius: 10%;
  justify-content: space-around;
}

.imgItem {
  font-size: 96rpx;
  color: #fff;
  font-weight: 900;
  width: 108rpx;
  height: 196rpx;
  background-image: linear-gradient(#ef9622, #e8601c);
  justify-content: center;
  overflow: hidden;
}
swiper {
  height: 196rpx!important;
  width: 108rpx!important;
}

.item {
  width: 108rpx;
  height: 196rpx;
  line-height: 196rpx;
  text-align: center;
}

.imgList1 {
  border-radius: 30% 0 0 30%;
}

.imgList4 {
  border-radius: 0 30% 30% 0;
}

.img2 {
  width: 58rpx;
  height: 272rpx;
  top: 2%;
  right: 0;
}
.img3 {
  width: 156rpx;
  height: 156rpx;
  top: 55%;
  left: 40%;
  /* transform: translate(-50%, -50%); */
}

js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    count: 2,
    duckDate: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    animationData1: null,
    animationData2: null,
    animationData3: null,
    animationData4: null,
    animationData5: null,
    timer: null,
  },
  onLoad() {
  // 按钮动画
    let btnAni = wx.createAnimation({
      delay: 0,
      duration: 3000,
      timingFunction: 'ease'
    })
    var flag = true
    this.data.timer = setInterval(() => {
      if (flag) {
        btnAni.scale(.8).step()
      } else {
        btnAni.scale(1).step()
      }
      flag = !flag
      this.setData({
        animationData5: btnAni.export()
      })
    }, 1000)
    
    let itemList = []
    // 扩大数组
    new Array(3).fill('').forEach(() => {
      itemList = itemList.concat(...this.data.duckDate);
    })
    this.setData({
      duckDate: itemList
    })
  },
  start() {
    this.runAnimation()
  },
  runAnimation() {
  	// 随机数
    let radom1 = Math.floor(Math.random() * 10);
    let radom2 = Math.floor(Math.random() * 10);
    let radom3 = Math.floor(Math.random() * 10);
    // 创建一个动画实例
    let animation1 = wx.createAnimation({
      duration: 400,
      timingFunction: 'ease-out',
      delay: 0
    })
    let animation2 = wx.createAnimation({
      duration: 800,
      timingFunction: 'ease-out',
      delay: 100
    })
    let animation3 = wx.createAnimation({
      duration: 800,
      timingFunction: 'ease-out',
      delay: 200
    })
    let animation4 = wx.createAnimation({
      duration: 400,
      timingFunction: 'ease',
      transformOrigin: '50% 100%'
    })
    animation4.rotateX(180).scale(1.2).skew(0, 5).step().rotateX(0).scale(1).skew(0, 0).step()
    // 获取元素总高度
    // let height =  (this.data.duckDate.length - 1) * 196
    let height1 = radom1 * 196 + 10 * 196 * this.data.count
    let height2 = radom2 * 196 + 10 * 196 * this.data.count
    let height3 = radom3 * 196 + 10 * 196 * this.data.count
    // 向上移动
    animation1.translateY(-height1 + 'rpx').step()
    animation2.translateY(-height2 + 'rpx').step()
    animation3.translateY(-height3 + 'rpx').step()
    let cou = this.data.count > 0 ? 0: 2
    // 将动画效果赋值
    this.setData({
      animationData1: animation1.export(),
      animationData2: animation2.export(),
      animationData3: animation3.export(),
      animationData4: animation4.export(),
      count: cou
    })
  }
})