Не так давно я взял на себя роль клиента, которого мне порекомендовал кто-то из моей сети. Это был относительно простой запрос на небольшой рекламный блок, который я, вероятно, смог бы выполнить в течение нескольких дней. По крайней мере, я так думал.
Небольшой баннер формата 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, который нужно написать, и события синхронизации, которые нужно запускать и настраивать, и браузеры, которые могут или не могут делать то, что вы говорите.
Забегая вперед, когда клиент спрашивает меня, можно ли добавить анимацию на страницу, я даю им знать, что это возможно, но это может стоить им.