HTML-缓动函数-贝萨尔曲线-CSDN博客

本文链接：https://blog.csdn.net/JackieDYH/article/details/140045036

缓动函数速查表 (easings.net)-cubic-bezier(.06,.44,.94,.7) ✿ cubic-bezier.com

展示了如何使用easeOutSine函数来实现一个元素的平滑移动动画。这个demo创建了一个按钮，当点击它时，会使页面上的一个元素向右平滑移动。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>easeOutSine Animation Demo</title>
<style>
  #animateMe {
    width: 100px;
    height: 100px;
    background-color: steelblue;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>

<button id="startAnimation">Start Animation</button>
<div id="animateMe"></div>

<script src="animation.js"></script>
</body>
</html>

`animation.js`

function easeOutSine(x) {
  return Math.sin((x * Math.PI) / 2);
}

function animate(element, target, duration) {
  let start = null;
  const beginningPosition = parseInt(element.style.left, 10) || 0; // 使用parseInt确保得到一个数字
  const distance = target - beginningPosition;

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = (timestamp - start) / duration;
    const easedProgress = easeOutSine(progress > 1 ? 1 : progress); // 确保进度不超过1
    const newPosition = beginningPosition + distance * easedProgress;

    element.style.left = newPosition + 'px';

    if (progress < 1) {
      requestAnimationFrame(step);
    }
  }

  requestAnimationFrame(step);
}

document.getElementById('startAnimation').addEventListener('click', function() {
  const element = document.getElementById('animateMe');
  animate(element, 300, 1000); // 将元素在1000毫秒内移动到距离其起始位置300px的地方
});