uniapp扭蛋抽奖

顺其自然～

已于 2022-10-25 14:14:02 修改

阅读量2.5k

点赞数 4

分类专栏： vue 文章标签： 1024程序员节 vue uniapp uniapp扭蛋抽奖扭蛋抽奖

于 2022-10-24 20:25:52 首次发布

本文链接：https://blog.csdn.net/weixin_44452446/article/details/127500377

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

这是一个使用uniapp框架编写的简单扭蛋抽奖DEMO，适用于iOS和Android平台。通过点击触发动画，模拟扭蛋转动和落球效果，整体体验流畅。代码中运用了uniapp的内置动画和关键帧动画实现球体的旋转和位移，提供了可直接使用的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp扭蛋抽奖

看市面上没啥人写，然后vue的也比较乱，然后写了一个比较简单demo。拿走就可以用。
用了uni自带的动画，使用ios和安卓问题不大。
大家可以试试，个人感觉挺流畅的。

<template>
 <view class="egg">
 // 背景
  <image class="egg_ji" src="./blue.png" mode="widthFix"></image>
  // 开关
  <image class="play" :class="start?'go':''" @click="eggPlay" src="./blue.png" mode="widthFix"></image>
  <image class="ball ball_1" :class="start?'weiyi_1':''" src="./blue.png" mode="widthFix"></image>
  <image class="ball ball_2" :class="start?'weiyi_2':''" src="./blue.png" mode="widthFix"></image>
  <image class="ball ball_3" :class="start?'weiyi_3':''" src="./blue.png" mode="widthFix"></image>
  <image class="ball ball_4" :class="start?'weiyi_4':''" src="./blue.png" mode="widthFix"></image>
  <image class="ball ball_5" :class="start?'weiyi_5':''" src="./blue.png" mode="widthFix"></image>
  <image class="ball ball_6" :class="start?'weiyi_6':''" src="./blue.png" mode="widthFix"></image>
  <image class="ball ball_7" :class="start?'weiyi_7':''" src="./blue.png" mode="widthFix"></image>
  // 掉落的蛋
  <image :hidden="qiu" :animation="ani" class="ball ball_end" src="./yellow.png" mode="widthFix" ></image>
 </view>

	
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				start : false,
				qiu: true,
				nui: '',
			}
		},
		computed: {

		},
		onLoad(options) {

		},
		methods: {
			/**
			 * 点击扭蛋机
			 */
			 eggPlay(){

				this.start = true
				setTimeout(() => {
					this.start = false
					this.qiu = false
					//球落下动画
					var animation = uni.createAnimation({
						duration: 1500,
						timingFunction: 'ease',
					});
					animation.opacity(1).step()
					this.ani = animation.export()
				}, 3000);
				
				this.qiu = true
				//将动画返回到开始位置
				var animation = uni.createAnimation({
					duration: 1500,
					timingFunction: 'ease',
				});
				animation.opacity(0).step()
				this.ani = animation.export()
			},
		},
	}
</script>

<style lang="css" scoped>
.egg{
 width: 100%;
 position: absolute;
 z-index: 3;
 top: 260rpx;
}
.egg .egg_ji{
 width: 70%;
 margin-left: 15%;
 z-index: 3;
}
.egg .play{
 width: 80rpx;
 position: absolute;
 z-index: 4;
 top: 405rpx;
 left: 275rpx;
}
.egg .ball{
 width: 75rpx;
 position: absolute;
 z-index: 2;
}
.egg .ball_1{
 top: 290rpx;
 left: 300rpx;
}
.egg .ball_2{
 top: 295rpx;
 left: 360rpx;
}
.egg .ball_3{
 top: 260rpx;
 left: 240rpx;
}
.egg .ball_4{
 top: 260rpx;
 left: 420rpx;
}
.egg .ball_5{
 top: 230rpx;
 left: 280rpx;
}
.egg .ball_6{
 top: 230rpx;
 left: 340rpx;
}
.egg .ball_7{
 top: 220rpx;
 left: 390rpx;
}
.egg .ball_end{
 top: 410rpx;
 left: 390rpx;
}

