如何使用 popmotion pure 从关键帧旋转、平移和缩放矩形？

Question

如何使用 popmotion pure 让最后一个关键帧将我的矩形旋转到 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 Pure 的解决方案，使用内置的转换选项而不是转换字符串： https://jsfiddle.net/rqjahwLt/

你是对的，问题是基于数学的。您需要在 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)。第二个关键帧将使矩形从 width = 0.3px 变为 width = 300px。然后最终关键帧将其围绕 Z 轴旋转 -35 度。

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

如何使用 popmotion pure 从关键帧旋转、平移和缩放矩形？

How do I Rotate, Translate, and Scale rectangle from a keyframe using popmotion pure?

javascript

animation

keyframe

popmotion

解决方法：