#javascript #physics
#javascript #физика
Вопрос:
Я работаю над небольшим веб-приложением для винной лотереи для компании. Когда дойдет до 10 чисел, программа расположит их по кругу и вращает бутылку вина; однако мне не удалось сделать анимацию для вращающейся бутылки реалистичной.
Приложение выберет число, а затем, следовательно, угол, который указывает на него. После этого он начинает вращаться около 10 кругов, а затем заканчивается указанием на число. Должен ли я имитировать трение или использовать какую-то кривую для этого?
Просто для пояснения: я ищу формулу или что-то подобное, чтобы задать скорость вращения бутылки.
Предложения?
Ответ №1:
Зачем вам вообще нужно анимировать с помощью этого метода?
Я знаю, что многие сайты онлайн-гемблинга делают это, и, по сути (предполагая, что бутылка всегда начинается с одной и той же точки), вы могли бы создать флэш-файл, содержащий 10 анимаций, и просто ввести через параметры конечный результат (запутайте его, если не хотите, чтобы люди его видели).
Пользователь получает приятную флеш-анимацию, ваш генератор случайных чисел по-прежнему работает, и вам не нужно создавать сложные анимации, сокращая время реализации (при условии, что вы сможете найти кого-то, кто сделает флеш-анимацию за вас).
Приветствую, Терри
Комментарии:
1. Проблема не в том, чтобы заставить ее вращаться, а в том, чтобы заставить ее вращаться реалистично.
2. безусловно — флеш-анимация может сделать это наверняка — я не могу дать вам URL, не раскрыв, на каком игорном сайте я работаю, но мы широко используем эту технику в играх. если вы уберете из этого javascript и физику, то это превратится в задачу анимации, а flash отлично подходит для создания убедительных анимаций.
Ответ №2:
Поскольку вы используете -webkit-transform , почему бы не присвоить -webkit-transition свойству значение ease-out ?
Пример скрипки:http://jsfiddle.net/dosboy/KGhAJ
Комментарии:
1. Эй, это то, что я в итоге сделал. Вместо использования ease-out я создал свою собственную кривую, используя Ceaser :
cubic-bezier(0.185, 1.000, 0.420, 1.000);2. Никогда раньше не видел Ceaser. Хорошая ссылка. Спасибо.
Ответ №3:
Ознакомьтесь с библиотекой JS Raphael, в частности, с этим примером.
Комментарии:
1. Я рассмотрел вращающуюся часть (я просто использую -webkit-transform), то, что я ищу, — это способ сделать так, чтобы это выглядело точно так же, как вращающаяся бутылка в реальной жизни.
Ответ №4:
Здесь есть отличный пример этого: http://www.bookatable.com/win
Использует RaphealJS, как упоминалось выше.