Каким образом лучше реализовать эффект падающей монеты в банку с другими монетами?

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

Первое, что пришло в голову: вставить банку двумя картинками (передняя часть и задняя), между картинками просто появляется свёрстанная монета/монеты и при помощи 3d трансформации вращается и движется вниз. Но больше всего интересует, как сделать горку монет, которая должна расти? Можно просто подменять картинки по мере наполнения банки с разной её заполненностью, но может есть ещё какие интересные решения? Возможно, какие-нибудь инструменты, которые помогут с реализацией? C js анимацией, canvas знаком плохо, поэтому ищу совета. Ниже скрин.

5a8337bc3d63b687383865.jpeg
  • Вопрос задан
  • 772 просмотра
Пригласить эксперта
Ответы на вопрос 4
Я бы всё переусложнил.
1. от дизайнера потребовалось бы в 3D нарендерить для разных степеней заполненности банки кучи монет в ней. Может, большими шагами, но для каждого шага - состояние «до» и «плюс 1-2 монеты». Для перфекционистов ещё пара кадров встряски/подпрыгивания монет в этом состоянии от падения на них новых.
2. рендеры монет в полёте, непременно с ускорением, вращением и motion blur (размытием от движения) – это размытие сложно реализовать средствами js/css, поэтому именно рендер.
3. озвучка падения монет на монеты.
4. монеты падают, анимация обрывается в нужный момент, куча меняется с «до» на «плюс 1-2 монеты» (возможно, с анимацией подскока).
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
lo-th.github.io/Oimo.js/examples/test_basic.html
Сыпать нужно жёлтые цилиндры высотой в 1-2 см.

Бонусом: https://github.com/bebraw/jswiki/wiki/Physics-libraries
Ответ написан
Exploding
@Exploding
wtf?
Сделал бы как в ответе xmoonlight (бонусом)
Ну и вот еще некое подобие "банки с монетами" (без физики правда), но может что-то оттуда можно подсмотреть.
Ответ написан
edli007
@edli007
full stack, team lead
Монеты спрайтом или применить что-то из разряда 3д.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Blogman Оренбург
от 20 000 до 60 000 руб.
Webit Москва
До 90 000 руб.
Eagle Dynamics Москва
от 80 000 руб.
21 окт. 2018, в 12:15
100000 руб./за проект
21 окт. 2018, в 09:51
12000 руб./за проект
21 окт. 2018, в 02:06
500 руб./в час