了解一下transform rotate运动一周的奥秘
<style type="text/css">.txtBox { font:normal 16px/20px serif; }
.txtBox p { padding: 8px 0; }
.txtBox p {padding: 8px 0;}
.codeBox { margin: auto; padding: 12px 10px; max-width: 760px; border: 1px solid #aaa; box-shadow: 1px 1px 1px #ccc; border-radius: 4px; background: rgba(255, 255, 255, .7); }
.codeBox pre { font: 14px Sans-serif; color: #000; }
</style>
<div class="txtBox">
<p>CSS3的transform中有一个rotate旋转运动，看似简单，但里面有坑。先看一下如下实体元素对象的CSS和HTML代码：</p>
<div class="codeBox">
<pre><style>
<span style="color: red;">#box </span>{
<span style="color: blue;"> margin</span>: 120px auto 0;
<span style="color: blue;"> width</span>: 100px;
<span style="color: blue;"> height</span>: 40px;
<span style="color: blue;"> background</span>: olive;
<span style="color: blue;"> transform</span>: rotate(60deg);
<span style="color: blue;"> animation</span>: roll 4s linear infinite;
}
<span style="color: red;">@keyframes roll </span>{
<span style="color: blue;"> to { transform</span>: rotate(360deg); }
}
</style>
<<span style="color:darkred">div</span> <span style="color: red">id</span><span style="color: blue">=</span><span style="color: magenta">"box"</span>>Hi<<span style="color: darkred">/div</span>>
</pre>
</div>
<p>看好，上面的 div 盒子再简单不过，非常基本的样式外加一个角度旋转和一个animation动画。为了深入了解rotate运动的玄机，我们预设一个目标，即，驱动一个已有旋转角度的HTML元素无尽地、平滑地旋转下去，这将需要确定旋转一周，本来CSS可以这样写@keyframes：</p>
<p><span style="color: blue;">to { transform</span>: rotate(360deg); } 或 <font color="#0000ff">to { transform:</font> rotate(1turn); }</p>
<p>然后按照盒子的animation引用方式，我们的目的应该能够达到。但是——</p>
<p>很遗憾，我们要处理的元素首先存在一个预设的旋转角度，于是它“运行一周”的实际情形是它从自己的角度点（假设是Kdeg）出发，旋转一定弧度后突然就会出现顺向或逆向“跳帧”现象（顺向还是逆向取决于定位弧度的正负值），并不能匀速旋转一整周。为什么呢？</p>
<p>原来，rotate方法将圆周视为一个坐标系，圆周的起始坐标角度0deg指向3点钟方向，闭合坐标角度360deg也指向3点钟方向与0deg重合。故而，rotate(360deg)的动作在3点钟方向被视为是终结角度，与出发点K之间存在一定的距离，这个距离就是跳帧的原因所在。跳帧的具体表现为，元素从K弧度开始旋转，旋转到出发点0弧度也就是一周的终结点360弧度时被视为一个周期的 rotate(360) 动作结束，元素此时被快速定位到它的出发点K，这就是跳帧，可能顺跳，也可能逆跳。</p>
<p>至此，解决“跳帧”问题的思路应该可以确定了：元素 rotate 的弧度不是360deg，而是 rotate （360 + K）个deg，上述例子的动画就应改为：</p>
<p><span style="color: blue;">to { transform</span>: rotate(420deg); }</p>
<p>如果元素原始旋转了 -60deg，则动画设计成：<span style="color: blue;">to { transform</span>: rotate(300deg); }</p>
<p>这可以理解为，元素的出发点 K 是 Kdeg，即它从 K 处开始旋转，它要回到出发点 K，必须转 rotate 360deg + Kdeg 才算真正完成一周的旋转运动。等于说，圆周上的0deg~360deg的弧度标志或可以称为刻度的东东是个固定不变的坐标系，运行于其上的元素从非0弧度即3点钟方向的地方出发时，要真正走完360个deg的话，在圆周坐标系上的算式是360deg加上出发点的deg。</p>
</div>
这个还从来不知道呢，原来做圆周运动不能有出视角，若有，也要在360度里扣除。
这命令对圆周的定义很死板呢{:4_173:} 黑黑的这个帖子真好，以后遇到这个命令就不会那么容易掉坑了{:4_199:} 继续来学习 加林森 发表于 2022-3-28 10:33
继续来学习
{:4_190:} 红影 发表于 2022-3-28 10:01
这个还从来不知道呢，原来做圆周运动不能有出视角，若有，也要在360度里扣除。
这命令对圆周的定义很死板 ...
它的设计自有道理，我们只有适应它 马黑黑 发表于 2022-3-28 12:14
谢谢老黑。{:5_108:} 马黑黑 发表于 2022-3-28 12:27
它的设计自有道理，我们只有适应它
嗯嗯，记住有个初始角，后来转动过的角度要和初始角对应上。 红影 发表于 2022-3-28 16:36
嗯嗯，记住有个初始角，后来转动过的角度要和初始角对应上。
没有设置初始值，也就是它是自然的样子的，都能平滑转一周 马黑黑 发表于 2022-3-28 18:00
没有设置初始值，也就是它是自然的样子的，都能平滑转一周
这些细节黑黑不说都不知道呢{:4_204:} 红影 发表于 2022-3-28 19:21
这些细节黑黑不说都不知道呢
文档上都提到过，关键是看不看、看了会不会跳帧{:5_117:} 马黑黑 发表于 2022-3-28 20:37
文档上都提到过，关键是看不看、看了会不会跳帧
那估计看的时候跳帧了，不过没关系，后知道也是知道{:4_173:} 红影 发表于 2022-3-28 21:40
那估计看的时候跳帧了，不过没关系，后知道也是知道
嗯，可以回头看 马黑黑 发表于 2022-3-28 21:57
嗯，可以回头看
温故而知新{:5_109:} 红影 发表于 2022-3-28 22:51
温故而知新
说错了，知旧 马黑黑 发表于 2022-3-28 22:52
说错了，知旧
知啥都行，只要是知{:4_173:} 红影 发表于 2022-3-29 19:24
知啥都行，只要是知
知了知了 马黑黑 发表于 2022-3-29 20:56
知了知了
哈哈，成了蝉了{:4_173:} 红影 发表于 2022-3-29 23:14
哈哈，成了蝉了
挺好的吧 马黑黑 发表于 2022-3-29 23:22
挺好的吧
餐风饮露，挺高洁的，很不错{:4_173:}