如何使用纯弹出运动从关键帧旋转、平移和缩放矩形？

Question

如何使最后一个关键帧使用纯弹出运动将我的矩形旋转到35度角？

​

https://codepen.io/matthewharwood/pen/XWmRPaK?editors=1111

HTML：

<div class="flex h-screen w-screen justify-center items-center">
  <div class="portal-b">
    <h1 class="left"></h1>
  </div>
</div>
<button class="trigger fixed z-10 left-0 top-0">
  B replace A
</button>

CSS：

.portal-b {
  background: blue;
  width: 1px;
  height: 100px;
}

JS

const { easing, keyframes, styler } = window.popmotion;
const trigger = document.querySelector('.trigger');
const [_, portalB] = [document.querySelector('.portal-a'), document.querySelector('.portal-b')];
trigger.addEventListener('click', () => {
  const portalS = styler(portalB);
  keyframes({
  values: [
    { translateX: 0, scaleX: 0, rotateZ: 0, transformOrigin: 'left center' },
    { translateX: 200, scaleX: 400, rotateZ: 0, transformOrigin: 'left center' },
    { translateX: 200, scaleX: 400,  rotateZ: 90,  transformOrigin: 'left center' },
  ],
  duration: 3000,
  easings: easing.easeInOut,
}).start(portalS.set)
})

Answer 1

对于这类问题，我建议在浏览器中逐步了解普通CSS中的值。我发现下面的CSS规则提供了您想要的最终状态

.portal-b {
  background: blue;
  width: 1px;
  height: 100px;
  transform: translateX(200px) rotate(-35deg) scaleX(400);
}

然后，您所需要的就是让您的关键帧逐步到达那里，显式地说明它们所期望的值。

  values: [
    { transform: "translateX(0px) rotate(0deg) scaleX(1)" },
    { transform: "translateX(200px) rotate(0deg) scaleX(400)" },
    { transform: "translateX(200px) rotate(-35deg) scaleX(400)"},
  ],

这是你的笔和我的变化：https://codepen.io/kcerb/pen/wvKyWLv?editors=1111

Answer 2

下面是一个使用Popmotion的解决方案，使用内置的转换选项，而不是转换字符串：https://jsfiddle.net/rqjahwLt/

你说得对，问题是基于数学的。您需要将CSS中矩形的尺寸设置为动画末尾所需的尺寸。

问题是，Popmotion将在应用rotateZ之前应用scaleX。

解决办法：

CSS使用宽度来设置动画末尾所需的维度，并在开始时进行转换以设置所需的维度。如果您设置了width: 1px，那么您的rotateZ将在scaleX之前应用，这将给您留下一个菱形(即斜矩形)，而不是按需要旋转的矩形。

.portal-b {
  background: blue; 
  width: 300px; /* set the width to what you want at the end */
  height: 100px;
  transform: scaleX(0.001); /* transform the width to what you want at the start */
}

然后，Javascript只需要从上面取消设置我们的transform: scaleX(0.001)。第二个关键帧将使矩形从宽度= 0.3px变为宽度=300 to。然后，最后的关键帧旋转到-35度围绕Z轴。

  values: [
  { translateX: 0, scaleX: 0.001, rotateZ: 0, transformOrigin: 'left center' },
    { translateX: 200, scaleX: 1, rotateZ: 0, transformOrigin: 'left center' },
    { translateX: 200, rotateZ: -35,  transformOrigin: 'center' },
  ],