ソースを参照

支付宝试玩动画

DELL 3 年 前
コミット
c0800ad741
1 ファイル変更70 行追加5 行削除
  1. 70 5
      src/packagePrize/rolling/index.vue

+ 70 - 5
src/packagePrize/rolling/index.vue

@@ -125,10 +125,12 @@
 		onLoad(options) {
 			// 创建动画实例
 			this.animation = uni.createAnimation()
+			
 			// #ifdef MP-WEIXIN
 			const res = uni.getMenuButtonBoundingClientRect()
 			this.statusHeight = res.top //胶囊距离顶部
 			// #endif
+	
 
 			if(options) {
 				this.boxId = options.boxId
@@ -201,7 +203,7 @@
 			
 			// 动画开始
 			running() {
-				// #ifdef H5
+				// #ifdef H5 
 				// 获取滚动奖品列表长度
 				this.data = this.$refs.rolling.$el.clientWidth
 				// 调用 step() 来表示一组动画完成
@@ -226,8 +228,36 @@
 					this.stop()
 				}, 8000);
 				// #endif
+				
+				// #ifdef MP-ALIPAY
+				 my.createSelectorQuery().select('.rolling-prize-list').boundingClientRect().exec(info => {
+					this.data = info[0].width
+					// 调用 step() 来表示一组动画完成
+					this.animation.translateX(-this.data).step({
+						duration: 8000,
+						timingFunction: 'linear'
+					})
+					// export方法导出动画数据
+					this.animationData = this.animation.export()
+					// 倒计时
+					this.time = setInterval(() => {
+						// 开奖倒计时、页面显示
+						this.num--
+						// 记录动画执行时间,停止动画计算移动距离时使用
+						this.num2++
+						if (this.num == 0) {
+							clearInterval(this.time)
+						}
+					}, 1000)
+				 })
+				// 不手动停止动画,自动停止
+				this.stopTime = setTimeout(() => {
+					this.num = 0
+					this.stop()
+				}, 8000);
+				// #endif
 			
-				// #ifdef MP-WEIXIN
+				// #ifdef MP-WEIXIN 
 				// 元素详细信息
 				uni.createSelectorQuery().in(this).select(".rolling-prize-list").boundingClientRect(info => {
 					this.data = info.width
@@ -261,12 +291,16 @@
 			// 停止动画
 			stop() {
 				// 获取屏幕距离,用于计算停止动画移动距离计算
+				
+				// #ifndef MP-ALIPAY
 				let screenWidth = null
 				uni.getSystemInfo({
 					success: function(res) {
 						screenWidth = res.screenWidth;
 					}
 				});
+				// #endif
+				
 				this.btnIng = true
 				/**
 				 * 0秒:下标4
@@ -300,10 +334,10 @@
 				} else if (this.num2 == 7) {
 					this.list[1][1] = JSON.parse(JSON.stringify(this.prizeInfo))
 				} else if (this.num2 == 8) {
-					// #ifdef MP-WEIXIN
+					// #ifdef MP-WEIXIN || MP-ALIPAY
 					this.list[1][1] = JSON.parse(JSON.stringify(this.prizeInfo))
 					// #endif
-					// #ifdef H5
+					// #ifdef H5 
 					this.list[3][1] = JSON.parse(JSON.stringify(this.prizeInfo))
 					// #endif
 				}
@@ -330,8 +364,38 @@
 					this.rotateShow = false
 				},7500)
 				// #endif
+				
+				// #ifdef MP-ALIPAY
+				
+				let _this = this
+				uni.getSystemInfo({
+					success: (res)=> {
+						let windowWidth = res.windowWidth;
+						my.createSelectorQuery().select('.rolling-prize-list').boundingClientRect().exec(info => {
+							_this.data = info[0].width
+							console.log(_this.data);
+							_this.animation.translateX(-(_this.data  + windowWidth * 3)).step({
+								duration: 4000,
+								timingFunction: 'ease'
+							})
+							_this.animationData = _this.animation.export()
+						})
+						
+						setTimeout(() => {
+							_this.rollingShow = false
+						},4500)
+						setTimeout(() => {
+							_this.circularShow = false
+						},5100)
+						setTimeout(() => {
+							_this.rotateShow = false
+						},7500)
+					}
+				});
+				
+				// #endif
 			
-				// #ifdef MP-WEIXIN
+				// #ifdef MP-WEIXIN 
 				uni.createSelectorQuery().in(this).select(".rolling-prize-list").boundingClientRect(info => {
 					this.data = info.width
 					this.animation.translateX(-(this.data / 8 * this.num2 + screenWidth * 3)).step({
@@ -339,6 +403,7 @@
 						timingFunction: 'ease'
 					})
 					this.animationData = this.animation.export()
+					console.log(-(this.data / 8 * this.num2 + screenWidth * 3));
 				}).exec();
 				
 				setTimeout(() => {