微信小程序抽奖动画效果（老虎机上下滚动效果）

微信小程序抽奖动画效果（老虎机上下滚动效果）

微信小程序抽奖效果实现，本来打算用小程序自带的swiper来实现，尝试了一下，发现控制它速度变化的时候会有明显的卡顿，而且想要控制元素达到指定的位置也不是特别容易实现，于是想到用小程序提供的动画效果api实现这个效果

1.抽奖动画实现的构思

首先固定一个框，把它的overflow设置为hidden，所有的动画效果都只在这个框内执行，它的内部是一个高度超过它的列表，控制这个列表滚动即可，示意图如下

滚动示意图.png

2.建立wxml文件如下

transform-container即为内部需要滚动的列表区域，用animation绑定动画效果，列表用for循环展示，超出的部分被隐藏

<!--index.wxml-->
<view class="container">
  <!-- 滚动区域 -->
  <view class="scroll-container">
    <view class="transform-container" animation="{{animationData}}">
      <view wx:for="{{scrollText}}" wx:key="*this" class="scroll-text">
        {{item}}
      </view>
    </view>
  </view>
  <!-- 按钮 -->
  <button type="primary" bindtap="startScroll">开启</button>
  <button bindtap="reset">重置</button>
</view>

3.建立wxss文件如下

/**index.wxss**/
.scroll-container{
  width: 750rpx;
  height: 300rpx;
  text-align: center;
  background: #DDD;
  overflow: hidden;
}
.scroll-text{
  line-height: 300rpx;
  font-size: 50rpx;
  font-weight: bold;
}
button{
  margin-top: 20rpx;
}

3.建立js文件如下

相关的功能代码中都有注释，这里不做赘述

//index.js

Page({
  data: {
    scrollText: ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff', 'ggg', 'hhh', 'iii', 'jjj', 'kkk'], // 滚动的文字
    animationData: null // 绑定的动画效果
  },
  // 开始滚动
  startScroll () {
    console.log('开启')
    // 创建一个动画实例
    let animation = wx.createAnimation({
      duration: 5000,
      timingFunction: 'ease'
    })
    // 获取元素总高度
    let height =  (this.data.scrollText.length - 1) * 300
    // 向上移动
    animation.translateY(-height + 'rpx').step()
    // 将动画效果赋值
    this.setData({
      animationData: animation.export()
    })
  },
  // 重置
  reset () {
    let animation = wx.createAnimation({
      duration: 0
    })
    this.setData({
      animationData: animation.translateY(0).step().export()
    })
  }
})

4.运行小程序，即可实现对应的效果

滚动动画效果.gif