微信小程序抽奖动画效果（老虎机上下滚动效果）
微信小程序抽奖效果实现，本来打算用小程序自带的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
