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

问题描述 投票：0回答：3

是否有可能将 css 

rotate
动画化为线性过渡（获取过渡的起点和终点并将它们用作关键帧，其中点直接指向它们的最终位置）？
例如：
img_1
默认情况下，从 
1
到 
2
的旋转将以循环方式进行（蓝色的），但我希望它从“点到点”（黄色的）进行，但也要保持平滑（不要像 
steps(1)
)

css css-animations css-transitions
3个回答
1
投票

你打算做的事情只靠轮换是不可能的。

需要在圆中遍历的路径始终与中心点或原点等距

问题中需要遍历的路径涉及缩放或平移正在旋转的对象。

编辑：更详细的解释：如果你测量从原点到圆上一点的距离，它比从原点到直线上的中点的距离更远。

刻度需要在每个点都等于 1。在一个点和下一个点之间的关键帧处，比例需要更小。或者如果您正在翻译它，则使用类似的解决方案。

结果是你需要在你已经拥有的每个旋转之间添加一个缩放过渡，并且在你现有的旋转到 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
投票

此动画点到点（在每个点停止然后继续）。

  1. 这是点对点的（非线性的）。

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<style>
  div {
    display: flex;
    width: 100px;
    height: 100px;
    background: gold;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 20px;
    animation: mymove 7s;
  }
  
  @keyframes mymove {
    0% {
      transform: rotate(51deg);
    }
    17% {
      transform: rotate(103deg);
    }
    34% {
      transform: rotate(154deg);
    }
    50% {
      transform: rotate(206deg);
    }
    68% {
      transform: rotate(257deg);
    }
    84% {
      transform: rotate(309deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  h1 {
    color: white;
  }
</style>

<body>


  <div>
    <h1>I'm Gonna Rotate</h1>
  </div>

</body>

</html>

  1. 这个是（点对点线性）

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<style>
  div {
    display: flex;
    width: 100px;
    height: 100px;
    background: gold;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 20px;
    animation: mymove 3s linear;
  }
  
  @keyframes mymove {
    0% {
      transform: rotate(51deg);
    }
    17% {
      transform: rotate(103deg);
    }
    34% {
      transform: rotate(154deg);
    }
    50% {
      transform: rotate(206deg);
    }
    68% {
      transform: rotate(257deg);
    }
    84% {
      transform: rotate(309deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  h1 {
    color: white;
  }
</style>

<body>


  <div>
    <h1>I'm Gonna Rotate</h1>
  </div>

</body>

</html>

0
投票

您可以使用关键帧

  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>

在这里您可以了解更多关于关键帧的信息：链接

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.