react实现转盘动画

2023-03-10,,

转盘动画方法如下:

/**
* 点击转动转盘
*/
const turnCircle = () => {
let runDeg = +(Math.random() * 360).toFixed(0) + 2160; // 先转6圈,最后再转随机的0-1圈
const table = document.getElementById('innerCircle'); // 转盘节点(这里是一个转盘图片)
// 清除状态,恢复到初始状态
table.style.transition = ``;
table.style.transform = `rotate(0)`;
setTimeout(() => { // 留点时间给清除状态
table.style.transition = `transform 5s ease 0s`; // 时间/速度自由控制
table.style.transform = `rotate(${runDeg}deg)`;
}, 10);
}

react实现转盘动画的相关教程结束。

《react实现转盘动画.doc》

下载本文的Word格式文档,以方便收藏与打印。