主页 / 问题 / 1142114
Accepted
De.Minov
Asked:2020-06-17 16:32:38 +0800 CST2020-06-17 16:32:38 +0800 CST

向拐角方向移动

  • 772

有这样的代码

let wW = $(window).width(),
    wH = $(window).height(),
    mS = 50; // длина "движения" блока (px)
    
function Start() {
  let pX = Math.floor(Math.random() * wW),
      pY = Math.floor(Math.random() * wH),
      dR = Math.floor(Math.random() * 360);
  
  $('.el').css({
    'left': pX+'px',
    'top': pY+'px',
    'transform': `rotate(${dR}deg)`
  });
  
} Start();
.el {
  width: 20px;
  height: 20px;
  background: red;
  position: fixed;
}

.el::after {
  content: '';
  display: block;
  width: 2px;
  height: 10px;
  background: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="el"></div>

此代码设置元素的随机位置和旋转角度。

问题是：

mS如何使块相对于给定方向（变量）移动第 n 个像素（变量dR）？

javascript

2 个回答

  1. 您可以在 CSS 中添加多个转换。例如，transfom: translateX(10px) rotate(10deg) translateY(5px);- 将依次执行转换。

    我将举一个相当笨拙的例子，然后是这样的：

    let wW = $(window).width(),
  wH = $(window).height(),
  mS = 50; // длина "движения" блока (px)

function Start() {
  // Тут я исправил чтоб квадрат не спавнился близко к краям
  let pX = 100 + Math.floor(Math.random() * (wW - 200)),
    pY = 100 + Math.floor(Math.random() * (wH - 200)),
    dR = Math.floor(Math.random() * 360);

  $('.el').css({
    'left': pX + 'px',
    'top': pY + 'px',
    'transform': `rotate(${dR}deg)`
  });

  setTimeout(() => {
    $('.el').css({
      'transform': `rotate(${dR}deg) translateY(${mS}px)`
    });
  }, 1000);

  setTimeout(() => {
    $('.el').css({
      'transform': `rotate(${dR}deg) translateY(${mS}px) rotate(90deg)`
    });
  }, 2000);

  setTimeout(() => {
    $('.el').css({
      'transform': `rotate(${dR}deg) translateY(${mS}px) rotate(90deg) translateY(${mS}px)`
    });
  }, 3000);

}
Start();
    .el {
  width: 20px;
  height: 20px;
  background: red;
  position: fixed;
  transition: transform 0.5s;
}

.el::after {
  content: '';
  display: block;
  width: 2px;
  height: 10px;
  background: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="el"></div>

    • 1
  2. Best Answer

    如果你只需要做一次动作，那么你可以不循环。并且要小心中间的破折号，因为它我坐了 20 分钟，却不明白为什么正方形不会那样旋转）

    const angle = Math.random() * Math.PI*2
const dist = 100
el.style.setProperty('--rz', angle + 'rad')


const x = Math.cos(angle) * dist
const y = Math.sin(angle) * dist

setTimeout(() => {
  el.style.setProperty('--tx', x + 'px')
  el.style.setProperty('--ty', y + 'px')
}, 0)
    #el {
  width: 20px;
  height: 20px;
  background: red;
  position: fixed;
  top: 50%;
  left: 50%;
  transition: 1s;
  transform: translate(var(--tx), var(--ty)) rotate(var(--rz));
}

#el::after {
  content: '';
  display: block;
  width: 10px;
  height: 2px;
  background: black;
  position: absolute;
  right: 0%;
  top: 50%;
  transform: translate(0, -50%);
}
    <div id="el" style="--rz: 0deg; --tx: 0px; --ty: 0px"></div>

    • 1

相关问题