Не так давно я взял на себя роль клиента, которого мне порекомендовал кто-то из моей сети. Это был относительно простой запрос на небольшой рекламный блок, который я, вероятно, смог бы выполнить в течение нескольких дней. По крайней мере, я так думал.

Небольшой баннер формата 5 x 2, на котором изображен дом с несколькими аккуратно расположенными внутри элементами мебели. Когда вы наводите курсор на элемент (например, диван), появляется небольшое всплывающее окно с инфографикой с дополнительной информацией об этом продукте.

Видя, как у меня была пропускная способность, и в целом это показалось мне интересным проектом, я решил принять предложение и сразу приступил к работе.

Небольшая заметка о рекламных блоках. Их сложно реализовать независимо от каких-либо добавленных анимаций или движений, потому что они должны следовать определенным правилам для надлежащего рендеринга, например:

  • Изображения не могут быть использованы
  • Должно быть меньше 2 МБ
  • Никаких ссылок на какие-либо внешние ресурсы
  • Должен быть HTML5

Так что, по сути, вы должны полностью кодировать ванильный код. Все должно быть встроено прямо на страницу, и если вам нужно изображение, у вас есть 2 варианта.

Вы можете сначала закодировать в base64 ресурс изображения и загрузить его в тег ‹img напрямую или через JavaScript. Или вы можете визуализировать элемент ‹svg›, отрисовывая его целиком, при условии, что у вас есть масштабируемый векторный формат ресурса.

В зависимости от маршрута, который вы выберете, вас ждут разные испытания.

Подпрыгивать

Примерно через неделю у меня был относительно отточенный черновой вариант объявления, который был отзывчивым, следовал указанным рекомендациям и по большей части просто работал (без анимации).

Я решил пойти по пути SVG и визуализировать каждый предмет мебели как отдельный графический объект. Это позаботилось о необходимости рендеринга блока в различных размерах, поскольку SVG довольно хорошо масштабируется по всем направлениям.

И тут пришла просьба сделать его немного «веселее». Невинная просьба, которая, как я предполагал, стоила мне лишнего часа работы.

«Можно ли сделать так, чтобы каждый предмет мебели слегка« подпрыгивал », когда пользователь наводит на него курсор?»

Отскок? Этот термин на самом деле настолько субъективен. И как я могу назвать часы для отказов?

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

"Вы имеете в виду, вы хотите, чтобы к элементам была добавлена ​​анимация?"

Вот и все!

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

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

За исключением того, что я не мог использовать внешние библиотеки, если вы помните. И я тоже не мог скопировать и вставить библиотеку, так как у меня был ограниченный объем памяти, с которой я работал. Так что я пошел дальше и позаимствовал только анимацию «отскока» и включил ее на страницу.

Это сработало! И это тоже не заставило себя долго ждать. Я отправил новый черновик, ожидая радостного ответа. Через несколько часов меня уведомили, что его еще нет.

Если вы перейдете по этой ссылке и посмотрите на возврат, вы заметите, что он очень специфичен. На самом деле это своего рода двойной отскок, которого не просили.

К счастью, я все еще мог реконструировать часть существующей логики и превратить ее в единый эффект отскока. После некоторой настройки у меня была стабильная CSS-анимация, которая выполнила свою работу и не нарушала никаких правил.

Требуется больше «колокольчика»

К этому моменту я исчерпал свои согласованные оплачиваемые часы для этого проекта, о чем я сообщил своему временному работодателю.

Но они не возражали, потому что мы приближались к тому месту, где нам нужно было добраться. За исключением того, что это не совсем так. Возможно, мы продвигались все дальше и дальше с каждым поступающим запросом.

На данный момент было трудно оценить какие-либо часы, поскольку моя первоначальная 1-часовая реализация «отскока» пошла не так, как планировалось.

«Можем ли мы сделать так, чтобы он был больше похож на колокол наверху?»

Колокольчик"? Опять же, настолько субъективно, что это подразумевает.

Я еще раз зашел в библиотеку Дэна и заглянул. Самым близким к звонку было «колебание», и оно было слишком преувеличенным. Просьба заключалась в минимальном наклоне в виде колокола на самом верху перед безопасным приземлением.

