微信小程序之转盘抽奖

1. 实现效果

转盘抽奖

2. 实现过程

话不多说,直接上代码

/**index.wxml */
<view class="title">旋转大转盘</view>
<view class="rote-box fcc"><view class="box fcc"><image class="bg" src="/static/bg.png" animation="{{animationRotate}}"/><image class="btn {{isTurnOver2?'':'grayscale'}}" src="/static/btn.png" bindtap="onRotateClick" /></view>
</view>
Page({/*** 页面的初始数据*/data: {isTurnOver2: true, //抽奖状态 是否旋转完(旋转大转盘)animationRotate: null,// 转的总圈数,最后一圈可能不满num_total: 20,},onRotateClick() {if (this.data.isTurnOver2) {this.setData({isTurnOver2: false,});//正常,奖品结果提前从后端接口拿回来,这里模拟获取随机// 随机奖品效果const rand = (m, n) => {return Math.ceil(Math.random() * (n - m + 1) + m - 1);};let prizeId = rand(1, 6);this.onRotate(prizeId);} else {showTextToast('请勿重复点击');}},onRotate(prizeId) {console.log('中奖id', prizeId);let _duration = 10000;let animationRotate = wx.createAnimation({duration: _duration,timingFunction: 'ease', //动画以低速开始,然后加快,在结束前变慢});//解决二次点击不旋转问题animationRotate.rotate(0).step({duration: 1,});let num_total = this.data.num_total;/** angle 旋转的角度* 这转盘有6个奖项,所以一个奖项的度数为:360除以6等于60、* 要转完一圈 → 60 * 6* 为了让动画看起来舒服我设置了20圈 → 60 * 6 * 20* 又因为需要连贯抽取非第一次,所以二次抽奖时会在原来的圈数上自加,* 也就成了60 * 6 * num_total,num_total每转完一次都会叠加上自身* 又因为转盘是顺时针旋转的,默认指定奖品1* 所以需要减去 → 60 * (prize_id - 1) 方可在最后一圈转到对应的位置* 可以根据自己的设计稿奖品的个数进行调整* */let angle = 60 * 6 * num_total - 60 * (prizeId - 1);animationRotate.rotate(angle).step();this.setData({animationRotate: animationRotate.export(),});setTimeout(() => {this.setData({isTurnOver2: true,num_total: num_total + num_total,});}, _duration);},
});
//index.less
.rote-box {padding-bottom: 20rpx;.box {width: 600rpx;height: 600rpx;position: relative;.bg {width: 100%;height: 100%;position: absolute;top: 0rpx;left: 0rpx;}.btn {position: absolute;top: 160rpx;width: 200rpx;height: 249rpx;}}
}.grayscale {filter: grayscale(70%);
}

3.资源获取

在这里插入图片描述
在这里插入图片描述

九宫格抽奖请移步这边

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/11529.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cookie、session、token、表单、json、jsonp、websocket、ajax都是什么

前后端数据交互的几种方式 1.cookie Cookie是服务器保存在客户端的一小段数据&#xff0c;&#xff08;使用Cookie的前提是客户端浏览器允许使用Cookie并对此做出相应的设置。&#xff09; cookie是一种存储在用户计算机上的小型数据文件&#xff0c;常用于在web应用程序中跟…

SpringCloud2024最新版链路追踪教程micrometer+zipkin

本文基于B站尚硅谷2024版springcloud教学视频&#xff0c;主要用于自己学习记录以及分享技术&#xff0c;侵权私删 自己本机环境信息&#xff1a; jdk&#xff1a;17.0.10springboot&#xff1a;3.2.0springcloud&#xff1a;2023.0.0 micrometer 之前行业内使用的分布式链路…

宝塔面板Docker+Uwsgi+Nginx+SSL部署Django项目

这次为大家带来的是从零开始搭建一个django项目并将它部署到linux服务器上。大家可以按照我的步骤一步步操作&#xff0c;最终可以完成部署。 步骤1&#xff1a;在某个文件夹中创建一个django项目 安装django pip install django创建一个django项目将其命名为djangoProject …

Ubuntu系统搭建Tipask开源问答系统并发布公网分享好友远程访问

文章目录 1. 前言2.Tipask网站搭建2.1 Tipask网站下载和安装2.2 Tipask网页测试2.3 cpolar的安装和注册 3. 本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;3.3 Cpolar稳定隧道&#xff08;本地设置&#xff09; 4. 公网访问测试5. 结语…

STM32——TIMER(定时器)篇

技术笔记&#xff01; 1. 定时器概述&#xff08;了解&#xff09; 1.1 软件定时器原理 使用纯软件&#xff08;CPU死等&#xff09;的方式实现定时&#xff08;延时&#xff09;功能 缺点&#xff1a;1. 延时不准确 2. CPU死等。 1.2 定时器定时原理 1.…

品牌舆情都包含什么内容?建议收藏

一个品牌的声誉、形象、产品质量、服务质量等&#xff0c;无时无刻不在接受着大众的检验。互联网传播迅速&#xff0c;一个不好的舆论直接导致整个品牌的声誉受到严重影响。品牌舆情都包含什么内容&#xff1f;接下来伯乐网络传媒就来给大家讲一讲。 一、品牌舆情的基本构成 1…

冯喜运:5.13黄金晚间还会跌吗?原油还会涨吗?

【黄金消息面分析】&#xff1a;自5月初以来&#xff0c;黄金和白银一直在享受需求的回归&#xff0c;买家在过去几天加大了力度&#xff0c;一度推动金价重返2370美元上方&#xff0c;白银重返28.5美元上方。不过&#xff0c;经过几天的盘整后&#xff0c;黄金白银价格双双下跌…

【npm】解决npm包突然消失MODULE_NOT_FOUND

今天折腾新特性时需要升级nodejs&#xff0c;安装新版后npm离奇消失了。C:\Users\**用户名\AppData\Roaming\npm\node_modules下只有cnpm&#xff0c;没有npm的目录。重装nodejs也不好使。 机智如我&#xff0c;试了下cnpm -v是正常的&#xff0c;而且能看到nodejs&#xff0c;…

什么是.faust勒索病毒?应该如何防御?

faust勒索病毒详细介绍 faust勒索病毒是一种新型的勒索软件&#xff0c;最早出现在2018年。该病毒通过加密计算机系统中的文件并要求支付赎金来解锁文件&#xff0c;从而获取经济利益。与传统的勒索软件相比&#xff0c;faust勒索病毒采用了更加先进的加密算法和隐藏技术&#…

山洪灾害无线预警广播系统的主要设备和功能

一、背景 山洪泥石流是指在山区或者其他沟谷深壑&#xff0c;地形险峻的地区&#xff0c;因为暴雨、暴雪或其他自然灾害引发的洪水、山体滑坡并携带有大量泥沙以及石块的特殊洪流。山洪泥石流等地质灾害具有突然性以及流速快&#xff0c;流量大&#xff0c;物质容量大和破坏力…

光数据传送器|光通讯传感器极速版OPT系列尺寸与安装步骤

光数据传送器|光通讯传感器极速版OPT系列是利用可见光及不可见光作为信息载体&#xff0c;无需光纤、网线等有线介质&#xff0c;在空中直接进行信息传输的无线方式通信。驱动光源以可见光及不可见光的高速明暗变化来传输数字信号&#xff0c;以极高光频率双向发射接收光信号&a…

python跟C++选哪个?

选择使用Python还是C取决于你的具体需求和项目背景。我这里有一套编程入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习编程&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&#xff0c;我在后台发给你。 在通信工程行业…

QT C++(QWidget类及其常见的属性)

文章目录 1. QWidget类及其常见的属性 1. QWidget类及其常见的属性 QT各种控件都是继承自QWidget类&#xff0c;QWidget类是QT控件体系中通用的部分。 QWidget属性如下图 常见的QT属性为&#xff1a; enabled&#xff1a;描述控件是否处于可用状态&#xff08;禁用状态这个…

Python 求高斯误差函数 erf 和 erfc

文章目录 Part.I IntroductionPart.II 概念定义Chap.I 误差函数 erfChap.II 误差函数补 erfc Part.II 求值与绘图Chap.I 求取方式Chap.II 绘图 Reference Part.I Introduction 本文将对误差函数&#xff08;ERror Function, ERF&#xff09;进行简单的介绍&#xff0c;并探索如…

【Flutter】极光推送配置流程(VIVO/OPPO/荣耀厂商通道) 章三

前言 很高兴大家来看小编写的文章&#xff5e;&#xff5e; 继【Flutter】极光推送配置流程(极光通道/华为厂商/IOS) 章一 继【Flutter】极光推送配置流程(小米厂商通道) 章二 接下配置VIVO/OPPO/华为荣耀的厂商通道 所有截图来源于公司项目&#xff0c;所以会有大量马赛克&am…

虚拟数字人及AI相关应用分享

一、虚拟数字人 1、简介 虚拟数字人可分为基础类和仿真智能类。可用于直播的&#xff0c;一般是仿真智能类&#xff1b;基础类动作缓慢&#xff0c;体验差&#xff0c;很容易被直播平台封号。 目前各大短视频平台上介绍的数字人&#xff0c;出于营销目的&#xff0c;有夸大宣传…

prophet时间序列模型水质预测应用

前言 此前已经分析了&#xff0c;ARIMA 模型在水质预测中的应用&#xff0c;今天用 prophet 模型测试下在水质预测中的效果。 Prophet 简介 Prophet 是 Facebook 于2017年开源的一个时间序列预测框架&#xff0c;特别适合于处理具有明显趋势性和季节性的数据。该模型设计初衷…

springboot3项目练习详细步骤(第三部分:文章管理模块)

目录 发布文章 接口文档 业务实现 自定义参数校验 项目参数要求 实现思路 实现步骤 文章列表(条件分页) 接口文档 业务实现 mapper映射 更新文章 接口文档 业务实现 获取文章详情 接口文档 业务实现 删除文章 接口文档 业务实现 文章管理业务表结构…

数据可视化训练第6天(美国人口调查获得关于收入与教育背景的数据,并且可视化)

数据来源 https://archive.ics.uci.edu/dataset/2/adult 过程 首先&#xff1b;关于教育背景的部分翻译有问题。 本次使用字典嵌套记录数据&#xff0c;并且通过lambda在sorted内部进行对某个字典的排序&#xff0c;最后用plotly进行绘图 本次提取数据的时候&#xff0c;用到…

ubuntu server 22.04.4 系统安装详细教程

本教程使用vmware workstation 17创建虚拟机进行安装演示&#xff0c;安装方式和真机安装没有区别。 1、下载镜像 下载ubuntu server版本系统镜像&#xff0c;官网下载地址&#xff1a;https://cn.ubuntu.com/download/server/step1 注意&#xff1a;自己下载时需要确认是否是…