CSS: Как избежать прерывания поворота перехода на 360 °?

Question

CSS: Как избежать прерывания поворота перехода на 360 °?

1

В настоящее время я реализую компас в JavaScript/CSS.

Глобальная реализация работает отлично.

Однако курсор компаса перемещается с толчком. Я реализовал переход ease-in-out в CSS, чтобы избежать этой проблемы.

От 0 до 359 градусов курсор поворачивается нормально против часовой стрелки (с переходом CSS).

Но если угол установлен от 356 градусов до 1 градуса, CSS-переход поворачивает курсор по часовой стрелке, поэтому с большим зазором (355 градусов вместо 5 градусов).

Это способ избежать этого пробела или другое решение для реализации хорошего перехода?

Благодарю.

clem 19 дек. 2018, в 18:04

Источник

3

Продолжайте увеличивать дальше 360. CSS это выяснит.
Diodeus - James MacFarlane 19 дек. 2018, в 16:30
0

Я думаю, что это хороший вопрос, потому что я действительно не уверен, есть ли какое-либо влияние, позволяющее вращению увеличиваться вечно.
zero298 19 дек. 2018, в 16:34
1

Вы можете реализовать jsfiddle? трудно понять, что происходит без реального кода
Ramon de Vries 19 дек. 2018, в 16:40
1

Самое простое - продолжать увеличиваться, как говорит Диодей. Другой способ - использовать API анимации javascript, чтобы лучше контролировать анимацию.
Simsteve7 19 дек. 2018, в 16:40
0

Пожалуйста, поделитесь примером кода того, что вы пытаетесь сделать.
FelisPhasma 19 дек. 2018, в 19:14
0

Используйте что-то вроде anime.js, это здорово для обработки анимации
muuvmuuv 19 дек. 2018, в 20:48

Показать ещё 4 комментария

Теги:

javascript

css

2 ответа

Ещё вопросы

Продолжайте увеличивать дальше 360. CSS это выяснит.
Я думаю, что это хороший вопрос, потому что я действительно не уверен, есть ли какое-либо влияние, позволяющее вращению увеличиваться вечно.
Вы можете реализовать jsfiddle? трудно понять, что происходит без реального кода
Самое простое - продолжать увеличиваться, как говорит Диодей. Другой способ - использовать API анимации javascript, чтобы лучше контролировать анимацию.
Пожалуйста, поделитесь примером кода того, что вы пытаетесь сделать.
Используйте что-то вроде anime.js, это здорово для обработки анимации

Cryptopat · Answer 1 · 2018-12-22T10-11-00.000Z

Псевдокод, вы можете просто запретить более высокие значения:

if (elem.transition >= 360){
   elem.transition = 360
}

clem · Answer 2 · 2018-12-22T07-02-00.000Z

Спасибо за каждую идею.

Таким образом, с помощью CSS, решение состоит в том, чтобы продолжать увеличиваться и дальше 360, как говорит Диодей. Но в моем случае вычисленный угол масштабируется от 0 до 360 °.

С помощью JS мы можем использовать anime.js, но я предпочел кодировать свою правильную функцию анимации. Эта функция делает следующее:

вычислить угол по часовой стрелке между текущей позицией и пунктом назначения
вычислить угол против часовой стрелки между текущей позицией и пунктом назначения
вычислить минимальный угол между ними (это кратчайший путь)
Для 5 образцов, запустите Timeout 5 раз и добавьте [минимальный угол /5] к текущей позиции, чтобы достичь места назначения.