滚动开奖动画

packagePrize/rolling/index.vue

@@ -58,6 +58,8 @@
 					<view class="prize-box-popup__image flex">
 						<image :src="prizeInfo.picUrl" mode="aspectFit"></image>
 					</view>
+					<image class="prize-box-popup__rotate" src="../static/rolling_bg1.png" mode="" v-if="rotateShow" />
+					<image class="prize-box-popup__circular" src="../static/rolling_bg2.png" mode="" v-if="circularShow" />
 				</view>
 			</view>
 			<view class="prize-info flex">
@@ -107,6 +109,8 @@
 				boxId: '',
 				isTry: null,
 				orderId: '',
+				rotateShow: true,
+				circularShow: true
 			}
 		},
 		
@@ -303,6 +307,12 @@
 				setTimeout(() => {
 					this.rollingShow = false
 				},4500)
+				setTimeout(() => {
+					this.circularShow = false
+				},5100)
+				setTimeout(() => {
+					this.rotateShow = false
+				},7500)
 				// #endif
 			
 				// #ifdef MP-WEIXIN
@@ -318,6 +328,12 @@
 				setTimeout(() => {
 					this.rollingShow = false
 				},4500)
+				setTimeout(() => {
+					this.circularShow = false
+				},5100)
+				setTimeout(() => {
+					this.rotateShow = false
+				},7500)
 				// #endif
 			},
 			
@@ -519,6 +535,7 @@
 			margin-bottom: 34rpx;
 			
 			&-popup {
+				position: relative;
 				flex-direction: column;
 				width: 75vw;
 				height: 38vh;
@@ -526,6 +543,8 @@
 				border-radius: 22rpx;
 				
 				&__image {
+					position: relative;
+					z-index: 10;
 					width: 65%;
 					height: 65%;
 					
@@ -534,6 +553,44 @@
 						height: 100%;
 					}
 				}
+				
+				&__rotate {
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					z-index: 5;
+					animation: rotateBg 3s linear;
+				}
+				
+				&__circular {
+					position: absolute;
+					width: 600rpx;
+					height: 600rpx;
+					z-index: 5;
+					animation: scaleBg 0.7s linear;
+				}
+				
+				// 旋转动画
+				@keyframes rotateBg {
+					from {
+						transform: rotate(0);
+					}
+					
+					to {
+						transform: rotate(360deg);
+					}
+				}
+				
+				// 放大动画
+				@keyframes scaleBg {
+					from {
+						transform: scale(0.8);
+					}
+					
+					to {
+						transform: scale(1.8);
+					}
+				}
 			}
 		}