即使经过 360 度后如何获得以度为单位的相对旋转

Question

如果我有一个旋转的圆圈，并且绕 360 度旋转两次，我会得到 720 度，但是当我旋转到 360 度或 720 度时，结果会给我 0 度，但我需要相对度数，所以如果圆圈旋转到 360 度，结果应该是 360 而不是 0。是否有公式或功能可以在其通过 359 度后获得精确的旋转。

当我使用这个时：

$("#round-play1")[0].style.transform = `rotate(${810}deg)`;

检索度数的结果会给我 90 度，但我需要得到 810 度而不是 90 度。

我试过这个：

function getCurrentRotation(el){
        var st = window.getComputedStyle(el, null);
        var tm = st.getPropertyValue("-webkit-transform") ||
                st.getPropertyValue("-moz-transform") ||
                st.getPropertyValue("-ms-transform") ||
                st.getPropertyValue("-o-transform") ||
                st.getPropertyValue("transform") ||
                "none";
        if (tm != "none") {
        var values = tm.split('(')[1].split(')')[0].split(',');
        var angle = Math.round(Math.atan2(values[1],values[0]) * (180/Math.PI));
        return (angle < 0 ? angle + 360 : angle); //adding 360 degrees here when angle < 0 is equivalent to adding (2 * Math.PI) radians before
        }
        return 0;
    }

但不会给我确切的相对度。

这是我能走多远，但问题是当旋转再次设置回 0 时，乙烯基有时会回到曲目播放的开始，这是我卡住的部分：

        var detectTap = false;
    var detectPlay = false;
    var lastDeg = 0;
    $(document).ready(function(){

        $("body").height($(document).height());
        $("#services").height($(document).height());
        $(".container").height($(document).height());
        $(".row").height($(document).height());

        $("#audioplay1").click(function() {

            myAudio=document.getElementById('audio2');
            duration = myAudio.duration;
            myAudio.currentTime = 0;
            myAudio.loop=true;
            myAudio.play();
            detectPlay = true;
            offset = $("#round-play1").offset();
        })

    })

    $(document).on('touchstart click', '#round-play1', function(e){
        var x = e.touches[0].clientX;
        var y = e.touches[0].clientY;
        detectTap = true;
        startDeg =  angXY(e);
        myAudio.pause();
        A_x = x;
        A_y = y;

    });

    $(document).on('touchmove click', '#round-play1', function(e){
        var x = e.touches[0].clientX;
        var y = e.touches[0].clientY;
        var deg = angXY(e);
        
        var t2 = globTime;

        if(A_y > y){


            if(lastDeg < deg){
                var t3 = (myAudio.duration / ((myAudio.duration / (deg - startDeg)) * 100));
                currentDragTime = t3 + t2;
    
                myAudio.currentTime = currentDragTime;
                console.log("UP DOWN", currentDragTime)
            }else{
                    
                var t3 = (myAudio.duration / ((myAudio.duration / (deg - startDeg)) * 100));
                currentDragTime = t2 + t3;
    
                myAudio.currentTime = currentDragTime;
                console.log("UP UP", currentDragTime)
            }
            

        }else{

            if(lastDeg > deg){

                var t3 = (myAudio.duration / ((myAudio.duration / (startDeg - deg)) * 100));
                currentDragTime = t2 - t3;
    
                myAudio.currentTime = currentDragTime;
                console.log("DOWN UP", currentDragTime)

            }else{

                if(Math.round(currentDragTime) == 0){



                }

                var t3 = (myAudio.duration / ((myAudio.duration / (startDeg - deg)) * 100));
                currentDragTime = t2 - t3;
    
                myAudio.currentTime = currentDragTime;
                console.log("DOWN DOWN", currentDragTime)
            }


        }


        myAudio.play();
        
        $("#round-play1").css('-moz-transform', 'rotate(' + deg + 'deg)');
        $("#round-play1").css('-webkit-transform', 'rotate(' + deg + 'deg)');
        $("#round-play1").css('-o-transform', 'rotate(' + deg + 'deg)');
        $("#round-play1").css('-ms-transform', 'rotate(' + deg + 'deg)');
        
        A_y = y;
        lastDeg = deg;
    });

    $(document).on('touchend click', '#round-play1', function(e){
        var x = e.changedTouches[0].pageX;
        var y = e.changedTouches[0].pageY;
        detectTap = false;
        myAudio.play();
        lockUp = false;
        lockDown = false;
        //r = getCurrentRotation($("#round-play1")[0]);
    });

    const angXY = (e) => {
        var x = e.touches ? e.touches[0].clientX : e.changedTouches[0].pageX;
        var y = e.touches ? e.touches[0].clientY : e.changedTouches[0].pageY;

        var center_x = (offset.left) + ($("#round-play1").width() / 2);
        var center_y = (offset.top) + ($("#round-play1").height() / 2);
        var mouse_x = x;
        var mouse_y = y;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 180;

        return degree;
    };

    const angXY2 = (e) => {
        var x = e.touches ? e.touches[0].clientX : e.changedTouches[0].pageX;
        var y = e.touches ? e.touches[0].clientY : e.changedTouches[0].pageY;

        var center_x = (offset.left) + ($("#round-play1").width() / 2);
        var center_y = (offset.top) + ($("#round-play1").height() / 2);
        var mouse_x = x;
        var mouse_y = y;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 180;

        return degree;
    };


    function getCurrentRotation(el){
        var st = window.getComputedStyle(el, null);
        var tm = st.getPropertyValue("-webkit-transform") ||
                st.getPropertyValue("-moz-transform") ||
                st.getPropertyValue("-ms-transform") ||
                st.getPropertyValue("-o-transform") ||
                st.getPropertyValue("transform") ||
                "none";
        if (tm != "none") {
        var values = tm.split('(')[1].split(')')[0].split(',');
        var angle = Math.round(Math.atan2(values[1],values[0]) * (180/Math.PI));
        return (angle < 0 ? angle + 360 : angle); //adding 360 degrees here when angle < 0 is equivalent to adding (2 * Math.PI) radians before
        }
        return 0;
    }
    r = 0;
    var globTime = 0;
    setInterval(() => {
        if(!detectTap){
            if(detectPlay){
                r = r + 1;

                if(r > 360){
                    r = 0;
                }

                globTime = myAudio.currentTime;

                $("#round-play1")[0].style.transform = `rotate(${r}deg)`;
            }
        }
    }, 10);

