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

推荐答案

对于这种问题，我建议在浏览器中逐步浏览纯CSS中的值.我发现以下CSS规则提供了您想要的最终状态

For this kind of problem I recommend stepping through the values in plain CSS in your browser. I found that the following CSS rule provided the final state you wanted

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

那么您所要做的就是让关键帧步入那里，并明确说明他们期望的值

Then all you need is for your keyframes to step their way there, stating explicitly the values they expect like so

  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

Here's your pen with my changes:https://codepen.io/kcerb/pen/wvKyWLv?editors=1111

这篇关于如何使用popmotion pure从关键帧旋转，平移和缩放矩形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！