Одной из интересных возможностей графического пакета Canvas является возможность манипулировать с картинками, что позволяет делать фасонные фото-шоу, хотя возможности управлять процессом не столь велики. В данной анимации реализована иллюзия трехмерного движения в космосе из бесконечности на зрителя по 6 направлениям. Я покажу весь код пробного сайта, который реально стоит в интернете, но каждый может скопировать код в свой файл и запустить на компьютере даже без интернета. Однако для этого файл надо настроить под себя. Вот об этом я в основном и хочу говорить. Но сначала код. Если кому неудобно смотреть код без подсветки синтаксиса, то он может скопировать его в любой редактор с подсветкой синтаксиса и смотреть в окне редакторе. Итак, код:
Как легко заметить тело сайта предельно простое, а именно, есть тег canvas, который помещен внутрь тега ссылки, а тот внутрь тега div. Ссылка полезна для того, чтобы при клике на анимацию запустить сайт, на котором те же картинки показываются в более привычном виде и могут также быть использованы для ссылок на сайты. А внешний тег div просто резервирует область и в принципе в этой области можно поместить и другие объекты, связанные с анимацией, причем даже наложить на анимацию. В моем примере ничего больше нет. Первое, что можно поменять -- это адрес ссылки. Еще важно отметить, что параметры (атрибуты) тега canvas надо выписывать в явном виде. Их нельзя определять через CSS. Точнее можно, но тогда анимация получается совсем другой.
Итак, второе, что можно поменять -- это размеры области анимации. CSS форматиование в теге style достаточно простое и я даже не буду это объяснять. Кто знает CSS может сам поменять рамку и размер верхнего отступа, остальное менять не стоит. Так что перейдем сразу к javascript кодам. Функция $ -- это просто переобозначение другой функции с более длинным названием. Если на сайте много указаний на js файлы, то такое переобозначение надо вводить только в первом из них. Дело в том, что javascript однопотоковый язык и всегда выполняет только одну программу -- весь код. А имена глобальных переменных и функций не должны повторяться и переопределяться из-за возможности конфликтов, то есть влияния одного кода на другой. Я уже писал об этом в самом начале этого раздела.
А вторая функция movpic -- как раз выполняет все, что требуется для данной анимации. Чтобы не было конфликтов все переменные, используемые в данной функции надо объявить оператором var. Тогда они не смогут переопределить глобальные переменные с таким же названием в других функциях. Далее мы определяем элемент с id=canv и записываем значения его параметров width и height в переменные sw и sh. Это те самые ширина и высота, которые указаны в теге canvas. Затем эти же значения автоматически указываются как ширина и высота внешней области div.
Затем в переменных wi и hi мы определяем размеры картинок из расчета иметь матрицу 3*2 картинки на всю область. Это как раз 6 направлений. Реальные размеры картинок могут быть любыми, но лучше если они будут соответствовать данным размерам. Так для области 600*300 картинки должны иметь размер 200*150. Если они будут больше, то это просто замедлит работу по их масштабированию, а если меньше, то при увеличении потеряется разрешение.Следующие параметры также можно не трогать, они оптимизированы на определенный процесс. Если их поменять будет другой процесс, то есть другая скорость движения и другой порядок на временной оси.
Далее объявляются массивы и затем перечислением задается массив с названиями файлов всех картинок. Их может быть произвольное число. В моем случае предполагается, что все картинки помещены в одной папке, поэтому адрес папки потом прибавляется для получения полного адреса. Если это не так, то нужно вместо имени файлов указывать полный путь к файлу и ничего не прибавлять потом. Остальные параметры все оптимизированы и их менять не стоит. Важной операцией является передача в переменную c графического листа тега Canvas. Это стандартная операция и ее всегда надо делать перед рисованием.
Внутри нашей главной функции есть две локальные функции, первая init выполняет начальную установку, ее можно было и не делать, а все определить простым кодом. Это сделано скорее для удобства чтения кода. В этой функции определяются объекты всех картинок как элементы массива, а в качестве адресов картинок ставится строка, состоящая из полного адреса папки, в которой находятся картинки и имен файлов, определенных заранее. Очевидно, что имя папки можно менять при использовании кода на в своем сайте. Затем тут же задаются начальные координаты для всех картинок и определяется фоновая космическая картинка. Ее можно не менять и брать прямо с моего сайта. А если захочется поменять, то надо записать свою и указать ее адрес или указать адрес другой чужой картинки.
Следующая функция render как раз и выполняет анимацию. Но тут менять уже ничего не нужно. После этого запускаются внутренние функции, а затем и внешняя. Еще раз напомню, что значения параметров id всех тегов должны быть уникальными и согласованными. Так что если на сайте есть еще теги с такими же значениями параметров id, то какие-то их двух надо переопределить. Если захочется кардинально поменять процесс анимации, то не советую это делать тем, кто плохо знает javascript.
В данном случае сделано так, что все картинки выставлены в ряд на временной шкале, первые самые далекие (поздние), последние самые близкие (раньше). Это не совсем правильно по смыслу, но не столь важно. И они все двигаются в сторону приближения по определенному закону. Когда точка на временной шкале для какой-то картинки достигает определенного низкого предела, то она отбрасывается назад в прошлое на самое далекое расстояние и снова начинает свой путь. Но при этом видность картинок не согласована с их точкой на временной оси, а определяется просто начальным процессом расстановки картинок. В результате маленькие (далекие) картинки могут быть видны на фоне больших (близких). Я не стал исправлять этот недостаток просто по той причине, что пусть лучше маленькие тоже будут видны. Они большие почти не закрывают. Это не совсем соответствует реальности, тем не менее даже интереснее.
Автор: Виктор Кон, перейти На главную