这是完整的代码。

        var detectTap = false;
        var detectPlay = false;
        var lastDeg = 0;
        $(document).ready(function(){

            $("body").height($(document).height());
            $("#services").height($(document).height());
            $(".container").height($(document).height());
            $(".row").height($(document).height());

            $("#audioplay1").click(function() {

                myAudio=document.getElementById('audio2');
                duration = myAudio.duration;
                myAudio.currentTime = 0;
                myAudio.loop=true;
                myAudio.play();
                detectPlay = true;
                offset = $("#round-play1").offset();
            })

        })

        $(document).on('touchstart click', '#round-play1', function(e){
            var x = e.touches[0].clientX;
            var y = e.touches[0].clientY;
            detectTap = true;
            startDeg =  angXY(e);
            myAudio.pause();
            A_x = x;
            A_y = y;

        });

        $(document).on('touchmove click', '#round-play1', function(e){
            var x = e.touches[0].clientX;
            var y = e.touches[0].clientY;
            var deg = angXY(e);
            
            var t2 = globTime;

            if(A_y > y){


                if(lastDeg < deg){
                    var t3 = (myAudio.duration / ((myAudio.duration / (deg - startDeg)) * 100));
                    currentDragTime = t3 + t2;
        
                    myAudio.currentTime = currentDragTime;
                    console.log("UP DOWN", currentDragTime)
                }else{
                        
                    var t3 = (myAudio.duration / ((myAudio.duration / (deg - startDeg)) * 100));
                    currentDragTime = t2 + t3;
        
                    myAudio.currentTime = currentDragTime;
                    console.log("UP UP", currentDragTime)
                }
                

            }else{

                if(lastDeg > deg){

                    var t3 = (myAudio.duration / ((myAudio.duration / (startDeg - deg)) * 100));
                    currentDragTime = t2 - t3;
        
                    myAudio.currentTime = currentDragTime;
                    console.log("DOWN UP", currentDragTime)

                }else{

                    if(Math.round(currentDragTime) == 0){



                    }

                    var t3 = (myAudio.duration / ((myAudio.duration / (startDeg - deg)) * 100));
                    currentDragTime = t2 - t3;
        
                    myAudio.currentTime = currentDragTime;
                    console.log("DOWN DOWN", currentDragTime)
                }


            }


            myAudio.play();
            
            $("#round-play1").css('-moz-transform', 'rotate(' + deg + 'deg)');
            $("#round-play1").css('-webkit-transform', 'rotate(' + deg + 'deg)');
            $("#round-play1").css('-o-transform', 'rotate(' + deg + 'deg)');
            $("#round-play1").css('-ms-transform', 'rotate(' + deg + 'deg)');
            
            A_y = y;
            lastDeg = deg;
        });

        $(document).on('touchend click', '#round-play1', function(e){
            var x = e.changedTouches[0].pageX;
            var y = e.changedTouches[0].pageY;
            detectTap = false;
            myAudio.play();
            lockUp = false;
            lockDown = false;
            //r = getCurrentRotation($("#round-play1")[0]);
        });

        const angXY = (e) => {
            var x = e.touches ? e.touches[0].clientX : e.changedTouches[0].pageX;
            var y = e.touches ? e.touches[0].clientY : e.changedTouches[0].pageY;

            var center_x = (offset.left) + ($("#round-play1").width() / 2);
            var center_y = (offset.top) + ($("#round-play1").height() / 2);
            var mouse_x = x;
            var mouse_y = y;
            var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
            var degree = (radians * (180 / Math.PI) * -1) + 180;

            return degree;
        };

        const angXY2 = (e) => {
            var x = e.touches ? e.touches[0].clientX : e.changedTouches[0].pageX;
            var y = e.touches ? e.touches[0].clientY : e.changedTouches[0].pageY;

            var center_x = (offset.left) + ($("#round-play1").width() / 2);
            var center_y = (offset.top) + ($("#round-play1").height() / 2);
            var mouse_x = x;
            var mouse_y = y;
            var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
            var degree = (radians * (180 / Math.PI) * -1) + 180;

            return degree;
        };


        function getCurrentRotation(el){
            var st = window.getComputedStyle(el, null);
            var tm = st.getPropertyValue("-webkit-transform") ||
                    st.getPropertyValue("-moz-transform") ||
                    st.getPropertyValue("-ms-transform") ||
                    st.getPropertyValue("-o-transform") ||
                    st.getPropertyValue("transform") ||
                    "none";
            if (tm != "none") {
            var values = tm.split('(')[1].split(')')[0].split(',');
            var angle = Math.round(Math.atan2(values[1],values[0]) * (180/Math.PI));
            return (angle < 0 ? angle + 360 : angle); //adding 360 degrees here when angle < 0 is equivalent to adding (2 * Math.PI) radians before
            }
            return 0;
        }
        r = 0;
        var globTime = 0;
        setInterval(() => {
            if(!detectTap){
                if(detectPlay){
                    r = r + 1;

                    if(r > 360){
                        r = 0;
                    }

                    globTime = myAudio.currentTime;

                    $("#round-play1")[0].style.transform = `rotate(${r}deg)`;
                }
            }
        }, 10);

