Как сделать синхронизацию анимации у пользователей?

Question

[vetsmen]

Есть сервер, который отдает сокетами угол, на который нужно провернуть элемент (к примеру, 720 + deg, где deg = [0, 360])
Есть клиент, который должен получить этот угол, и за 10 секунд анимировать поворот элемента с 0 до 720 + deg.
Так вот, если пользователи получили сокет одновременно (то есть находились на сайте в момент отправки угла), то анимация у всех синхронизированная. А если анимация уже началась, и допустим на пятой секунде анимации заходит пользователь на сайт, то у него анимация начинается с самого начала и синхронизация с остальными теряется (он получает окончание анимации на 5 секунд позже остальных).
Вопросы:
1) По какой логике это можно все синхронизовать? Была идея на сервере так же запускать таймер и при прошедствии N секунд менять стартовый угол с 0 до 360, при прошедствии 2*N секунд, менять с 360 до 720 и т.д., где N - это время оборота элемента на 360 градусов. Но может быть есть куда более лучшие варианты?
2) При анимации css transform: rotate() с помощью jQuery animate получается не такая уж плавная анимация. Есть варианты сделать ее плавнее?

Answer 1

[Юрий]

на клиент помимо угла нужно отправлять время начала этой анимации.
тогда клиент сможет рассчитать текущую фазу вращения для его текущего времени.

Comments

[vetsmen]

А что делать, если разница во времени между отправкой сокета и выполнения функции на клиенте целых 3 секунды?

[vetsmen]

vetsmen: Иногда бывает даже 5 секунд.

[Юрий]

vetsmen: все просто, ответил вам тут Почему значение new Date различается на сервере и клиенте?