Отпуск. Скучно.
|
Ох и намучался же я с этим 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 Дело осталось за малым: анимировать ячейки с учётом векторов. Вычисляем конечные значения. Например, левую верхнюю ячейку двигаем на 150 пикселей вверх и столько же влево. (fromY, fromX - начальное положение ячейки) Код:
toY = fromY - 50 * vY Код:
top = fromY + (toY - fromY) * m ----- Конечно же, в реальности пришлось не так легко. Изначально я правильно посчитал все формулы, но по невнимательности перепутал местами аргументы в функции для анимирования ячеек (в коде 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...", хотя это я вообще-то пытаюсь с ним связаться. Звоню сам себе уже двадцатый раз, всё одно и то же - приходит смс "абонент в сети", звоню снова - опять занято. У меня начинается истерика. Сходил, положил деньги на МТС, попробовал перезвонить с неё. Опять занято. Реальность начинает ломаться. Что это, сбои в матрице? Архитектор перезагружает лимб? Тут я внимательно вгляделся в билайновский номер. Мне кажется, я где-то его недавно видел. Мельком, прочёл один раз и забыл. Достаю из кармана куртки контейнер от билайновской симки (или хз как он там называется, ну такая пластиковая карта откуда выковыриваешь симку при покупке) - и понимаю, что я уже полчаса пытаюсь дозвониться сам до себя. |
Кстати, как сделать мин./макс. размеры при ресайзе?
Если просто проверять elem.clientHeight <= minHeight, то при достижении minHeight обратно увеличить уже не получится, т.к. срабатывает условие. Можно конечно при срабатывании условия делать elem.style.height = minHeight + 1, но это как-то по-клоунски... и будет дёргать элемент туда-сюда. |
Цитата:
|
Цитата:
Если при mousemove документа выполнять такую проверку: if (elem.clientHeight <= minHeight || elem.clientWidth <= minWidth) return; то при достижении минимальных размеров ресайз перестаёт работать вообще, т.к. при начале ресайзинга выполняется вышеописанное условие и делается return. |
Diphenyl Oxalate,
ок понятно |
Спросил, и тут же сам догадался.
Надо делать так: if (elem.clientHeight < minHeight) elem.style.height = minHeight + "px"; |
Diphenyl Oxalate,
вычислить height и скорректровать if(height <= minHeight) height = minHeight и также с width и только потом менять стиль |
Diphenyl Oxalate,
варианты сошлись когда другому обьясняешь, лучше сам понимаешь. :) |
Извините, а можно кое что из вашего кода взять и переработать для своих целей?
|
Часовой пояс GMT +3, время: 22:24. |