Ох и намучался же я с этим Explode.js
Разрезал картинку на NxN кусков, встал вопрос - каждый кусок надо анимировать в определённом направлении, как придумать алгоритм? Дано: координаты i, j и кол-во ячеек NxN.
Сначала была идея вычислять направление (0 - вверх, 1 - вверх и вправо, 2 - вправо и т.д. по часовой стрелке). Но было очень много повторяющегося кода, да и если поставить N > 5, то всё вычислялось неправильно. Подумал даже формировать двумерный массив из нулей, задавать элементу (i, j) единицу и искать его рекурсивным спуском (напр. из массива 5х5 делать 4х4, потом 3х3 и т.д., отрезая по одному слою). Тогда крайние элементы - это диагональное направление (например, i=0 - это вверх и влево, i=N-1 - вверх и вправо), а промежуточные - это обычное направление (например, 0<i<N-1 && j>0 - это вверх). Но это было тоже слишком сложно.
Тогда додумался делать через векторы.
|
Код:
|
vY = (N - 1) / 2 - i
vX = j - (N - 1) / 2 |
Таким образом, при N=7 у левой верхней ячейки будет вектор (3, -3), у верхней правой - (3, 3), а у центральной - (0, 0).
Дело осталось за малым: анимировать ячейки с учётом векторов.
Вычисляем конечные значения. Например, левую верхнюю ячейку двигаем на 150 пикселей вверх и столько же влево. (fromY, fromX - начальное положение ячейки)
|
Код:
|
toY = fromY - 50 * vY
toX = fromX + 50 * vX |
Анимируем по стандартной формуле.
|
Код:
|
top = fromY + (toY - fromY) * m
left = fromX + (toX - fromX) * m
opacity = 1 - m |
где m - прогресс анимации (число от 0 до 1).
-----
Конечно же, в реальности пришлось не так легко.
Изначально я правильно посчитал все формулы, но по невнимательности перепутал местами аргументы в функции для анимирования ячеек (в коде
Explode.animate()). Вместо fromX подавал fromY и наоборот. В результате ячейки не разлетались, а скручивались в непонятную спираль. Я начал искать проблему в коде Explode.animate, хотя ошибка была в вызове, который находится внутри Explode(). Пробовал и так, и сяк, уже не руководствуясь логикой просто наугад менял плюсы на минусы, умножить на разделить и т.д. В порядке бреда поменял местами vX и vY, и о чудо - стало получаться нечто похожее на то, чего я добиваюсь. Но я в остальных формулах уже такого накрутил, что анимация всё равно получалась неправильная. То сдвиг непонятно куда, то ячейки разбрасывает в 2 раза больше, чем надо (в смысле, при начале анимации между ячейками пробелы, выглядит не очень красиво). Потому что я высчитывал left по vY, а top по vX.
Подумал, что конфликт итераторов, т.е. при вызове функции i и j уже равны n-1. Попробовал закешировать значения, присвоив каждой ячейке tile.cashTop, tile.cashLeft и tile.cashDirection. Закешированные значения я подал уже в правильном порядке, т.е. fromX как cashLeft и fromY как cashTop. А в коде Explode.animate переменные vX и vY были поменяны местами (в порядке бреда, абзацем выше), о чём я благополучно забыл. Ячейки опять стало крутить в спираль, и тут моя реальность просто сломалась. Бросил всё это дело, перевёл мысли, потом сел снова, убрал кеширование (и опять случайно поменял местами fromX и fromY в вызове!!!) заново провёл все расчёты, проверил все параметры алертами, нашёл ошибку и наконец-то всё заработало.
Главное, изначально всё было посчитано верно, но из-за перепутанных параметров я сидел с этими формулами часа два. Такой майндфак на ровном месте.
-----
Напомнило мне один случай, не связанный с кодингом.
Был у меня телефон на две симки, одна МТС и другая Билайн - новая, т.е. свой номер ещё не успел запомнить.
Важно, что на МТС денег не было, только на билайне.
От скуки решил посмотреть, что будет, если с одной симки позвонить себе на другую. Позвонил - занято.
Через минуту
внезапно на МТС-овскую симку доходит звонок с билайна. Однако свой билайновский номер я не знал наизусть, поэтому решил, что это по работе (как раз искал работу тогда и оставлял этот номер). Звонок же сбросился через секунду (странно, что он вообще дошёл, причём через минуту), а я в тот момент как раз ковырялся в телефоне и подумал, что случайно сбросил вызов. Звонок мог быть важным, ведь вдруг это по поводу трудоустройства. И я начал с билайновской симки названивать на свой же номер, не зная, что он мой. Было всё время занято, однако после каждой попытки дозвониться приходила СМС "Этот абонент вновь в сети", но каждый раз когда я звонил было естественно занято. Что ещё более странное, приходила также СМС "Этот абонент пытался с вами связаться +7963...", хотя это
я вообще-то пытаюсь с ним связаться. Звоню сам себе уже двадцатый раз, всё одно и то же - приходит смс "абонент в сети", звоню снова - опять занято. У меня начинается истерика. Сходил, положил деньги на МТС, попробовал перезвонить с неё. Опять занято. Реальность начинает ломаться. Что это, сбои в матрице? Архитектор перезагружает лимб? Тут я внимательно вгляделся в билайновский номер. Мне кажется, я где-то его недавно видел. Мельком, прочёл один раз и забыл. Достаю из кармана куртки контейнер от билайновской симки (или хз как он там называется, ну такая пластиковая карта откуда выковыриваешь симку при покупке) - и понимаю, что я уже полчаса пытаюсь дозвониться сам до себя.
