<view class="page">
? <view class="prizeList-content" animation="{{animationData}}">?
? ? <block wx:for="{{prizeList}}" wx:key="">
? ? ? <view class="prizeList">
? ? ? ? <text>{{item.nickName}}</text>
? ? ? ? <text>{{item.prizeName}}</text>
? ? ? </view>
? ? </block>
? </view>
? <view class="prizeList-content" animation="{{animationData2}}">
? ? <block wx:for="{{prizeList}}" wx:key="">
? ? ? <view class="prizeList">
? ? ? ? <text>{{item.nickName}}</text>
? ? ? ? <text>{{item.prizeName}}</text>
? ? ? </view>
? ? </block>
? </view>
</view>
.page {
? width: 600rpx;
? padding: 0 20rpx;
? height: 300rpx;
? background-color: #ff516a;
? margin: 300rpx auto 0;
? overflow: hidden;
? position: relative;
}
.prizeList-content {
? width: 100%;
? position: absolute;
? overflow: hidden;
? left: 0;
? top: 0;
}
.prizeList {
? font-size: 40rpx;
? color: #faef09;
}
.prizeList text {
? display: inline-block;
? text-align: left;
? width: 50%;
}
.prizeList text:nth-child(2) {
? display: inline-block;
? text-align: right;
? width: 50%;
}
// pages/prizeList/prizeList.js
Page({
? /**
? * 頁面的初始數(shù)據(jù)
? */
? data: {
? ? prizeList: [{
? ? ? nickName: '!mp',
? ? ? prizeName: 'iphone X'
? ? }, {
? ? ? nickName: '!mp',
? ? ? prizeName: 'iphone X'
? ? }, {
? ? ? nickName: '!mp',
? ? ? prizeName: 'iphone X'
? ? }, {
? ? ? nickName: '!mp',
? ? ? prizeName: 'iphone X'
? ? }, {
? ? ? nickName: '!mp',
? ? ? prizeName: 'iphone X'
? ? }, {
? ? ? nickName: '!mp',
? ? ? prizeName: 'iphone X'
? ? }, {
? ? ? nickName: '!mp',
? ? ? prizeName: 'iphone X'
? ? }, ],
? ? animationData: {},
? ? animationData2: {},
? },
? /**
? * 生命周期函數(shù)--監(jiān)聽頁面加載
? */
? onLoad: function(options) {
? ? // 創(chuàng)建 animation 上下文對象
? ? this.animation = wx.createAnimation({
? ? ? duration: 0,
? ? ? timingFunction: 'step-start'
? ? });
? ? this.animation2 = wx.createAnimation({
? ? ? duration: 0,
? ? ? timingFunction: 'step-start'
? ? });
? },
? onShow: function(options) {
? ? // 頁面出現(xiàn),調(diào)用動畫函數(shù)
? ? if (this.data.prizeList.length) {
? ? ? // 梯隊(duì)運(yùn)動的距離是 行高*列數(shù)
? ? ? let prizeHeight = this.data.prizeList.length * 52;
? ? ? this.animationTop(prizeHeight, true);
? ? }
? },
? onUnload:function() {
? ? let that = this;
? ? clearTimeout(that.timer);
? ? clearTimeout(that.timer2);
? ? clearTimeout(that.timer3);
? ? clearTimeout(that.timer4);
? },
? animationTop: function(h, isreset) {
? ? let that = this;
? ? // 每次執(zhí)行動畫函數(shù)時(shí),先清除定時(shí)器
? ? clearTimeout(that.timer);
? ? clearTimeout(that.timer2);
? ? if (isreset) {
? ? ? // 先把內(nèi)容位置固定在容器之外,300 是容器的高度
? ? ? that.animation.top('300rpx').step({
? ? ? ? duration: 0,
? ? ? ? timingFunction: 'step-start'
? ? ? });
? ? ? that.animation2.top('300rpx').step({
? ? ? ? duration: 0,
? ? ? ? timingFunction: 'step-start'
? ? ? });
? ? ? that.setData({
? ? ? ? animationData: that.animation.export(),
? ? ? ? animationData2: that.animation2.export()
? ? ? });
? ? ? // 第一梯隊(duì)執(zhí)行動畫
? ? ? setTimeout(function() {
? ? ? ? that.animation.top('-' + h + 'rpx').step({
? ? ? ? ? duration: 10000,
? ? ? ? ? timingFunction: 'linear'
? ? ? ? })
? ? ? ? that.setData({
? ? ? ? ? animationData: that.animation.export()
? ? ? ? })
? ? ? ? // 第二梯隊(duì)準(zhǔn)備執(zhí)行動畫
? ? ? ? that.animationTopCopy(h, isreset);
? ? ? }, 50)
? ? } else {
? ? ? // 先將第一梯隊(duì)歸位 而何時(shí)歸位？? 執(zhí)行到這一步的時(shí)候，第一梯隊(duì)走完h距離的動畫??執(zhí)行的時(shí)間是10000，
? ? ? // 還要走完容器的高度即看不見第一梯隊(duì)的時(shí)候，讓其歸位
? ? ? // 走300rpx需要的時(shí)間就是 (300 / (h+300) * 10000）
? ? ? that.timer = setTimeout(function() {
? ? ? ? that.animation.top('300rpx').step({
? ? ? ? ? duration: 0,
? ? ? ? ? timingFunction: 'step-start'
? ? ? ? });
? ? ? ? that.setData({
? ? ? ? ? animationData: that.animation.export()
? ? ? ? })
? ? ? }, 300 / (h + 300) * 10000);
? ? ? // 歸位之后，第一梯隊(duì)繼續(xù)執(zhí)行動畫? ?
? ? ? that.timer2 = setTimeout(function() {
? ? ? ? that.animation.top('-' + h + 'rpx').step({
? ? ? ? ? duration: 10000,
? ? ? ? ? timingFunction: 'linear'
? ? ? ? });
? ? ? ? that.setData({
? ? ? ? ? animationData: that.animation.export()
? ? ? ? });
? ? ? ? // 將第二梯隊(duì)歸隊(duì)? 即第一梯隊(duì)走完300，第二梯隊(duì)也走了300(動畫同步執(zhí)行)，還需要走完? h 的距離再歸位，計(jì)算時(shí)間是 h /（h+300）*10000
? ? ? ? that.animationTopCopy(h, false);
? ? ? }, h / (h + 300) * 10000);
? ? }
? },
? animationTopCopy: function(h, isreset) {
? ? let that = this;
? ? if (!isreset) {
? ? ? that.timer3 = setTimeout(function() {
? ? ? ? that.animation2.top('300rpx').step({
? ? ? ? ? duration: 0,
? ? ? ? ? timingFunction: 'linear'
? ? ? ? });
? ? ? ? that.setData({
? ? ? ? ? animationData2: that.animation2.export()
? ? ? ? })
? ? ? }, 300 / (h + 300) * 10000);
? ? }
? ? // 第二梯隊(duì)開始動畫
? ? that.timer4 = setTimeout(function() {
? ? ? that.animation2.top('-' + h + 'rpx').step({
? ? ? ? duration: 10000,
? ? ? ? timingFunction: 'linear'
? ? ? });
? ? ? that.setData({
? ? ? ? animationData2: that.animation2.export()
? ? ? })
? ? ? that.animationTop(h);
? ? }, h / (h + 300) * 10000)
? }
})
