I want to rotate in the positive direction, but can't I click a button to rotate in the opposite direction?

[bbhxwl]

I want to rotate in the positive direction, but can't I click a button to rotate in the opposite direction?

let initTween=()=>{
  if(tween&&tween.isPlaying()){
    tween.stop();
  }
  const targetAngle = direction === 1 ? 360 : 0;
  if ((rotation.angle >= 360 && direction === 1) || (rotation.angle <= 0 && direction === -1)) {
    rotation.angle = rotation.angle % 360;
  }
  console.log(rotation)
  tween = new TWEEN.Tween(rotation)
      .to({ angle: targetAngle }, props.rotateTime)
      .onUpdate((item) => {
        if (divRotate.value) {
          divRotate.value.style.transform = `rotateY(${item.angle}deg)`;
        }
      })
      .repeat(Infinity) 
      .easing(TWEEN.Easing.Linear.None) 
      .start(); 
}

[bbhxwl]

Will the page jump?

let initTween=()=>{
  if(tween&&tween.isPlaying()){
    tween.stop();
  }
  // 计算基于当前方向的目标角度
  const targetAngle = direction === 1 ? 360 : 0;
  // 如果当前角度接近360并且方向为1，或者当前角度接近0并且方向为-1，重置角度以避免跳跃
  if (direction === 1) {
    rotation.angle = 0
  }
  else{
    rotation.angle = 360
  }
  console.log(rotation)
  // 根据当前角度和目标角度重新初始化Tween
  tween = new TWEEN.Tween(rotation)
      .to({ angle: targetAngle }, props.rotateTime)
      .onUpdate((item,t) => {
        if (divRotate.value) {
          time=t
          divRotate.value.style.transform = `rotateY(${item.angle}deg)`;
        }
      })
      .repeat(Infinity) // 无限重复
      .easing(TWEEN.Easing.Linear.None) // 线性缓动
      .start(props.rotateTime -(time*props.rotateTime)); // 使用当前角度计算动画开始时间
}

[Joe Pea]

I see you solved your first problem. Now I'm not sure what your second question is. It is better if you post a working example, and describe what it is not doing, and what you want it to do.

[bbhxwl]

I see you solved your first problem. Now I'm not sure what your second question is. It is better if you post a working example, and describe what it is not doing, and what you want it to do.

My current problem is that I want to rotate in a loop from 0 to 360 degrees. When I click on it, I change the direction of rotation from 360 degrees to 0 degrees. If I change the jump, it will jump

[Joe Pea]

You might be better off not using Tween for that specific goal.

let angle = 0
let lastTime = performance.now()

requestAnimationFrame(function loop(time) {
  const delta = time - last time
  lastTime = time
  angle = angle + delta / props.rotateTime * 360 * direction

  divRotate.value?.style.transform = `rotateY(${angle}deg)`

  requestAnimationFrame(loop)
})

I recommend that approach for this use case, much simpler!

Closing, but feel to ask any more questions. :)

[bbhxwl]

You might be better off not using Tween for that specific goal.

let angle = 0
let lastTime = performance.now()

requestAnimationFrame(function loop(time) {
  const delta = time - last time
  lastTime = time
  angle = angle + delta / props.rotateTime * 360 * direction

  divRotate.value?.style.transform = `rotateY(${angle}deg)`

  requestAnimationFrame(loop)
})

I recommend that approach for this use case, much simpler!

Closing, but feel to ask any more questions. :)

Thank you, I think it's complicated. Sorry.