了解一下transform rotate运动一周的奥秘

马黑黑 · 发表于 2022-3-28 08:18

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

CSS3的transform中有一个rotate旋转运动，看似简单，但里面有坑。先看一下如下实体元素对象的CSS和HTML代码：

<style>
#box {
   margin: 120px auto 0;
   width: 100px;
   height: 40px;
   background: olive;
   transform: rotate(60deg);
   animation: roll 4s linear infinite;
}
@keyframes roll {
   to { transform: rotate(360deg); }
}
</style>

<div id="box">Hi</div>

看好，上面的 div 盒子再简单不过，非常基本的样式外加一个角度旋转和一个animation动画。为了深入了解rotate运动的玄机，我们预设一个目标，即，驱动一个已有旋转角度的HTML元素无尽地、平滑地旋转下去，这将需要确定旋转一周，本来CSS可以这样写@keyframes：

to { transform: rotate(360deg); } 或 to { transform: rotate(1turn); }

然后按照盒子的animation引用方式，我们的目的应该能够达到。但是——

很遗憾，我们要处理的元素首先存在一个预设的旋转角度，于是它“运行一周”的实际情形是它从自己的角度点（假设是Kdeg）出发，旋转一定弧度后突然就会出现顺向或逆向“跳帧”现象（顺向还是逆向取决于定位弧度的正负值），并不能匀速旋转一整周。为什么呢？

原来，rotate方法将圆周视为一个坐标系，圆周的起始坐标角度0deg指向3点钟方向，闭合坐标角度360deg也指向3点钟方向与0deg重合。故而，rotate(360deg)的动作在3点钟方向被视为是终结角度，与出发点K之间存在一定的距离，这个距离就是跳帧的原因所在。跳帧的具体表现为，元素从K弧度开始旋转，旋转到出发点0弧度也就是一周的终结点360弧度时被视为一个周期的 rotate(360) 动作结束，元素此时被快速定位到它的出发点K，这就是跳帧，可能顺跳，也可能逆跳。

至此，解决“跳帧”问题的思路应该可以确定了：元素 rotate 的弧度不是360deg，而是 rotate （360 + K）个deg，上述例子的动画就应改为：

to { transform: rotate(420deg); }

如果元素原始旋转了 -60deg，则动画设计成：to { transform: rotate(300deg); }

这可以理解为，元素的出发点 K 是 Kdeg，即它从 K 处开始旋转，它要回到出发点 K，必须转 rotate 360deg + Kdeg 才算真正完成一周的旋转运动。等于说，圆周上的0deg~360deg的弧度标志或可以称为刻度的东东是个固定不变的坐标系，运行于其上的元素从非0弧度即3点钟方向的地方出发时，要真正走完360个deg的话，在圆周坐标系上的算式是360deg加上出发点的deg。