#services .block .icon-block {
    border: 4px solid #f9398a;
    width: 250px;
    height: 250px;
    display: flex;
    border-radius: 50%;
    margin:0 auto;
    float: left;
    background-color: #181818;
    padding: 10px;
}

#services .block .icon-block2 {
    border: 4px solid #1bc5fd;
    width: 250px;
    height: 250px;
    display: flex;
    border-radius: 50%;
    margin:0 auto;
    float: left;
    background-color: #181818;
    padding: 10px;
}

#services .block .icon-block a {
    font-size: 25px;
}
#services .block .upper-block::before{
    border: 2px solid red;
    content: "";
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: -99;
}

#services .block .upper-block{
    justify-content: center;
    display: flex;
    align-items: center;
}

.round-play{
    width: 225px;
    height: 225px;
    border-radius: 50%;
    display: flex;
    background-color: white;
    margin: 0 auto;
    margin-top: -1.5px;
    
    animation-duration: 100s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.record {
    border-radius: 50%;
    background-color: #000;
    content: "";
    display: block;
    width: 225px;
    height: 225px;
    background-image:
      -webkit-radial-gradient(
        rgba(0,0,0,1) 0,
        rgba(0,0,0,1) 1%,
        rgba(206,70,38,1) 2%,
        rgba(206,70,38,1) 21%,
        rgba(206,70,38,1) 22%,
        rgba(206,70,38,1) 23%,
        rgba(206,70,38,.5) 24%,
        rgba(255,255,255,0) 25%,
        rgba(255,255,255,0) 40%,
        rgba(255,255,255,.1) 41%,
        rgba(255,255,255,0) 43%,
        rgba(255,255,255,.1) 45%,
        rgba(255,255,255,0) 46%,
        rgba(255,255,255,0) 53%,
        rgba(255,255,255,.1) 54%,
        rgba(255,255,255,0) 55%,
        rgba(255,255,255,0) 60%,
        rgba(255,255,255,.1) 61%,
        rgba(255,255,255,0) 62%,
        rgba(255,255,255,.1) 63%,
        rgba(255,255,255,0) 64%,
        rgba(255,255,255,.1) 65%,
        rgba(255,255,255,0) 66%), 
      -webkit-linear-gradient(
        45deg, 
        #000 0%, 
        #000 30%, 
        rgba(47,47,47,1) 50%,
        #000 70%, 
        #000 100%
      );
    background-image:
      radial-gradient(
        rgba(0,0,0,1) 0,
        rgba(0,0,0,1) 1%,
        rgba(206,70,38,1) 2%,
        rgba(206,70,38,1) 21%,
        rgba(206,70,38,1) 22%,
        rgba(206,70,38,1) 23%,
        rgba(206,70,38,.5) 24%,
        rgba(255,255,255,0) 25%,
        rgba(255,255,255,0) 40%,
        rgba(255,255,255,.1) 41%,
        rgba(255,255,255,0) 43%,
        rgba(255,255,255,.1) 45%,
        rgba(255,255,255,0) 46%,
        rgba(255,255,255,0) 53%,
        rgba(255,255,255,.1) 54%,
        rgba(255,255,255,0) 55%,
        rgba(255,255,255,0) 60%,
        rgba(255,255,255,.1) 61%,
        rgba(255,255,255,0) 62%,
        rgba(255,255,255,.1) 63%,
        rgba(255,255,255,0) 64%,
        rgba(255,255,255,.1) 65%,
        rgba(255,255,255,0) 66%),
      linear-gradient(
        45deg,
        #000 0%,
        #000 30%,
        rgba(47,47,47,1) 50%,
        #000 70%,
        #000 100%
      );
  }

<!doctype html>
<html>
    <head>
        <title>Our Funky HTML Page</title>
        <meta name="description" content="Our first page">
        <meta name="keywords" content="html tutorial template">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link rel="stylesheet" href="./css/style.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        <script src="./js/js.js"></script>
    </head>
    <body style="padding:0;margin:0;height:100%;">
        <div style="width:100%;height:100%;background-color:#181818;">

            <section id="services">
                <div class="container block" style="width: 100%;">
                    <div class="row">
                        <div class="col-lg-6 upper-block">
                            <div class="icon-block">
                                <div id="round-play1" class="round-play record"></div>
                                <audio id="audio2" 
                                    src="./SONI LAGDI - SUKSHINDER SHINDA - OFFICIAL VIDEO.wav" >
                                </audio>
                            </div>

                            <div style="width:10px;" class="">
                            
                                <div style="width:10px;height:100px;background-color:#f9398a;position: relative;"></div>
                                <div style="z-index: 100; border-radius: 15px; position: absolute;top:46%;width:30px;height: 30px;background-color: white;margin-left: -10px;"></div>
                                <div style="width:10px;height:100px;background-color:#1bc5fd;position: relative;margin-top: 0px;"></div>
                            
                            </div>

                            <div class="icon-block2" style="">
                                <div id="round-play1" class="round-play record"></div>
                            </div>
                        </div>
                        <button id="audioplay1">Audio</button>
                    </div>
                </div>
            </section>
        </div>
    </body>
</html>

Answer 1

你可以设置一个大于 360 度的角度，它会很高兴地旋转那么多度。只需跟踪您正在使用的值，以便您实际上为正确的 CSS 属性设置正确的角度。

每次单击“开始”时，以下代码片段都会在 0 到 900 度之间旋转一个 div，并且该角度绝不会应用“模 360”：

btn.addEventListener(`click`, () => {
  const s = document.querySelector(`div`).style;
  const d = parseFloat(s.getPropertyValue(`--deg`) || 0);
  const update = (Math.random() * 900)|0;
  s.setProperty(`--update`, update);
  s.setProperty(`--deg`, d + update);
  degrees.textContent = `added ${update} degrees`;
});

div {
  --deg: 0;
  --update: 0;
  --speed: calc(var(--update) / 360 * 5s);
  background: red;
  width: 1em;
  height: 1em;
  transform: rotate(calc(var(--deg) * 1deg));
  transition: transform var(--speed) linear;
  margin-bottom: 0.4em;
  border-top: 1px solid black;
}

<div></div>
<button id="btn">go</button>
<span id="degrees"></span>