JavaScript实现缓动动画

当网页上的元素发生位移、大小或透明度等变化时，经常会需要添加缓动动画效果，用来让这些变化更加平滑和自然。而JavaScript可以通过改变CSS样式属性值来实现缓动动画效果，下面我将详细讲解一下JavaScript实现缓动动画的完整攻略。

步骤一：获取元素及其样式值

首先，需要获取到需要进行缓动动画的元素，以及元素的样式属性值。一般可以使用document.querySelector或document.getElementById等方法获取到元素。

代码示例：

const target = document.querySelector('.target-element');
const targetStyles = getComputedStyle(target);

步骤二：计算起始值和目标值

接下来，需要根据需要改变的CSS属性的起始值和目标值来计算出需要执行的缓动动画效果。这里需要使用一个缓动函数，我们可以使用一些第三方库来完成，例如Tween.js、GSAP等，也可以自己手写一个缓动函数。

代码示例：

const startValue = parseFloat(targetStyles.getPropertyValue('left'));
const endValue = 300;
const duration = 1000;
let startTime = null;

function easeOutCubic(t) {
  return 1 - Math.pow(1 - t, 3);
}

function startAnimation(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsedTime = timestamp - startTime;
  const progress = elapsedTime / duration;
  const currentValue = startValue + (endValue - startValue) * easeOutCubic(progress);
  target.style.left = currentValue + 'px';
  if (progress < 1) {
    requestAnimationFrame(startAnimation);
  }
}
requestAnimationFrame(startAnimation);

步骤三：执行动画

在计算出起始值和目标值以及缓动函数之后，就可以执行缓动动画了。这里使用requestAnimationFrame方法来进行动画帧的循环，当动画结束时停止动画帧的循环。

代码示例：

function startAnimation(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsedTime = timestamp - startTime;
  const progress = elapsedTime / duration;
  const currentValue = startValue + (endValue - startValue) * easeOutCubic(progress);
  target.style.left = currentValue + 'px';
  if (progress < 1) {
    requestAnimationFrame(startAnimation);
  }
}
requestAnimationFrame(startAnimation);

示例一：Left属性的缓动动画

假设我们需要对一个元素的left属性进行缓动动画，将其移动到同级元素的右侧。

代码示例：

<div class="container">
  <div class="target-element"></div>
  <div class="placeholder"></div>
</div>

.container {
  position: relative;
}
.target-element {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}
.placeholder {
  display: inline-block;
  width: 100px;
  height: 100px;
}

const target = document.querySelector('.target-element');
const targetStyles = getComputedStyle(target);

const startValue = parseFloat(targetStyles.getPropertyValue('left'));
const endValue = target.nextElementSibling.offsetLeft;
const duration = 1000;
let startTime = null;

function easeOutCubic(t) {
  return 1 - Math.pow(1 - t, 3);
}

function startAnimation(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsedTime = timestamp - startTime;
  const progress = elapsedTime / duration;
  const currentValue = startValue + (endValue - startValue) * easeOutCubic(progress);
  target.style.left = currentValue + 'px';
  if (progress < 1) {
    requestAnimationFrame(startAnimation);
  }
}
requestAnimationFrame(startAnimation);

示例二：Opacity属性的缓动动画

假设我们需要对一个元素的opacity属性进行缓动动画，将其从0变为1。

代码示例：

<div class="target-element"></div>

.target-element {
  width: 100px;
  height: 100px;
  background-color: red;
  opacity: 0;
}

const target = document.querySelector('.target-element');
const targetStyles = getComputedStyle(target);

const startValue = parseFloat(targetStyles.getPropertyValue('opacity'));
const endValue = 1;
const duration = 1000;
let startTime = null;

function easeOutCubic(t) {
  return 1 - Math.pow(1 - t, 3);
}

function startAnimation(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsedTime = timestamp - startTime;
  const progress = elapsedTime / duration;
  const currentValue = startValue + (endValue - startValue) * easeOutCubic(progress);
  target.style.opacity = currentValue;
  if (progress < 1) {
    requestAnimationFrame(startAnimation);
  }
}
requestAnimationFrame(startAnimation);

以上就是JavaScript实现缓动动画的完整攻略，希望能对你有所帮助。