Почему рисование анимированного GIF-изображения на холсте обновляется только после повторного выбора вкладки? - PullRequest
Новая
       43

Почему рисование анимированного GIF-изображения на холсте обновляется только после повторного выбора вкладки?

2 голосов
/ 02 сентября 2011

Я хотел бы отобразить анимированный GIF на холсте с некоторыми примененными преобразованиями. Чтобы проверить вещи, я в настоящее время просто пытаюсь отобразить анимированный GIF на холсте, чтобы он по существу равнялся отображению GIF в виде обычного тега <img>.

Я использую Chrome и webkitRequestAnimationFrame. На каждый кадр запроса я рисую изображение. Когда рамка gif меняется, это должно быть отражено на холсте. Это работает только частично:

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

Это скрипка, которую я настроил: http://jsfiddle.net/eGjak/93/.

Как я могу нарисовать анимированный GIF на холсте с его анимацией ?

1 Ответ

3 голосов
/ 02 сентября 2011

Ответ больше не действителен

Похоже, что описанное здесь поведение (запись тега img со ссылкой на анимированный GIF на холст приводит к тому, что различные кадры записываемого GIF, если img является частью DOM или видимым), изменились как минимум в хроме. Там может быть или не быть документация о том, что является правильным поведением для этого. :)

Кроме того, webkitRequestAnimationFrame больше не имеет поведения принятия одного дополнительного аргумента, элемента X, такого, что, когда X не виден, запрошенная функция не будет работать. Из соображений производительности и срока службы батареи вам может потребоваться, чтобы многие функции, которые вы передаете requestAnimationFrame, проверяли на предмет видимости, прежде чем выполнять какие-либо действия, требующие рисования.

До:

Проверьте исправленную версию:

http://jsfiddle.net/eGjak/96/

Если вы добавите console.log() к функции, которая рисует изображение, вы увидите, что оно вызывается. Кажется, проблема в том, что само изображение не анимируется, возможно, потому, что браузер не пытается обновить анимированное изображение, которое не является частью DOM.

Мое решение состояло в том, чтобы сделать анимированный GIF-файл частью DOM и размером 0, и он работает просто отлично.

Вы можете убедиться, что анимация отображается на холсте, а не в теге изображения, загрузив http://jsfiddle.net/eGjak/96/show/ и проверив элементы с помощью ctrl-shift-I в Windows или Linux / alt-cmd-I .

РЕДАКТИРОВАТЬ : Вот бонус!

webkitRequestAnimationFrame принимает еще один аргумент, чем эквивалент Mozilla, чтобы ваша анимация могла запускаться только тогда, когда видимый анимируемый элемент. Проверить

http://jsfiddle.net/kmKZa/8/

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

...