Если вы никогда не представляли, что холодильник подпрыгивает на 2 фута и наклоняется, как колокол, сейчас самое время. За исключением уменьшения ширины до 100 пикселей.

После часа исследования без выставления счета я сдался и понял, что мне нужно придумать свой собственный алгоритм звонка, чего я, честно говоря, избегал делать.

Преобразования CSS спешат на помощь. К счастью для меня, казалось, что рекламные блоки принимают анимацию и преобразования практически без проблем. И после долгих проб и ошибок (много) я наконец смог найти золотую середину в том, что значит наклоняться, как колокол, если вы холодильник или водонагреватель.

Моя CSS-анимация выглядела примерно так:

Если вы внимательно посмотрите, то увидите мою самую большую боль. Каждый элемент холста уникально расположен на странице и имеет собственное соотношение ширины и высоты. Например, холодильник выше телевизора. Это означало, что угол изменения должен корректироваться с учетом этого несоответствия при наклоне.

Таким образом, каждый из дюжины предметов мебели нужно было анимировать индивидуально, внося небольшие изменения в их координаты x и y и градусы вращения, чтобы они имели более или менее равномерное колебание.

После нескольких часов проб, ошибок и итераций у меня была почти законченная версия.

За исключением одного последнего момента.

Начальный «отскок»

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

Само по себе это было относительно несложным подвигом. За исключением того, что по какой-то странной причине Safari на iOS не запускал анимацию при загрузке первой страницы с использованием CSS.

Он работал с состоянием: hover, но просто не делал этого в другой раз. Спустя несколько часов поисков в Google я наткнулся на одну-единственную статью в глубине какого-то форума, в которой кто-то упоминал ее. Однако сопутствующего решения или обходного пути не было, и вопрос был задан много лет назад.

JavaScript приходит на помощь. Это был долгий путь. Если бы CSS не сработал, я не думал, что сработает и JavaScript. Но выстрел стоил. Чем глубже и глубже я погружался в движения низкого уровня, тем больше нервничал.

Не нервничал, потому что это было сложно, но потому, что казалось, что чем больше я копал, тем больше совместимость с браузерами разрушала всю ту тяжелую работу, которую я проделал.

Если моя комбинация SVG и CSS не сработала, я мог бы быть вынужден начать за свой счет с другого потенциального решения.

Позже было много экспериментов с временными последовательностями JavaScript, смешанными с преобразованиями, и в результате была получена следующая функция:

Это сработало! Это было единственное доступное для покупки решение, которое могло бы работать во всех отношениях, и это некрасиво. Мне пришлось перейти непосредственно к каждому свойству преобразования элементов и изменить соответствующий элемент матрицы, чтобы он смещался на 5 пикселей, достойных отскока, на таймере JavaScript 200 мс.

Поданный

На данный момент мой уровень кортизола достиг рекордных высот, как я отправил в окончательной версии. Перед тем как написать электронное письмо, я пробежал по контрольному списку десятки раз:

  • Создан дом в формате SVG (проверьте)
  • Мебель SVG (проверить)
  • Первоначальный эффект «отскока» (проверьте)
  • Эффект колокольчика при наведении (проверьте)
  • Совместимость браузера (проверить)

Я нажал «Отправить» и, наконец, глубоко вздохнул.

Через 2 часа мой телефон отключается, и я вижу уведомление и ответ от своего клиента.

"Выглядит неплохо! Отправьте нам счет за добавленные часы! »

Успех.

Хотя добавленные часы были приятным неожиданным бонусом к тому, что, как я думал, будет очень быстрым проектом, я думаю, что реальным выводом, который я извлек из всего этого, была признательность за обычно игнорируемые сигналы анимации, которые мы смотреть ежедневно в сети.

Элементы, которые неожиданно исчезают в нужное время. Легкое «подталкивание», которое нам дает элемент, означает, что по нему нужно щелкнуть.

Но, как и все в жизни, за это приходится платить. Даже малейшее мигание должно быть кем-то закодировано. Есть CSS, который нужно написать, и события синхронизации, которые нужно запускать и настраивать, и браузеры, которые могут или не могут делать то, что вы говорите.

Забегая вперед, когда клиент спрашивает меня, можно ли добавить анимацию на страницу, я даю им знать, что это возможно, но это может стоить им.