uniapp app 获取 DOM节点设置图片旋转rotate

淩亂°似流年 2024-04-22 15:08 69阅读 0赞

> 需求：我要让一个图片旋转起来，点击图片可以暂停，再点击一次图片可以继续从刚才的角度继续旋转下去。

![26936011307145c1b4396fab7d2ef847.gif][]

## 一、原生js实现方法 ##

思考这个问题，首先要从原生js如何去实现

> 1. 写一个正方形方块
> 
> 2. 获取其DOM节点，设置 transform:rotate(0deg);
> 
> 3. 根据setInterval不断调用旋转方法，让rotate不断增加，就可以旋转下去乐

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #box {
                width: 200px;
                height: 200px;
                background-color: aqua;
                color: blueviolet;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }
        </style>
    </head>
    
    <body>
        <div id="box">
            我是一段文字
        </div>
    </body>
    <script>
        let timer; //定时器
        window.onload = function () {
            timer = setInterval(xuanZhuan, 30);
            let boxDOM = document.getElementById("box");
            let flag = true; //默认为true代表旋转
            boxDOM.onclick = function () {
                if (flag) {
                    //停止旋转
                    if(timer) clearInterval(timer);
                    
                } else {
                    //继续旋转
                    timer = setInterval(xuanZhuan, 30);
                }
                flag = !flag;
            }
            
            let rotate = 0;//旋转角度
            function xuanZhuan() { //旋转函数
                let boxDOM = document.getElementById("box");  //获取dom节点
                rotate = rotate + 1;
                let temp = rotate + "deg";
                boxDOM.style.transform = `rotate(${temp})`;//设置旋转
            }
        }
    
    </script>
    
    </html>

## 二、在uniapp的 App 实现 ##

根本问题是在DOM节点上修改角度值，而vue早就对DOM进行乐绑定，我们仅仅需要动态修改stye中transform:rotate(0deg);的值。

<template>
        <image 
    	    :style="{transform: `rotate(${myRotateDeg}deg)`}"  
    	    class="musicIocn" 
    	    src="@/static/index/music2.png"
        >
        </image>
    <template>
    
    <script setup>
        import {ref,onMounted} from "vue"
    	let myRotateDeg = ref(0); //初始音乐旋转角度
    	let Timer; //定时器
    	onMounted(() => {
    		Timer = setInterval(getDOM,30); //开始旋转
    	});
    
    	//音乐执行旋转
    	const getDOM = ()=>{
    		myRotateDeg.value +=1;
    	}
    </script>

[26936011307145c1b4396fab7d2ef847.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/54ed989679a34288829912bab7816c8a.gif