Анимация цвета фона для перехода между цветами в элементе html приводит к 100% загрузке процессора

Question

Я пытаюсь создать эффект, при котором маленькие точки на html-фоне постепенно меняют цвет в бесконечном цикле. У меня дизайн по центру 960px, поэтому фоновая область может стать довольно большой.

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

Затем я использовал библиотеку jQuery UI для анимации изменяющегося цвета фона:

  $("#root")   
      .animate({fontSize:"1em"},pause)          
      .animate( { backgroundColor: 'blue' }, transition)
      .animate({fontSize:"1em"},pause)      
      .animate( { backgroundColor: 'darkred' },transition);

Это работает, но есть большая проблема!

В течение периода, когда backgroundColor переходит, использование моего ЦП (firefox) достигает 100%.

так

Это решение вы бы использовали?

Если есть идеи как разобраться в загрузке процессора?

Кроме того, как вы зацикливаете анимацию?

Answer 1

Вместо использования jquery, возможно, стоит подумать о замене точечного фона анимированными GIF-файлами или PNG-файлами?

Answer 2

Я нашел эту статью, в которой есть отличное решение:

текст ссылки

Использует setInterval (), который вызывает функцию несколько раз.

Answer 3

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

Если ваша анимация происходит медленно, вместо одного вызова .animate (), чтобы перейти от «синего» к «затемненному», попробуйте использовать таймер, чтобы анимация происходила с небольшими приращениями (каждые 100 мс или около того).

Или используйте анимированный GIF, как предложено выше. Это избавит вас от многих хлопот.