4

如何使用 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)
})
4

2 回答 2

7

对于此类问题，我建议您在浏览器中单步执行纯 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

于 2020-04-30T17:40:38.353 回答
3

这是使用 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)从上面取消设置。第二个关键帧将使矩形从宽度 = 0.3px 变为宽度 = 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' },
  ],
于 2020-05-06T21:54:49.317 回答