.weiyi_1 {
 animation: around1 1.5s linear infinite;
}
.weiyi_2 {
 animation: around2 1.5s linear infinite;
}
.weiyi_3 {
 animation: around3 1.5s linear infinite;
} 
.weiyi_4 {
 animation: around4 1.5s linear infinite;
}
.weiyi_5 {
 animation: around5 1.5s linear infinite;
}
.weiyi_6 {
 animation: around6 1.5s linear infinite;
}
.weiyi_7 {
 animation: around7 1.5s linear infinite;
}
.go{
 animation: around 0.3s linear 1;
}


/* 位移 */
@keyframes around{
 100% {
 -webkit-transform: rotate(-180deg)
 }
}

@keyframes around1 {
 0% {
 -webkit-transform: translate(0rpx, 0rpx)
 }
 20% {
 -webkit-transform: translate(-100rpx, -200rpx)
 }
 40% {
 -webkit-transform: translate(40rpx, -280rpx)
 }
 60% {
 -webkit-transform: translate(150rpx, -200rpx)
 }
 80% {
 -webkit-transform: translate(150rpx, -50rpx)
 }
 100% {
 -webkit-transform: translate(0, 0)
 }
}

@keyframes around2 {
 0% {
 -webkit-transform: translate(0rpx, 0rpx)
 }
 20% {
 -webkit-transform: translate(100rpx, -200rpx)
 }
 40% {
 -webkit-transform: translate(-20rpx, -280rpx)
 }
 60% {
 -webkit-transform: translate(-150rpx, -200rpx)
 }
 80% {
 -webkit-transform: translate(-150rpx, -50rpx)
 }
 100% {
 -webkit-transform: translate(0, 0)
 }
}

@keyframes around3 {
 0% {
 -webkit-transform: translate(0rpx, 0rpx)
 }
 20% {
 -webkit-transform: translate(180rpx, 10rpx)
 }
 40% {
 -webkit-transform: translate(240rpx, -110rpx)
 }
 60% {
 -webkit-transform: translate(100rpx, -240rpx)
 }
 80% {
 -webkit-transform: translate(-50rpx, -130rpx)
 }
 100% {
 -webkit-transform: translate(0, 0)
 }
}

@keyframes around4 {
 0% {
 -webkit-transform: translate(0rpx, 0rpx)
 }
 20% {
 -webkit-transform: translate(-180rpx, 10rpx)
 }
 40% {
 -webkit-transform: translate(-240rpx, -110rpx)
 }
 60% {
 -webkit-transform: translate(-100rpx, -240rpx)
 }
 80% {
 -webkit-transform: translate(50rpx, -130rpx)
 }
 100% {
 -webkit-transform: translate(0, 0)
 }
}

@keyframes around5 {
 0% {
 -webkit-transform: translate(0rpx, 0rpx)
 }
 20% {
 -webkit-transform: translate(40rpx, 70rpx)
 }
 40% {
 -webkit-transform: translate(50rpx, -210rpx)
 }
 60% {
 -webkit-transform: translate(-80rpx, -100rpx)
 }
 80% {
 -webkit-transform: translate(190rpx, -50rpx)
 }
 100% {
 -webkit-transform: translate(0, 0)
 }
}

@keyframes around6 {
 0% {
 -webkit-transform: translate(0rpx, 0rpx)
 }
 20% {
 -webkit-transform: translate(-150rpx, -50rpx)
 }
 40% {
 -webkit-transform: translate(130rpx, -140rpx)
 }
 60% {
 -webkit-transform: translate(-110rpx, -180rpx)
 }
 80% {
 -webkit-transform: translate(-130rpx, -20rpx)
 }
 100% {
 -webkit-transform: translate(0, 0)
 }
}

@keyframes around7 {
 0% {
 -webkit-transform: translate(0rpx, 0rpx)
 }
 20% {
 -webkit-transform: translate(80rpx, -50rpx)
 }
 40% {
 -webkit-transform: translate(-180rpx, -100rpx)
 }
 60% {
 -webkit-transform: translate(50rpx, -150rpx)
 }
 80% {
 -webkit-transform: translate(-180rpx, -20rpx)
 }
 100% {
 -webkit-transform: translate(0, 0)
 }
}

</style>