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

kgsdhlau  于 2023-03-20  发布在  其他
关注(0)|答案(1)|浏览(103)

如果我有一个旋转的圆，并且reach的两次旋转360度，我会得到720度，但是当我旋转到360度或720度时，结果会给予我0度，但是我需要相对度，所以如果圆旋转到360度，结果应该是360度，而不是0度，在它经过359度后，是否有公式或函数可以得到精确的旋转。
这是我走了多远，但问题是当旋转再次回到0，有时黑胶回到轨道播放的开始，这是我坚持的部分：

var detectTap = false;
var detectPlay = false;
var lastDeg = 0;
var currentDragTime = 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 ? e.touches[0].clientX : e.changedTouches ? e.changedTouches[0].pageX : null;
  var y = e.touches ? e.touches[0].clientY : e.changedTouches ? e.changedTouches[0].pageY : null;

  if (x && y) {
    detectTap = true;
    startDeg = angXY(e);
    myAudio.pause();
    A_x = x;
    A_y = y;
  } else {
    detectTap = true;
    x = 0
    y = 0;
    myAudio.pause();
  }

});

$(document).on('touchmove click', '#round-play1', function(e) {
  var x = e.touches ? e.touches[0].clientX : e.changedTouches ? e.changedTouches[0].pageX : null;
  var y = e.touches ? e.touches[0].clientY : e.changedTouches ? e.changedTouches[0].pageY : null;

  if (x && y) {
    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;
      } else {

        var t3 = (myAudio.duration / ((myAudio.duration / (deg - startDeg)) * 100));
        currentDragTime = t2 + t3;

        myAudio.currentTime = currentDragTime;
      }

    } else {

      if (lastDeg > deg) {

        var t3 = (myAudio.duration / ((myAudio.duration / (startDeg - deg)) * 100));
        currentDragTime = t2 - t3;

        myAudio.currentTime = currentDragTime;

      } else {

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


        }

        var t3 = (myAudio.duration / ((myAudio.duration / (startDeg - deg)) * 100));
        currentDragTime = t2 - t3;

        myAudio.currentTime = 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.touches ? e.touches[0] ? e.touches[0].clientX : e.changedTouches ? e.changedTouches[0].pageX : null : null;
  var y = e.touches ? e.touches[0] ? e.touches[0].clientY : e.changedTouches ? e.changedTouches[0].pageY : null : null;

  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%);
}

.divbar1 {
  width: 10px;
  height: 100px;
  background-color: #f9398a;
  position: relative;
}

.divcircle {
  z-index: 100;
  border-radius: 15px;
  position: absolute;
  top: 46%;
  width: 30px;
  height: 30px;
  background-color: white;
  margin-left: -10px;
}

.divbar2 {
  width: 10px;
  height: 100px;
  background-color: #1bc5fd;
  position: relative;
  margin-top: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<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="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3">
                                </audio>
        </div>

        <div style="width:10px;" class="">

          <div class="divbar1"></div>
          <div class="divcircle"></div>
          <div class="divbar2"></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>
css

1条答案

按热度按时间
wnrlj8wa

wnrlj8wa1#

你可以设置一个大于360度的Angular ，它会很高兴地旋转那么多度。只要记住你使用的值，这样你就可以为正确的CSS属性设置正确的Angular 。
下面的代码段将在每次单击“go”时保持div在0到900度之间旋转，并且在任何点都不会应用该Angular “模360”：

go.addEventListener(`click`, () => {
  const { style } = box;
  const deg = parseFloat(style.getPropertyValue(`--deg`) || 0);
  const update = (Math.random() * 900)|0;
  style.setProperty(`--update`, update);
  style.setProperty(`--deg`, deg + 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 id="box"></div>
<button id="go">go</button>
<span id="degrees"></span>
赞(0）分享  回复(0）举报  2023-03-20
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com