如何切断jQuery动画的开始？ [英] How to cut off the start of a jquery animation?

问题描述

别对我好难，这是我第一次发帖。

Don't be hard on me, it's my first time posting.

我目前正在研究命运之轮，该命运之轮与每个连接的设备同步通过node.js和websockets。但是我想切断动画的开始，当用户在轮子已经旋转的情况下加入时，因此它只显示动画的最后几秒钟而不改变其缓动性。

I'm currently working on a wheel of fortune, which is synchronized to each connected device via node.js and websockets. However I want to cut off the start of the animation, when a user joins while the wheel is spinning already, so it would only show the last seconds of the animation without changing it's easing.

jquery动画由一个简单的步进动画组成，该动画会旋转轮子。我已经尝试过更改步骤 fx对象的参数，例如fx.start或fx.pos。尽管fx.start只是动画开始的变量，例如180度，而fx.pos只是一种输出参数，可以将某些内容更改为动画中的给定时间，例如文本颜色或其他内容。但是不能更改fx.pos的值，也不能更改当前设置动画的位置。我创建了一个函数，使命运之轮旋转两次，然后以给定的角度停止。

The jquery animation is made of a simple step animation, which rotates the wheel around. I already tried to change the parameters of the step's 'fx' object like fx.start or fx.pos. While fx.start only being the variable at which point the animation started, for example 180 degrees and fx.pos is only a sort of output parameter to change something to a given time in the animation, like a text color or something. However the fx.pos value can't be changed nor changes the position the animation is currently set in. I created a function to rotate the wheel of fortune two times and then it stops at a given degree.

我也尝试更改了缓动，因此它是50％线性，50％摆动，但这使动画看起来很杂乱，因为起初它以恒定的速度旋转，然后突然旋转得更快

Also I tried to change the easing, so it would be 50% linear, 50% swing, but this makes the animation look trashy, since at first it's spins at a constant speed and suddenly it spins faster than slower.

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秒钟。

If the duration would be less then 10 seconds the start of the animation would be cut off. So, if the server spun the wheel about 5 seconds ago the first 5 seconds of my animation should be cut off.

推荐答案

捕获在任何时间点上进行动画缓动旋转

• 线性动画 t 从 0 到 1 ，或从 0.N 到 1.0 （如果玩家在10个最大值中的第6秒加入，则为0.6） $（{t：t}）。 animate（{t：1}，


• 轻松！在任何给定的现在时间点，将当前的0.0-1.0时间范围（ t_now 值）到使用自定义宽松函数的相应的 e_now 值


• 将宽松的 e_now 结果乘以所需的 end -度数



Catch-up an easing animation rotation at any point in time

• Animate linearly t from 0 to 1, or from 0.N to 1.0 ( 0.6 if a player joined at the 6th second out of 10 max) $({t: t}).animate({t: 1},
• Ease! At any given "now"-point-in-time, convert the current 0.0-1.0 time range (t_now value) to the respective easing e_now value using a custom easing function
• Multiply the easing e_now result by the desired end-degrees number

代替使用 swing 使用线性 ，然后控制放宽和投放时间具有自定义缓动功能（您可以在在线中找到许多缓动片段a>）。假设我们喜欢 easeInOutSine ：

Instead of using "swing" use "linear" and let's take control over the easing and timing with a custom easing function (you can find many easing snippets online). Say we like the easeInOutSine:

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





示例





示例有4个人，一个旋转轮子，另一个在初始旋转开始后的 后的第二，4.5和8.7秒 ：

Example

Example with 4 persons, one spinning the wheel, and other joining the show at 2, 4.5 and 8.7 seconds after the initial spin started:

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>

在上面的示例中，最后，您可以注意到（除了一些奇怪的光学错觉），车轮被抓住了在任何时间点以正确的旋转状态 velocity 旋转，并且都以相同的缓动同时完成，并且精确地预定义了 deg_end 度。

In the example above, finally, you can notice (besides some weird optical illusion) that the wheels catch-up at any point in time with the correct rotation state, velocity, and all finish at the same time with the same easing, at the exact predefined deg_end degree.

这篇关于如何切断jQuery动画的开始？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！