如何切断jquery动画的开头？

Question

别对我苛刻，这是我第一次发帖。

我目前正在开发一个幸运之轮，它通过node.js和websockets与每个连接的设备同步。然而，我想切断动画的开始，当一个用户加入而车轮已经在旋转，所以它将只显示动画的最后几秒，而不改变它的缓和。

jquery动画是由一个简单的步骤动画制成的，它使轮子旋转。我已经尝试更改步骤的“fx”对象的参数，如fx.start或fx.pos。而fx.start只是动画开始时的变量，例如180度，而fx.pos只是一种输出参数，用于将动画中的某一特定时间改变，如文本颜色等。但是，fx.pos值不能改变，也不能改变动画当前设置的位置。我创建了一个函数，将命运之轮旋转两次，然后它在给定的度数处停止。

我也试图改变缓和，所以它将是50%线性，50%摆动，但这使动画看起来很垃圾，因为一开始它是以恒定的速度旋转，突然它旋转快而不是慢。

function spinRoulette(deg, duration = 10000) {
  deg = Math.round(deg);
  $("img.roulette").animate(
      { now: '+='+(720+deg-getRotation()) }, {
      duration: duration,
      ...
      step: function(now, fx) {
        if(now >= 360)
          now -= 360;
        $(this).css("transform", "rotate("+now+"deg)");
      }
    });
}

如果持续时间少于10秒，动画的开始将被切断。所以，如果服务器旋转轮大约5秒前，我的动画的前5秒应该被切断。

Answer 1

• 从0到1或从0.n到1.0（如果玩家在10秒内最多第6秒加入，则为0.6)$（{t:t}）。动画（{t:1},
• 轻松！在任何给定的“now”时间点，使用自定义缓解函数
将当前0.0-1.0时间范围( T_now值）转换为相应的缓解 E_now值
• 将缓解e_now结果乘以所需的结束度数

不使用“swing”而使用“linear”，让我们通过自定义的放松功能来控制放松和定时（您可以在网上找到许多放松片段）。假设我们喜欢easeInoutsine:

const easeInOutSine = t => -(Math.cos(Math.PI * t) - 1) / 2;

例：4人，一人旋转车轮，另一人在初始旋转开始后2秒、4.5秒和8.7秒加入表演：

null

const easeInOutSine = t => -(Math.cos(Math.PI * t) - 1) / 2;

function spinRoulette(sel, deg, duration = 10000) {
  const $el = $(sel);
  const maxDuration = 10000;
  const deg_end = 720 + Math.round(deg);  // 2 revolutions + server-generated degrees
  const time = maxDuration - duration;    // Start time in ms
  const t = time / maxDuration;           // Start time to 0.0-1.0 range 

  $({t: t}).animate({t: 1}, {             // Custom jQuery anim. from 0.N to 1.0
    duration: duration,
    easing: "linear",                     // We need a linear 0.0 to 1.0
    step: function(t_now) {
      const e_now = easeInOutSine(t_now); // Current easing
      const deg_now = e_now * deg_end;    // Current degrees
      $el.css({transform: `rotate(${ deg_now }deg)`});
    }
  });
}

// Person 1 spins!
spinRoulette("#r1", 45);
// Person 2 joins the room after 2s
setTimeout(() => spinRoulette('#r2', 45, 10000 - 2000), 2000);
// Person 3 joins the room after 4.5s
setTimeout(() => spinRoulette('#r3', 45, 10000 - 4500), 4500);
// Person 4 joins the room after 8.7s
setTimeout(() => spinRoulette('#r4', 45, 10000 - 8700), 8700);

img {height: 120px; display: inline-block;}

<img id="r1" src="https://i.stack.imgur.com/bScK3.png">
<img id="r2" src="https://i.stack.imgur.com/bScK3.png">
<img id="r3" src="https://i.stack.imgur.com/bScK3.png">
<img id="r4" src="https://i.stack.imgur.com/bScK3.png">

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>