简单点击转动转盘到指定位置的demo

1.界面显示

2.转盘慢速转动,当点击转动按钮后,转盘加速转动(有加速度),转动一段时间后停留在指定的位置。

难点:如何给转盘一个加速?如何让转盘停留在指定的位置?

思路:转盘转动通过每一帧rotation++得到

加速的逻辑:使用tween动画将speed变大变小。

每一帧增加rotation的逻辑:

当速度达到了最大值,速度会逐渐减小。速度变化:0.5(自动转动的速度)-->3(点击转动)-->8(停留一秒)-->3(准备停止)-->完成。

当速度到了最小值且已经是速度变化完毕,使用 tween动画将角度偏正。

当转动到某个范围,移除每帧变化rotation的逻辑,使用tween动画来将rotation转动到指定的位置。经过调整得到。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现自定义格数、点击转动并停止到指定位置的 HTML 转盘,你可以通过以下步骤进行: 1. 在 HTML 中添加一个 input 元素,用于输入格数和目标角度。 2. 在 JavaScript 中获取输入的格数和目标角度。 3. 根据格数计算出每个色块的角度,并绘制转盘。 4. 绑定点击事件,生成随机旋转角度并绑定动画效果,同时记录当前旋转总角度。 5. 每次旋转完成后,计算当前旋转总角度,并检查是否达到目标角度。 6. 如果达到目标角度,停止动画并弹出提示框,否则继续旋转。 以下是一个自定义格数、点击转动并停止到指定位置的 HTML 转盘代码示例: ```html <!DOCTYPE html> <html> <head> <title>HTML 转盘</title> <style> canvas { border: 1px solid #ccc; margin: 20px auto; } </style> </head> <body> <label for="sectors">请输入格数:</label> <input type="number" id="sectors" min="2" max="10" value="6"> <label for="angle">请输入目标角度:</label> <input type="number" id="angle" min="0" max="360" value="0"> <canvas id="canvas" width="400" height="400"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var inputSectors = document.getElementById("sectors"); var inputAngle = document.getElementById("angle"); var sectors = parseInt(inputSectors.value); var angle = parseInt(inputAngle.value); var totalAngle = 0; inputSectors.onchange = function() { sectors = parseInt(inputSectors.value); draw(); }; inputAngle.onchange = function() { angle = parseInt(inputAngle.value); }; function draw() { // 计算每个色块的角度 var sectorAngle = 2 * Math.PI / sectors; // 画一个圆形 ctx.beginPath(); ctx.arc(200, 200, 180, 0, 2 * Math.PI); ctx.fillStyle = "#fff"; ctx.fill(); // 添加色块 var colors = ["#f00", "#0f0", "#00f", "#ff0", "#f0f", "#0ff"]; for (var i = 0; i < sectors; i++) { ctx.beginPath(); ctx.moveTo(200, 200); ctx.arc(200, 200, 160, i * sectorAngle, (i + 1) * sectorAngle); ctx.fillStyle = colors[i % colors.length]; ctx.fill(); } } function rotate() { // 生成随机旋转角度 var randomAngle = Math.random() * 360; var rotate = "rotate(" + randomAngle + "deg)"; // 绑定动画效果 canvas.style.transition = "transform 3s ease-out"; canvas.style.transform = rotate; // 记录当前旋转总角度 totalAngle += randomAngle; // 每次旋转完成后检查是否达到目标角度 if (totalAngle >= angle) { canvas.style.transition = ""; canvas.style.transform = "rotate(" + (angle - (totalAngle - randomAngle)) + "deg)"; alert("恭喜你,获得了 " + colors[Math.floor(angle / (360 / sectors)) % colors.length] + " 奖品!"); } else { setTimeout(rotate, 3000); } } draw(); canvas.onclick = rotate; </script> </body> </html> ``` 你可以将上述代码复制到一个 HTML 文件中并打开,即可看到一个自定义格数、点击转动并停止到指定位置的 HTML 转盘。注意,输入的格数必须在 2-10 的范围内,输入的目标角度必须在 0-360 的范围内。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值