Css анимировать свойство вращения как линейный переход
возможно ли анимировать css rotate как линейный переход (взять начальную и конечную точки перехода и использовать их как ключевые кадры, где точки идут прямо вперед к своей конечной позиции)?
например:
по умолчанию вращение от 1 к 2 будет происходить по кругу (синий), но я хочу, чтобы он шел от «точки к точке» (желтый), но также оставался плавным (не делать что-то вроде steps(1))
Вы все еще заинтересованы в поиске гладкого решения этой проблемы? Если да, не могли бы вы подтвердить, что достаточно просто не показывать часть линии во время поворота?
Ответы 3
Вы можете использовать ключевые кадры
body {
position: relative;
}
#box1 {
position: relative;
animation: mymove 5s infinite;
width: 100px;
height: 100px;
left: 200px;
top: 100px;
background-color: aqua;
}
@keyframes mymove {
0% {
left: 200px;
top: 100px;
transform: rotate(0deg);
}
25% {
left: 300px;
top: 200px;
transform: rotate(90deg);
}
75% {
left: 200px;
top: 300px;
transform: rotate(180deg);
}
100% {
left: 100px;
top: 200px;
transform: rotate(270deg);
}
}<div id = "box1"></div>Здесь вы можете узнать больше о ключевых кадрах: ссылка
Этот ответ полностью не смог решить проблему.
Пожалуйста, прочитайте вопрос. Речь идет о линейном перемещении объекта из точки в точку по кругу. Этот пример кода не имеет к этому абсолютно никакого отношения.
То, что вы предлагаете сделать, невозможно с помощью только ротации.
Путь, который нужно пройти по кругу, всегда равноудален от центральной точки или начала координат.
Путь, который необходимо пройти в вашем вопросе, включает масштабирование или перевод вращаемого объекта.
Редактировать: более подробное объяснение: если вы измеряете расстояние до точки на окружности от начала координат, оно дальше, чем расстояние до середины линии от начала координат.
Шкала должна быть равна 1 в каждой точке. Масштаб должен быть меньше в ключевом кадре точно между одной точкой и следующей. Или аналогичное решение, если вы вместо этого переводите его.
В результате вам нужно добавить переход масштабирования между каждым поворотом, который у вас уже есть, и масштабированием до 1 в ваших существующих.
Редактировать № 2: это ни в коем случае не идеально, но это основная идея. В идеале я бы написал что-то подобное в SCSS из-за задействованной математики, но нет ничего лучше основ.
Красный круг движется по внешнему пути невидимого круга между 12 точками, как часы.
Каждые полчаса я перемещаю красный кружок ближе к началу координат, а затем обратно на час. Это то, что заставляет его выглядеть так, как будто он идет по прямой линии от одной точки к другой.
Вращение круга с нормальной скоростью и изменение расстояния до центра в правильном соотношении даст вам то, что вы хотите.
Поиск правильного соотношения зависит от того, сколько целевых точек/ключевых кадров располагаются вдоль края круга. Если у вас вдвое меньше точек, чем в примере с часами (12), средняя точка каждого линейного сегмента будет ближе к центру, и поэтому в каждом кадре необходимо большее перемещение. Если у вас больше 12, средние точки будут дальше, чем в примере.
html {
height: 100%;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
display: flex;
min-height: 100%;
background: #333;
}
@keyframes tick {
0% { transform: rotate(0) translateX(100px); }
4.16% { transform: rotate(15deg) translateX(98px); }
8.32% { transform: rotate(30deg) translateX(100px); }
12.48% { transform: rotate(45deg) translateX(98px); }
16.64% { transform: rotate(60deg) translateX(100px); }
20.8% { transform: rotate(75deg) translateX(98px); }
24.96% { transform: rotate(90deg) translateX(100px); }
29.12% { transform: rotate(105deg) translateX(98px); }
33.28% { transform: rotate(120deg) translateX(100px); }
37.44% { transform: rotate(135deg) translateX(98px); }
41.6% { transform: rotate(150deg) translateX(100px); }
45.76% { transform: rotate(165deg) translateX(98px); }
49.92% { transform: rotate(180deg) translateX(100px); }
54.08% { transform: rotate(195deg) translateX(98px); }
58.24% { transform: rotate(210deg) translateX(100px); }
62.4% { transform: rotate(225deg) translateX(98px); }
66.56% { transform: rotate(240deg) translateX(100px); }
70.72% { transform: rotate(255deg) translateX(98px); }
74.88% { transform: rotate(270deg) translateX(100px); }
79.04% { transform: rotate(285deg) translateX(98px); }
83.2% { transform: rotate(300deg) translateX(100px); }
87.36% { transform: rotate(315deg) translateX(98px); }
91.52% { transform: rotate(330deg) translateX(100px); }
95.68% { transform: rotate(345deg) translateX(98px); }
100% { transform: rotate(360deg) translateX(100px); }
}
.box {
width: 24px;
height: 24px;
margin: auto;
background: #a33;
border-radius: 50%;
box-shadow: 0 2px 3px 0 #222;
animation: tick 6s linear infinite;
transform: rotate(0) translateX(100px);
}<body>
<div class = "box"></div>
</body>Как бы вы реализовали масштабирование (т.е. какова формула для этого?).
Привет @AHaworth. Я что-нибудь придумаю сегодня вечером и опубликую в виде исполняемого фрагмента. Забочусь о своих детях прямо сейчас :)
@AHaworth Я опубликовал работающий пример эффекта.
Так это не гладко? Я думал, что вы, возможно, меняете масштабирование в формуле.
Формула находится в выбранных значениях пикселей. Для 12-сторонней формы значение смещения будет варьироваться от 98% до 100%. Для шестигранной формы он варьируется от 96% до 100%. Я не знаю точной формулы навскидку, но я могу включить ее. Он включает в себя получение величины каждого сегмента линии, получение половины длины, а затем определение расстояния до края круга от середины линии.
@AHaworth Я собираюсь разработать формулу для поворота на любой произвольный угол и плавного следования сегменту линии, который он производит.
Чтобы линия вращалась так, чтобы ее конечная точка следовала по прямой линии, а не по дуге окружности, вы можете поместить сплошной цвет на часть, которую вы не хотите отображать.
Этот фрагмент делает это, используя псевдоэлемент before элемента div в качестве строки и псевдоэлемент after (повернутый относительно нижнего правого угла), чтобы скрыть конец строки.
Использование преобразования вращения CSS на линии с линейной синхронизацией означает, что движение является линейным.
Этот фрагмент добавляет внешний круг, а желтая линия показывает обрезание.
.line {
position: relative;
--deg: 70deg;
width: 400px;
height: 400px;
/* the following settings are just for the demo */
border: solid blue 4px;
border-radius: 50%;
overflow: hidden;
box-sizing: border-box;
}
.line::before {
content: '';
position: absolute;
background: black;
width: 50%;
height: 3px;
top: 50%;
left: 0;
transform-origin: right center;
animation: rot 5s linear alternate infinite forwards;
z-index: -1;
}
.line::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: -50%;
left: -100%;
transform: rotate(calc((var(--deg)) / 2));
transform-origin: right bottom;
background: white;
z-index: -1;
/* the following settings are just for the demo */
border-right: solid 4px gold;
box-sizing: border-box;
}
@keyframes rot {
0% {
transform: rotate(var(--deg));
}
100% {
transform: rotate(0deg);
}
}<div class = "line"></div>
Это просто линия, которую вы пытаетесь повернуть таким образом? Возможно, вы могли бы предоставить небольшой пример кода, чтобы сделать это понятным. См. stackoverflow.com/help/minimal-reproducible-example Я спрашиваю, потому что есть простой способ сделать так, чтобы это выглядело так, как будто происходит эффект прямой линии (путем скрытия остальной части строки), но это может не соответствовать вашим требованиям. фактическое требование реальной жизни (например, если вы хотите, чтобы линия действительно «сжималась»).