让柱子摇起来可以不需要设定基点

马黑黑 · 发表于 2022-4-7 08:06

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

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

x

本帖最后由马黑黑于 2022-4-7 08:11 编辑

上面的摇摆效果，常规的实现方式当然是用 transform的rotate来做，且必须设定transform-origin，否则底部无法固定——默认状况下，元素的rotate运动以自己的中心为基点。

transform-origin有时候很抽象，主要原因有两个方面：其一，我们需要给一个运动半径，其二，我们需要知道它rotate前的定位。

既然transform-origin很多时候难以理解和确定，我们或许可以绕开它（而不是回避它）。上面例子就是这样实现的，没有使用transform-origin来确定运动基点。代码如下：

<style>
.pillar {
   margin: 20px auto 0; 
   width: 20px;
   height: 200px;
   background: olive;
   animation: sway 2s linear infinite alternate;
}
@keyframes sway {
   from { transform: translateY(100px) rotate(45deg) translateY(-100px); }
   to { transform: translateY(100px) rotate(-45deg) translateY(-100px); }
}
</style>

<div class="pillar"></div>

我们把重点放在 sway 动画的设计。这里，我用了 translateY + rotate 来描述 from 和 to 这两种运动形态，先看 from ：

在 from 语句里，我先让元素垂直方向平移 100px ，这100px是柱子高度的一半，其实它充当的是运动半径，接着旋转45度，再接着垂直方向平移 -100px！translateY一上一下的运动路径正好相互抵消，但它们的存在影响着rotate的效果，并非多余。

在 to 语句，translateY前后还是沿用了 from 语句里的方式，相互抵消，中间 rotate 的值改为 -45deg。

就是说，实际上我们要做的是让柱子要做的运动以底端为基点左右摆动，从45deg摆到-45deg。运动期间，原始状态时，即在摆动之始，translateY以相反的值两次参与其中，把 rotate 的动作包夹起来，这个运动过程实际上是物体在摇摆的时候我把它上提100个像素，再把它来回原位，这样，45度角的摇摆就不是以物体的中心为基点，而是以底部为基点。同样道理，rotate（-45deg）时，就是 to 语句的运动描述，也可以这么理解。

可能有朋友会问，为什么是translateY而不是translateX？这不难理解。在空间场景，rotate本身产生的变化有X坐标方向的趋向，只有相反方向的Y位移才可以改变旋转的基点。

那么，如果需要元素以上端为基点，又如何处理？这好办，改变 @keyframes 动画中 translateY 的前后的正负值便可，试看效果：

至此，我们可以不需要设定 transform-origin 运动基点就可随心所欲地设计动画。但记住，我们还是需要基点，只不过我们所使用的新方式更为直观，对基点的修改也更为便捷。另外，非常方便的是，我们所使用的基点确定新方式，对元素的定位没有特别的要求，我们只需知道元素的某些尺寸。

马黑黑 · 发表于 2022-4-7 08:15

本帖最后由马黑黑于 2022-4-7 12:34 编辑

一楼实例代码整合：

<style>
.pillar {
margin: 20px auto 0;
width: 20px;
height: 200px;
background: #ffcc66;
animation: sway 2s linear infinite alternate;
}
@keyframes sway {
from { transform: translateY(100px) rotate(45deg) translateY(-100px); }
to { transform: translateY(100px) rotate(-45deg) translateY(-100px); }
}
@keyframes sway1 {
from { transform: translateY(-100px) rotate(45deg) translateY(100px); }
to { transform: translateY(-100px) rotate(-45deg) translateY(100px); }
}
</style>
<div class="pillar"></div>
<div class="pillar" style="animation: sway1 2s linear infinite alternate;"></div>