Как я могу использовать JavaScript, чтобы выяснить, не слишком ли медленная анимация, и вместо этого использовать мгновенные изменения?

Question

У меня есть веб-страница, которая использует анимацию javascript + css. На многих компьютерах это работает очень хорошо, но на некоторых более медленных системах (таких как планшеты) это может быть ужасно. В этих случаях я хочу изящно перейти к простому перемещению объектов в их конечное положение мгновенно без анимации. Моя проблема в том, что:

1. Я не хочу заставлять пользователя делать выбор (я хочу выяснить, будет ли анимация слишком медленной программно)

2. Я не хочу, чтобы они страдали от 5-10 секунд супер медленной анимации, пока мой код пытается выяснить FPS анимации javascript. Вместо этого я хочу быстрый способ выяснить это.

Это вообще возможно? Или мне нужно запустить анимацию в течение 3-5 секунд, чтобы выяснить, хорошо ли она работает в их системе? (Проверка его в течение 1 секунды или менее означает, что икота в их системе будет некорректно убивать анимацию)

Все, что я до сих пор придумал, это что-то вроде этого (псевдокод):

Создание анимации

//Total number of steps in our animation (This is calculated normally)
var totalSteps = 20;

//Amount of time between each setInterval/setTimeout
var delay = 20; //milliseconds

//Total expected time to animate entire process
var expectedDuration = dealy * totalSteps;

//Our starting time
var startTime = new Date().getTime();

/*** Start the animation ***/
startAnimation(...);

На заключительном этапе анимации

//Current time
var endTime = new Date().getTime();

//Actual time it took
var actualDuration = endTime - startTime;

//Check difference in expected time vs actual time
var diff = actualDuration - expectedDuration;

Проблема в том, что код заставляет меня сначала немного запустить анимацию, тем самым подвергая пользователей на медленных системах медленным, прерывистым анимациям на некоторое время.

Есть ли способ сделать это?

Answer 1

По моему опыту, медлительность всегда связана с конкретным браузером или ОС. Так что просто выясните, какие конфигурации браузера / ОС работают слишком медленно, и уменьшите количество шагов анимации только для них.

Таким образом, пользователям не нужно ждать, пока ваш код выяснит, прежде чем получить хороший опыт.

Один из способов выяснить, какие браузеры / ОС работают медленно, - это использовать Google Analytics (или любой другой API отслеживания) и отслеживать событие при запуске анимации, а затем другой, когда анимация заканчивается. Затем вы можете легко рассчитать среднее время выполнения анимации для каждой конфигурации и действовать соответственно.

Answer 2

Мое предложение будет следующим:

1) Используйте функцию анимации, которая запускается в течение фиксированного времени и регулирует размер шага в соответствии с тем, насколько быстро выполняется каждый шаг.Это НИКОГДА не подвергает пользователя длительной анимации, которая занимает больше времени, чем предполагалось.Это может быть изменчивым, но это не будет медленным, чтобы закончить.Общая идея этого типа алгоритма анимации состоит в том, что вы устанавливаете общее время анимации, рассчитываете ожидаемое количество шагов.Вы начинаете выполнять каждый шаг, но на каждом шаге вы проверяете истекшее время, чтобы увидеть, отстаете ли вы от графика.Если вы отстаете от графика (потому что хост-компьютер работает слишком медленно), вы перепрыгиваете на сумму, необходимую для того, чтобы вы вернулись к расписанию.Этот скачок вперед делает анимацию более плавной, чем хотелось бы, но держит вас по графику.Все библиотеки анимации, которые я видел как jQuery и YUI, работают таким образом.

2) В каждой из первых нескольких анимаций (выполненных способом выше) накапливайте stepCnt, который сообщает вам, сколько шагов было выполнено в каждоманимация в фиксированное время.

3) Из некоторого опыта запуска анимации на быстрых и медленных устройствах выясните, какое значение stepCnt означает производительность, достаточно медленную, чтобы ваш пользовательский интерфейс был лучше без анимации вообще.

4) Сделайте свой код адаптивным.Если после первых нескольких анимаций из шага 2) вы увидите, что stepCnt ниже вашего порога (который вы определили в шаге 3), тогда установите глобальный флаг, который вы хотите пропустить, чтобы все будущие анимации просто переходили прямо вконечное состояние.