css动画旋转属性作为线性过渡

lyr7nygr 于 2023-04-08 发布在其他

关注(0)|答案(3)|浏览(137)

这是possible，动画css rotate作为线性过渡（采取过渡的起点和终点，并使用它们像一个关键帧，其中点直接前进到他们的最终位置）？
例如：

默认情况下，从1到2的旋转将以圆形方式进行（蓝色），但我希望它从“点到点”（黄色），但也要保持平滑（不像steps(1)）

css

来源：https://stackoverflow.com/questions/75912377/css-animate-rotate-property-as-linear-transition

3条答案

按热度按时间

exdqitrt1#

若要使线旋转，使其端点沿直线而不是沿圆的圆弧旋转，可以在不希望显示的部分上放置纯色。
此代码段通过使用div的before伪元素作为行，并使用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>

赞(0）回复(0）举报 2023-04-08

hc8w905p2#

你所提议的仅仅依靠轮换是不可能的。
需要在圆中遍历的路径总是与中心点或原点等距。
在您的问题中需要遍历的路径涉及缩放或平移正在旋转的对象。

编辑：更详细说明：如果测量从原点到圆上一点的距离，则该距离大于从原点到直线中点的距离。

每个点的比例都需要等于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>

赞(0）回复(0）举报 2023-04-08

0yycz8jy3#

您可以使用关键帧

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>

您可以在此处了解有关关键帧的详细信息：link

赞(0）回复(0）举报 2023-04-08

我来回答

css动画旋转属性作为线性过渡

3条答案

相关问题

热门标签

最新问答