How to synchronize animations for users?

Question

JavaScript

Есть сервер, который отдает сокетами угол, на который нужно провернуть элемент (к примеру, 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

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

Answer 2

Question for those who see well?
I see what break;is missing for case 1
But I could not read the error

Answer 3

Judging by the error, $q contains invalid values, dump the value of $q to the screen for debugging