时间戳

首页 > 解决方案 > 如何使用 popmotion pure 从关键帧旋转、平移和缩放矩形？

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

问题描述

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

标签： javascriptanimationkeyframepopmotion

解决方案

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

推荐阅读