Как отрезать начало анимации jquery? - PullRequest
Новая
       52

Как отрезать начало анимации jquery?

2 голосов
/ 11 ноября 2019

Не беспокойтесь обо мне, это мой первый пост.

В настоящее время я работаю над колесом фортуны, которое синхронизируется с каждым подключенным устройством через 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 секунд моей анимации должны быть отключены.

1 Ответ

0 голосов
/ 11 ноября 2019

Достигните замедления вращения анимации в любой момент времени

  • Анимируйте линейно t от 0 до 1 или от 0.N до1.0 (0,6, если игрок присоединился на 6-й секунде из 10 макс.) $({t: t}).animate({t: 1},
  • Легкость! В любой момент времени «сейчас» конвертируйтетекущий диапазон времени 0,0-1,0 (t_now значение) до соответствующего значения e_now замедления с использованием пользовательской функции
  • Умножьте результат e_now умножения на желаемый end -degrees number

Вместо использования "swing" используйте "linear" и , давайте возьмем контроль над замедлением и временем с пользовательской функцией замедления (вы можете найти множество фрагментов замедления онлайн ). Скажем, нам нравится easeInOutSine: 

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

Пример

Пример с 4 людьми, один крутит колесо, а другой присоединяется к шоу в 2, 4,5 и8,7 секунд после начался начальный отжим : 

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>

В приведенном выше примере, наконец, вы можете заметить (помимо некоторого странного оптического обмана), что колеса в любой момент времени догоняютправильное состояние вращения, скорость , и все заканчиваются в одно и то же время с одинаковым ослаблением, с точно заданным deg_end градусом.

...