28
Авг
2021

Плавное анимирование x, y

Я хочу написать анимацию плавного движения элемента от прошлого положения, до текущего (Так работает плавный курсор).
Но вообще не понимаю как это делать, опираясь на время.
Пример с анимацией, не опираясь на время: https://ru.stackoverflow.com/a/1206110/331312
Я сначала думал, что есть x1 y1, x2 y2 две точки. Надо плавно анимировать точку по пути от одной точки до другой. Но это не так. Не понимаю что делать. Подскажите

const rectangleNode = document.querySelector('.rectangle');

window.addEventListener('mousemove', (e) => {
  move(e.x, e.y, window.innerWidth, window.innerHeight);
});

function move(eventX, eventY, windowWidth, windowHeight) {
  const x = (eventX / windowWidth) * 2 - 1;
  const y = (eventY / windowHeight) * 2 - 1;

  const computedStyle = window.getComputedStyle(rectangleNode)
  const lastX = Number(computedStyle.getPropertyValue('--x'));
  const lastY = Number(computedStyle.getPropertyValue('--y'));

  animate(1000, (time, animationTime, progress) => {

    const interX = x + (lastX - x) * progress;
    const interY = y + (lastY - y) * progress;

    rectangleNode.style.setProperty('--x', interX);
    rectangleNode.style.setProperty('--y', interY);

    return true;
  });
}

function animate(seconds, func) {
  let startTime = null;

  animate.quantity = animate.quantity === undefined ? 0 : animate.quantity + 1;
  const animateQuantity = animate.quantity; // Запоминаем номер анимации

  function loopAnimation(timeStamp) {

    if (animate.quantity !== animateQuantity) { // Если номер текущей анимации и последней анимации не совпадает, то остановить анимацию
      return false;
    }

    startTime = startTime === null ? timeStamp : startTime;
    const time = timeStamp - startTime;

    const progress = (time / seconds) > 1 ? 1 : (time / seconds);
    const resFunc = func(time, seconds, progress);

    if (time < seconds && resFunc) {
      requestAnimationFrame(loopAnimation);
      return true;
    }
    return false;
  }

  requestAnimationFrame(loopAnimation);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --transitionTimingFunction: ease;
  --transitionDuration: 0.05s;
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  --r: 0;
  --g: 26;
  --b: 52;
  background-color: rgb(var(--r), var(--g), var(--b));
  color: white;
  overflow: hidden;
}

.rectangle {
  --x: 1;
  --y: 1;
  --maxTranslateX: 20px;
  --maxTranslateY: 20px;
  --background: linear-gradient(to right top, green, #71da71);
  font-size: 18px;
  font-weight: 500;
  --skewDeg: calc(-18deg * var(--x) * var(--y));
  transform: skew(0, var(--skewDeg));
  position: relative;
  line-height: 1.3;
}

.rectangle__body {
  padding: 35px 25px;
  background: var(--background);
  max-width: 180px;
  border-radius: 20px;
  position: relative;
  z-index: 2;
}

.rectangle__body-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background);
  border-radius: 20px;
  z-index: 1;
  opacity: 0.3;
  --maxTranslateX: 50px;
  --maxTranslateY: 50px;
  --translateX: calc( (var(--maxTranslateX) * var(--x) + 0px) * -1);
  --translateY: calc( (var(--maxTranslateY) * var(--y) + 0px) * -1);
  transform: translate3d( var(--translateX), var(--translateY), 0);
}

.rectangle__body-pos-relative {
  position: relative;
}

.rectangle__body-text {
  position: relative;
  z-index: 2;
}

.rectangle__body-text-span {
  display: block;
  --translateX: calc( var(--maxTranslateX) * var(--x));
  --translateY: calc( var(--maxTranslateY) * var(--y));
  transform: translate3d( var(--translateX), var(--translateY), 0);
}

.rectangle__body-text-shadow {
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(7px);
  color: rgba(0, 0, 0, 1);
  z-index: 1;
}
<div class="rectangle">

  <div class="rectangle__body-shadow">
  </div>

  <div class="rectangle__body">
    <div class="rectangle__body-pos-relative">

      <div class="rectangle__body-text">
        <span class="rectangle__body-text-span">Подразделения и сотрудников научных учреждений</span>
      </div>

      <div class="rectangle__body-text-shadow">
        Подразделения и сотрудников научных учреждений
      </div>

    </div>
  </div>

</div>

Источник: https://ru.stackoverflow.com/questions/1322255/%D0%9F%D0%BB%D0%B0%D0%B2%D0%BD%D0%BE%D0%B5-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-x-y

Тебе может это понравится...

Добавить комментарий