javascript - 如何使用 javascript 确保元素在圆上仅沿一个方向移动？

Question

好吧，我承认我的三 Angular 学真的很烂。只是为了上下文，我将从我在这里提到的问题中添加一些内容。

引用问题:https://stackoverflow.com/a/39429290/168492 .

我正在尝试构建圆形旋转导航，但遇到了麻烦。

我想要实现的目标:

.

我希望元素在您单击任何一个元素时旋转。例如，如果用户选择了元素 3，则菜单项会旋转:

.

到目前为止我能做些什么。我已经能够使用 sin 和 cos 函数在圆形图上呈现元素。当我点击任何元素时，我也能够实现圆周运动(使用引用问题中的代码 - https://stackoverflow.com/a/39429290/168492)。当我单击最后一个元素时会出现问题。它标志着整个导航向另一个方向移动，并在相反的方向做一个完整的旋转。

下面是我用来在圆圈上定位元素的代码:

const count = this.slides.length;
const increase = (Math.PI * 2) / this.slides.length;
const radius = 100;
let angle = 0;

var that = this;
this.slides = this.slides.map(function (item, i) {
  item.id = i;
  item.top = Math.sin(-Math.PI / 4 + i * increase) * radius + "px";
  item.left = Math.cos(-Math.PI / 4 + i * increase) * radius + "px";
  /* I tried adding an angle component (couldn't get it to work) */
  item.angle = Math.atan2(
    Math.sin(-Math.PI / 4 + i * increase) * radius,
    Math.cos(-Math.PI / 4 + i * increase) * radius
  );
  console.log((item.angle * 180) / Math.PI);
  return item;
});

我想要的是让导航只在一个方向上旋转。我该怎么做？

下面是点击时触发旋转的代码:

function move(e) {
  const n = buttons.indexOf(e.target);
  var item = that.slides.find((slide) => slide.id == n);
  const endAngle = (n % count) * increase;

  turn();
  function turn() {
    if (Math.abs(endAngle - angle) > 1 / 12) {
      const sign = endAngle > angle ? 1 : -1;
      angle = angle + sign / 12;
      setTimeout(turn, 20);
    } else {
      angle = endAngle;
    }
    buttons.forEach((button, i) => {
      var item = that.slides.find((slide) => slide.id == n);

      button.style.top =
        Math.sin(-Math.PI / 4 + i * increase - angle) * radius + "px";
      button.style.left =
        Math.cos(-Math.PI / 4 + i * increase - angle) * radius + "px";
    });
  }
}

我曾尝试将符号值更改为仅 1。但它会使菜单旋转到无限循环中。

完整片段:

const buttons = Array.from(document.querySelectorAll('.button'))
const count = buttons.length
const increase = Math.PI * 2 / buttons.length
const radius = 150
let angle = 0

buttons.forEach((button, i) => {
  button.style.top = Math.sin(-Math.PI / 2 + i * increase) * radius + 'px'
  button.style.left = Math.cos(-Math.PI / 2 + i * increase) * radius + 'px'
  button.addEventListener('click', move)
})

function move(e) {
  const n = buttons.indexOf(e.target)
  const endAngle = (n % count) * increase
  turn()

  function turn() {
    if (Math.abs(endAngle - angle) > 1 / 8) {
      const sign = endAngle > angle ? 1 : -1
      angle = angle + sign / 8
      setTimeout(turn, 20)
    } else {
      angle = endAngle
    }
    buttons.forEach((button, i) => {
      button.style.top = Math.sin(-Math.PI / 2 + i * increase - angle) * radius + 'px'
      button.style.left = Math.cos(-Math.PI / 2 + i * increase - angle) * radius + 'px'
    })
  }
}

html,
body {
  height: 100%;
}

.menu {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: seagreen;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 100px;
  text-align: center;
}

.center {
  width: 100px;
  height: 100px;
  background-color: goldenrod;
  border-radius: 100%;
  position: relative;
}

.button {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: pink;
  line-height: 100px;
  text-align: center;
  cursor: pointer;
}

<div class="menu">
  <div class="center">menu
    <div class="button">1</div>
    <div class="button">2</div>
    <div class="button">3</div>
    <div class="button">4</div>
    <div class="button">5</div>
  </div>
</div>

如果有人能提供帮助就太好了!

Answer 1

你不需要三 Angular 函数来解决这个问题。这只是算术。除了“圆有 360 度” 部分，您已经介绍过了。

你有一个旋转的菜单。还有一些按钮在旋转时应保持直立。将菜单的旋转放置在 CSS 变量中，并使用它来旋转整个菜单和以将按钮旋转相同的量。

为了定位按钮，使用一些辅助包装器(从中心开始的一些线，真的)，围绕中心点旋转，将按钮放在线的另一端，有效地使按钮远离菜单中心.这些助手(轴)的旋转只需要在开始时设置。一旦设置，他们就不再需要调整。它们的旋转量也需要放入一个变量中，因此按钮使用它来反向旋转相同的量。

现在，无论菜单或任何单个轴的旋转如何，按钮都会通过相同变量中的值反向旋转，始终直立。通过更改菜单旋转变量，您可以旋转整个菜单。此外，通过更改每个轴的旋转值，您可以根据需要创建奇特的打开或关闭效果。并且按钮将始终保持直立。

很明显，如果你想让整个东西动起来，移动的部分应该共享相同的 transition 属性。如果不这样做，按钮将不会一直直立。

看到它工作:

const axes = [...document.querySelectorAll('.axis')];
axes.forEach((axis, i) => {
  const angle = 360 * i / axes.length;
  axis.style.setProperty('--axis-rotation', `${angle}deg`);
})
let rotation = 0; // change it to adjust the initial position of buttons
updateMenuRotation(rotation);

function updateMenuRotation(deg) {
  document.querySelector('.menu').style
    .setProperty('--menu-rotation', `${deg}deg`);
}

function rotateMenu(steps) {
  rotation += 360 * steps / axes.length;
  updateMenuRotation(rotation);
  console.log('rotation:', rotation);
}

.menu {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  --menu-rotation: 0deg;
  transform: rotate(var(--menu-rotation));
}
.menu .center {
  transform: rotate(calc(-1 * var(--menu-rotation)));
}
.menu .axis {
  position: absolute;
  width: 100px;
  left: 100px;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transform-origin: 0 0;
  transform: rotate(var(--axis-rotation));
}
.axis > * {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 35px;
  border: 1px solid #ccc;
  transform: rotate(calc(calc(-1 * var(--axis-rotation)) - var(--menu-rotation)));
}
.menu,
.menu .center, 
.menu .axis,
.menu .axis > * {
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}

.controls {
  z-index: 1;
  position: relative;
}
.controls button {
  cursor: pointer;
}

<div class="menu">
  <div class="center">menu</div>
  <div class="axis">
    <div>1</div>
  </div>
  <div class="axis">
    <div>2</div>
  </div>
  <div class="axis">
    <div>3</div>
  </div>
  <div class="axis">
    <div>4</div>
  </div>
  <div class="axis">
    <div>5</div>
  </div>
</div>

<div class="controls">
  <button onclick="rotateMenu(1)">rotate +1</button>
  <button onclick="rotateMenu(-1)">rotate -1</button>
  <button onclick="rotateMenu(2)">rotate +2</button>
  <button onclick="rotateMenu(5)">rotate +5</button>
</div>

---

现在，据我了解您的尝试，我相信您希望在单击按钮时找到最小的菜单旋转以将该按钮置于顶部。我故意没有在上面解决这个问题，因为我认为它应该与旋转菜单特定步数的问题分开解决。

我建议你尝试自己解决。
如果你遇到困难，下面是我解决它的方法。我无法摆脱将它过于复杂化的感觉，但我也看不到进一步简化它的方法:

const axes = [...document.querySelectorAll('.axis')];
axes.forEach((axis, i) => {
  const angle = 360 * i / axes.length;
  axis.style.setProperty('--axis-rotation', `${angle}deg`);
  axis.querySelector('div').addEventListener('click', rotateToTop);
})
let rotation = -90; // change it to adjust the initial position of buttons
updateMenuRotation(rotation);

function updateMenuRotation(deg) {
  document.querySelector('.menu').style
    .setProperty('--menu-rotation', `${deg}deg`);
}

function rotateToTop(e) {
  const button = e.target;
  if (button) {
    [...document.querySelectorAll('.axis > div.active')]
      .forEach(el => el.classList.remove('active'));
    button.classList.add('active');
    rotateMenu(
      minStepsToTop(
        getRotation('axis', button),
        getRotation('menu', button), 
        axes.length
      )
    );
  }
}

function minStepsToTop(aR, mR, aL) {
  // aR => axisRotatin
  // mR => menuRotation
  // aL => axis.length
  // angle => 360 / aL
  // stepsFromMenu => (((mR + 360) % 360) + 90) / angle;
  // stepsFromAxis => Math.round(aR / angle);
  // totalSteps => Math.round((((mR + 360) % 360) + 90) + aR) / angle);
  const totalSteps = Math.round(((((mR + 360) % 360) + 90) + aR) * aL / 360);
  // console.log(totalSteps);
  // totalSteps as closest number to 0 (positive or negative)
  const maxAbsoluteSteps = Math.floor(aL / 2); // 5 => 2; 6 => 3; 7 => 3, etc...
  return -(((totalSteps + maxAbsoluteSteps + aL) % aL) - maxAbsoluteSteps);
}

function getRotation(type, target) {
  return +(getComputedStyle(target).getPropertyValue(`--${type}-rotation`).replace('deg', ''));
}

function rotateMenu(steps) {
  rotation += 360 * steps / axes.length;
  updateMenuRotation(rotation);
}

.menu {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  --menu-rotation: 0deg;
  transform: rotate(var(--menu-rotation));
}
.menu .center {
  transform: rotate(calc(-1 * var(--menu-rotation)));
}
.menu .axis {
  position: absolute;
  width: 100px;
  left: 100px;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transform-origin: 0 0;
  transform: rotate(var(--axis-rotation));
}
.axis > * {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 27px;
  border: 1px solid #ccc;
  transform: rotate(calc(calc(-1 * var(--axis-rotation)) - var(--menu-rotation)));
  cursor: pointer;
}
.axis .active {
  background-color: #212121;
  color: white;
}
.menu,
.menu .center, 
.menu .axis,
.menu .axis > * {
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}

.controls {
  z-index: 1;
  position: relative;
}
.controls button {
  cursor: pointer;
}

<div class="menu">
  <div class="center">menu</div>
  <div class="axis">
    <div class="active">1</div>
  </div>
  <div class="axis">
    <div>2</div>
  </div>
  <div class="axis">
    <div>3</div>
  </div>
  <div class="axis">
    <div>4</div>
  </div>
  <div class="axis">
    <div>5</div>
  </div>
  <div class="axis">
    <div>6</div>
  </div>
  <div class="axis">
    <div>7</div>
  </div>
</div>

应该可以使用任意数量的按钮，但我还没有尝试过。