От нечего делать накидал в очередной раз визуализацию того самого зеленого кода из фильма Матрица на javascript. Столкнулся с проблемой тормозов в виду того, что для получения анимации кода аналогичной анимации из фильма нужно анимировать большое количество элементов сразу. В основном потому, что происходит изменение прозрачности затухающих символов. Писал в полседьмого утра в частичном анабиозе, о тормозах не думал. Пришел в себя днем — задумался. Итого:
Демо (лучше смотреть в хроме):
oops.da.am/matrix.html (картинка сверху — скрин демы)
Что нужно получить:
Вдвое сжатые по ширине и развернутые слева-направо символы катаканы.
Падающие меняющиеся свето-зеленые символы, отпечатывающие себя каждый раз переходя на строку вниз.
Затухание уже отпечатанных темно-зеленых символов.
Переодическая смена небольшого процента темно-зеленых символов (так в фильме было на сколько я помню).
Работу скрипта на полный экран с минимальными тормозами.
Что есть:
Все перечисленное выше + дикие тормоза, по причине которых окно анимации пришлось в демке сделать небольшим.
Более менее приличная работа демки в хроме.
Что пробовал:
requestAnimationFrame — 0 эффекта
Работать не с символами обработанными css3, а с готовыми картинками — тормоза те же
Скрывать элементы потухших символов в dom — очень слабо помогло
Думал, но пока не пробовал вместо изменения прозрачности изменять цвет, но думаю выигрыш будет небольшой
Сопсно вопросы:
Как убрать тормоза, на чем можно реализовать (из веб приблуд типа канваса и свг) для более быстрой работы анимации, ну и что добавить для большего соответствия фильму.
Зачем:
Хочу заставку себе такую на комп, существующие не нра или платные, хочу свою =)
