Ошибка Waapi, использующая пользовательский график в Chrome - PullRequest
Новая
       55

Ошибка Waapi, использующая пользовательский график в Chrome

0 голосов
/ 23 сентября 2019

Введение

TLDR: https://codesandbox.io/s/elated-jennings-6budz. Почему красный цвет не совпадает с синим в хроме ?Это ошибка?

Im с использованием Chrome версия: 76.0.3809.132.В Firefox все работает как положено.

Вопрос

Я использую waapi для реализации анимации, основанной на пользовательской временной шкале (например, позиция прокрутки в качестве временной шкалы).Концепция заключается в следующем:

Waapi позволяет запустить анимацию на полпути, установив параметр iterationStart где-то между 0 и 1 (при условии, что анимация имеет только одну итерацию).Когда анимация сразу же останавливается, мы получаем запрошенный кадр.При поступлении следующего импульса мы перезаписываем последний кадр.

Поэтому, когда мы получаем ввод, скажем, 0,5, мы будем использовать следующий код: 

//           test keyframes
elem.animate({marginLeft: ["0px", "600px"]}, {
  duration: 100, 
  easing: "linear",
  fill: "both", 
  iterations: 1, 
  iterationStart: 0.5 // input
}).pause()

Это работает отлично, дажес тем, как мы устанавливаем такой кадр каждые 1/60 сек.Проблема, однако, возникает, поскольку мы хотим облегчить анимирование (например, easing: "ease", а не linear).Это вводит странные блики, когда анимация прыгает с одинаковым прогрессом каждый раз (progress = iterationSatrt / input).Например, первый прыжок - 0.148 с использованием ease в качестве функции замедления.Может кто-нибудь объяснить это поведение?Это ошибка?

Я наткнулся на следующую взаимосвязь.0.148 * 2 ослаблено с помощью функции ease чуть более 0.5.Для расчета я использую библиотеку bezier-easing.Вот пример: https://runkit.com/embed/1wetjf7jjb2s. Я не знаю, насколько это вообще актуально, но я подумал, что поделюсь своими выводами.

Здесь ссылка на код и окно, показывающая проблему: https://codesandbox.io/s/elated-jennings-6budz. Обратите внимание нане позволяйте этому работать слишком долго за один раз без перезагрузки.

Синий div использует исправление, чтобы показать ожидаемый результат.Для этого я сохранил easeing: "linear", но настраивал каждый вход с помощью библиотеки bezier-easing, как показано выше (и в коде).

...