Мяч с отскоками в Tilda: прелоадер с гравитацией и круговым финалом

Мяч падает, сплющивается при ударе и несколько раз отскакивает. В финале цветной круг расширяется и завершает переход к сайту. Простая форма позволяет сделать заметное вступление без отдельного видеоролика.

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

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

Проверьте широкий монитор и вертикальный телефон. Одинаковое впечатление от сцены не получается автоматически только потому, что она помещается в превью. Мяч должен быть виден в начале, в точке удара и после высокого отскока. Сначала добейтесь понятной геометрии, затем меняйте физику. Иначе будет трудно понять, что именно делает движение неудобным.

Гравитация и упругость влияют на характер падения и возврата. Сравните несколько запусков, меняя по одному параметру. Затем выберите количество отскоков.

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

Настройте длительность сплющивания при ударе. При необходимости включите тень на полу. Сравните точку контакта и последующее движение.

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

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

Смотрите не только центр. В момент перехода круг должен покрывать углы так, как задумано, без случайно оставшихся участков. Проверьте широкое окно, телефон и поворот экрана. Если финал слишком резкий, сравните его длительность с ритмом отскоков. Последний переход должен завершать движение, а не выглядеть отдельной неожиданной вспышкой после спокойного мяча.

Проценты и верхняя полоса прогресса включаются отдельно. Они вычисляются по сценарию движения, а не по точному числу загруженных ресурсов. Можно оставить только мяч и финал.

Укажите максимальное ожидание и необходимость задержки анимаций Tilda. Разместите код в T123 в начале страницы и опубликуйте. Отдельные шейпы Zero Block не нужны. Оставьте один прелоадер, дождитесь завершения круга и проверьте первый экран. После него сайт должен принимать нажатия и нормально прокручиваться.

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

• Мяч остаётся виден на всём пути.
• Точка пола подходит телефону.
• Отскоки не затягивают вступление.
• Финальный круг корректно покрывает углы.
• После выхода доступны кнопки и прокрутка.

Если движения слишком много, начните с меньшего числа отскоков. Простая понятная траектория часто лучше сохраняет характер мяча, чем длинная демонстрация всех доступных параметров физики.

Читайте также: Круговое раскрытие страницы в Tilda: прелоадер «Диафрагма» · Прелоадер из квадратов в Tilda: сборка сетки, цвета и выход.