微信小程序抽獎動畫效果（老虎機上下滾動效果）
微信小程序抽獎效果實現(xiàn)完残，本來打算用小程序自帶的swiper來實現(xiàn)月杉，嘗試了一下，發(fā)現(xiàn)控制它速度變化的時候會有明顯的卡頓，而且想要控制元素達到指定的位置也不是特別容易實現(xiàn)纫塌，于是想到用小程序提供的動畫效果api實現(xiàn)這個效果
1.抽獎動畫實現(xiàn)的構(gòu)思
首先固定一個框诊县，把它的overflow設(shè)置為hidden，所有的動畫效果都只在這個框內(nèi)執(zhí)行措左，它的內(nèi)部是一個高度超過它的列表依痊，控制這個列表滾動即可，示意圖如下
滾動示意圖.png
2.建立wxml文件如下
transform-container即為內(nèi)部需要滾動的列表區(qū)域怎披，用animation綁定動畫效果胸嘁，列表用for循環(huán)展示，超出的部分被隱藏
<!--index.wxml-->
<view class="container">
<!-- 滾動區(qū)域 -->
<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文件如下
相關(guān)的功能代碼中都有注釋凉逛，這里不做贅述
//index.js
Page({
data: {
scrollText: ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff', 'ggg', 'hhh', 'iii', 'jjj', 'kkk'], // 滾動的文字
animationData: null // 綁定的動畫效果
},
// 開始滾動
startScroll () {
console.log('開啟')
// 創(chuàng)建一個動畫實例
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.運行小程序性宏，即可實現(xiàn)對應(yīng)的效果
滾動動畫效果.gif
