扭蛋机小球动画效果

最新推荐文章于 2024-04-01 09:15:00 发布

fury_123

最新推荐文章于 2024-04-01 09:15:00 发布

阅读量933

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/kuang_nu/article/details/131008456

版权

function draw() {
    // 扭一扭按钮动画移除
    document.querySelector('.game_go').classList.remove('twist')
    //机器晃动动画开始
    document.querySelector('.game_qu').classList.add('machine');
    // 大球动画开始
    for (let i = 1; i <= empHaveImgArr.length; i++) {
        document.querySelector(`.qiu_${i}`).classList.remove(`diaol_${i}`);
        document.querySelector(`.qiu_${i}`).classList.add(`wieyi_${i}`);
    }
    // 小球开始动画
    for (let i = 12; i <= 36; i++) {
        document.querySelector(`.qiu_${i}`).classList.remove(`diaol_${i}`);
        document.querySelector(`.qiu_${i}`).classList.add(`wieyi_${i}`);
    }
    //机器晃动动画结束
    setTimeout(() => {
        document.querySelector('.game_qu').classList.remove('machine');
    }, 5000);
    // 大球结束动画
    setTimeout(() => {
        for (let i = 1; i <= empHaveImgArr.length; i++) {
            document.querySelector(`.qiu_${i}`).classList.remove(`wieyi_${i}`);
        }
    }, 5000);
    // 小球结束动画
    setTimeout(() => {
        for (let i = 12; i <= 36; i++) {
            document.querySelector(`.qiu_${i}`).classList.remove(`wieyi_${i}`);
        }
    }, 5000);
    setTimeout(() => {
        // 添加扭一扭按钮动画
        document.querySelector('.game_go').classList.add('twist')
    }, 5000);
}