Анимация “разлёта и падения” игрушек

Здравствуйте.

Меня зовут Карен. Задачу понял, речь идёт не просто о CSS-анимации, а о физически правдоподобном эффекте разлёта и падения объектов, который стабильно работает на мобильных устройствах.

Такое делаю на чистом JavaScript или TypeScript через canvas или DOM с requestAnimationFrame, с собственной простой физикой или с лёгким physics-подходом без тяжёлых библиотек. Важно сохранить плавность, контроль FPS и адекватное поведение на слабых устройствах.

Как вижу реализацию:
— спавн игрушек в одной точке по клику
— случайное распределение начальных векторов скорости и углов
… — гравитация и замедление
— вращение объектов
— коллизия с нижней границей и отскок с затуханием
— остановка объектов после потери энергии

Работаю аккуратно с производительностью:
— минимум перерисовок
— оптимизация под mobile
— WEBp с прозрачностью без проблем
— контроль количества объектов и времени жизни

Могу сделать как изолированный модуль, так и интегрировать в существующую страницу. Готов показать подход или быстро собрать демо.

Карен

Добрый день, это можно реализовать через https://brm.io/matter-js/demo/#mixed, у меня есть практика с этой библиотекой.

Показать оригинал

Перевести

Доброго дня! Я можу реализовать на вашей мобильной веб-странице анимацию «разлета и падения» игрушек. После клика по кнопке в одной точке будут появляться игрушки, которые разлетаются под разными углами и скоростями, падают вниз под действием «гравитации», вращаются и отскакивают от поверхности. Анимация будет плавной, естественной и оптимизированной для мобильных устройств. Использую JavaScript или TypeScript, подключу ваши изображения WebP с прозрачным фоном.

Показать оригинал

Перевести

Здравствуйте!

Я могу реализовать анимацию «разлёта и падения» игрушек на мобильной веб-странице именно так, как вы описали: вылет из одной точки, разлет в разные стороны, падение с гравитацией, лёгкое вращение, отскоки — всё будет плавно и без лагов на мобильных устройствах.

Готов взяться за проект и сделать эффект натуральным и красивым.

Здравствуйте, делал когда-то такое, вот тут типа пасхалочка, нажать "получить деньги прямо сейчас"
http://prostolombard.com/#footer
Хотя его надо будет немного причесать ещё, так как делал очень давно, чтоб адекватнее на мобильных девайсах работало..

Здравствуйте.
Ознакомился с ТЗ. Реализую на чистом JavaScript. Анимация будет без лагов.

Пишите...

Добрвй день. Готов выполнить.
JS / TypeScript — плавная анимация, хорошо работает на мобилках.
Разлёт, гравитация, вращение, отскоки, WEBP с прозрачным фоном.
Готов приступить зразу

Добрый день! Ознакомилась с заданием, анимация понятна — разлет, гравитация, вращение и отскок выглядят вполне реализуемыми на мобильном вебе.

Планирую реализацию на чистом JavaScript с requestAnimationFrame и CSS transform, без тяжелых библиотек, что обеспечит плавную анимацию и хорошую производительность на мобильных устройствах. Смогу сделать натуральную физику движения (разные скорости, углы, легкое вращение, отскок и постепенную остановку).
Чтобы точно оценить объем и сделать все максимально качественно, хотела бы уточнить несколько моментов.

Показать оригинал

Перевести

Добрый день
готов обсудить детали в лс
................................................

Здравствуйте, всё сделаю быстро и в лучшем виде. Если Вам интересно, жду вас в личных сообщениях