Когда вы создаете анимацию с помощью кода, вы можете столкнуться с пропусками кадров или мерцанием изображения. Эта история призвана объяснить вам, почему это происходит и кто за это отвечает.

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

Рамка.

Википедия дает довольно короткие и понятные определения разным вещам, поэтому пользуюсь ею с большим удовольствием. Итак, что это говорит о кадре?

В кинопроизводстве, видеопроизводстве, анимации и смежных областях кадр – это одно из множества неподвижных изображений, составляющих полное движущееся изображение. Этот термин происходит от того факта, что с зарождения современного кинопроизводства до конца 20-го века, а во многих местах и ​​до настоящего времени отдельные изображения записывались на полосу фотопленки, которая быстро увеличивалась в длину. , исторически; каждое изображение на такой полосе выглядит скорее как картинка в рамке, если рассматривать ее по отдельности.

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

Частота кадров.

Я не буду придумывать определение для частоты кадров, поэтому давайте еще раз посмотрим, что говорит Википедия.

Частота кадров (выраженная в кадрах в секунду или FPS) — это частота (скорость), с которой на дисплее появляются последовательные изображения, называемые кадрами. Этот термин в равной степени относится к кино- и видеокамерам, компьютерной графике и системам захвата движения. Частота кадров также может называться частотой кадров и выражаться в герцах.

Мне нечего добавить.

Почему частота кадров так важна.

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

Интересно, что где-то существует что-то вроде двумерного массива, который содержит положение и цвет каждого пикселя. Как вы думаете, это хорошая идея изменить этот массив, пока он повторяется, чтобы отрисовывать пиксели на экране? Вероятно, это не так. Лучшее, что вы можете получить, это что-то вроде двух перепутанных картинок.

Чтобы уменьшить эту проблему, используется шаблон двойного буфера. Основная идея шаблона заключается в предоставлении двух массивов, содержащих данные. Один массив доступен для операции «записи» (буфер холста), другой — для «чтения» (буфер отображения). В какой-то момент эти буферы меняются местами (буфер холста становится буфером отображения и наоборот). Довольно просто? Да, это. В нашем случае многочисленные передовые графические алгоритмы устанавливают значения в буфере холста для подготовки следующего кадра, в то время как видеодрайвер одновременно получает значения из буфера дисплея (текущего кадра) для отправки их на видеодисплей. Можем ли мы назвать количество операций подкачки в секунду частотой кадров? Согласно приведенному выше определению, мы можем. Но еще интереснее то, что эта частота кадров равна 1/60, 2/60, 3/60 и т. д. секунды и применяется к нашему видеодисплею независимо от нашего кода. Что я имею в виду. Просто представьте, что у нас есть код, который рисует прямоугольник и закрашивает его красным или зеленым цветом по очереди. Можете быть уверены, этот код будет выполняться невероятно быстро. Возьмем, к примеру, это время за 1 миллисекунду. Если мы добавим код в цикл, как часто в нашей программе будут отрисовываться прямоугольники? Простой расчет показывает, что 1 секунда, разделенная на 1 миллисекунду, равна 1000. 1000 раз в секунду наш код будет устанавливать значения в буфер холста, и только 1/60, 2/60, 3/60 и т. д. секунды будет отображаться прямоугольник на экране. Кто знает, какого цвета будет прямоугольник? Я не. Все, что я могу сказать, это то, что около 16–17 кадров, созданных кодом, были пропущены.

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

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

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

Вывод

Пропуски кадров и мерцание изображения имеют простую природу происхождения. Знание этой природы помогает нам избежать их и дает нам возможность создавать плавную и красивую графику. Лучший способ сделать это — использовать графический движок или встроенные функции целевой платформы.

Спасибо за чтение. Надеюсь, вам понравилась эта история. С уважением, Алекс.