我如何使用popmotion pure从关键帧旋转，转换和缩放矩形？

Question

我如何使最后一个关键帧旋转我的矩形到35deg角度使用popmotion纯？

https:/codepen.iomatthewharwoodpenXWmRPaK?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.iokcerbpenwvKyWLv?editors=1111。

Answer 2

这是一个使用Popmotion Pure的解决方案，使用内置的变换选项而不是变换字符串。https:/jsfiddle.netrqjahwLt。

你说的没错，麻烦是基于数学的。你需要在你的CSS中设置你的矩形的尺寸是你在动画结束时想要的。

麻烦的是Popmotion Pure会应用 rotateZ在它适用之前 scaleX.

的解决方案。

CSS使用width来设置动画结尾的尺寸 而transform来设置动画开始时的尺寸。如果你把 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变为宽度=300px的动画。然后最后一个关键帧将其绕Z轴旋转到-35deg。

  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' },
  ],