Как вращать, переводить и масштабировать прямоугольник с ключевого кадра, используя popmotion pure? - PullRequest
Новая
       128

Как вращать, переводить и масштабировать прямоугольник с ключевого кадра, используя popmotion pure?

4 голосов
/ 28 апреля 2020

Как заставить последний ключевой кадр повернуть мой прямоугольник на угол 35 градусов, используя popmotion pure?

enter image description here 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)
})

Ответы [ 2 ]

5 голосов
/ 30 апреля 2020

Для такого рода проблем я рекомендую в вашем браузере просмотреть значения в формате 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

2 голосов
/ 07 мая 2020

Вот решение с использованием Popmotion Pure, использующее встроенные параметры преобразования, а не строку преобразования: https://codepen.io/JeremyRoundill/pen/xxwYpdJ

Вы правы, что проблема основана на математике. Вам нужно установить размеры вашего прямоугольника в CSS, чтобы они были такими, какими вы хотите в конце анимации.

Проблема в том, что Popmotion Pure будет применяться rotateZ, прежде чем применить scaleX.

Решение:

CSS использует ширину, чтобы установить желаемые размеры в конце анимации, и преобразование, чтобы установить желаемые размеры в начале. Если вы установите 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 до width = 300px. Затем последний ключевой кадр поворачивается на -35 градусов вокруг оси Z. 

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