javascript实现缓动动画效果

下面是详细讲解“JavaScript实现缓动动画效果”的攻略。

什么是缓动动画？

缓动动画是在动画开始和结束的时候逐渐加速或减速，它不像匀速动画那样是一直保持同样的速度，而是可控的速度随时间而变化。

缓动动画的实现原理

缓动动画的实现原理是利用数学函数计算每一帧动画的时间间隔和位置坐标，并根据计算结果以定时器的方式实现动画效果。

常用的缓动函数有很多，比如线性缓动、二次缓动、三次缓动、弹性缓动等等，根据实际应用场景选择合适的缓动函数能够让你的动画效果更加优美。

如何实现缓动动画？

在JavaScript中，实现缓动动画通常有两种方式：

使用定时器实现缓动动画

这种方式需要先获取需要操作的DOM元素，然后在定时器中更新DOM元素的属性值，从而实现缓动动画效果。

// 获取需要添加动画的元素
const elem = document.querySelector('.elem')

// 设置目标位置及缓动函数
const target = 5000
const easing = 'easeOutExpo'

// 开始动画
animate(elem, 'scrollLeft', target, 2000, easing)

function animate(elem, prop, target, duration, easing, callback) {
  const start = elem[prop]
  const time = performance.now()

  const raf = requestAnimationFrame(function tick(t) {
    const elapsed = t - time 
    const progress = Math.min(elapsed / duration, 1)
    const value = start + (target - start) * Easing[easing](progress)

    elem[prop] = value

    if (progress < 1) {
      requestAnimationFrame(tick)
    } else {
      callback && callback()
    }
  })
}

const Easing = {
  linear: function(t) {
    return t
  },
  easeInExpo: function (t) {
    return t === 0 ? 0 : Math.pow(2, 10 * (t - 1))
  },
  easeOutExpo: function (t) {
    return t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
  }
}

在上面这段代码中，我们首先获取了需要添加动画的元素，然后定义了一些参数，例如目标位置、缓动函数、动画时长等。最后，我们通过requestAnimationFrame()方法来实现缓动动画的效果，同时使用Easing对象存放不同的缓动函数，以便在其他动画中也可以使用。

使用CSS过渡实现缓动动画

使用CSS过渡实现缓动动画需要先定义CSS样式，通过添加、删除CSS类的方式来触发动画效果。这种方式比使用定时器实现的方式更加简单，而且CSS过渡也可以自动处理硬件加速和性能问题。

<div class="elem">Hello, world!</div>

.elem {
  transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);
}

.elem.move {
  transform: translateX(200px) translateY(50px);
}

// 获取需要添加动画的元素
const elem = document.querySelector('.elem')

// 添加动画
elem.classList.add('move')

在上面这段代码中，我们首先定义了一个DIV元素，然后定义了两个CSS样式，其中.elem类是用来设置DIV元素的缓动动画过程，.move类则用来设置DIV元素的位移。最后在JavaScript中，我们通过添加.move类来触发DIV元素的缓动动画效果。

示例说明

下面是两个简单的示例，分别使用两种不同的方式来实现缓动动画效果。

示例一：使用定时器实现缓动动画

HTML：

<div class="elem">Hello, world!</div>

CSS：

.elem {
  width: 100px;
  height: 100px;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

JavaScript：

// 获取需要添加动画的元素
const elem = document.querySelector('.elem')

// 设置目标位置及缓动函数
const target = 200
const easing = 'easeOutExpo'

// 开始动画
animate(elem, 'left', target, 1000, easing)

function animate(elem, prop, target, duration, easing, callback) {
  const start = elem.getBoundingClientRect()[prop]
  const time = performance.now()

  const raf = requestAnimationFrame(function tick(t) {
    const elapsed = t - time 
    const progress = Math.min(elapsed / duration, 1)
    const value = start + (target - start) * Easing[easing](progress)

    elem.style[prop] = value + 'px'

    if (progress < 1) {
      requestAnimationFrame(tick)
    } else {
      callback && callback()
    }
  })
}

const Easing = {
  linear: function(t) {
    return t
  },
  easeInExpo: function (t) {
    return t === 0 ? 0 : Math.pow(2, 10 * (t - 1))
  },
  easeOutExpo: function (t) {
    return t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
  }
}

在这个示例中，我们先获取了需要添加动画的DIV元素，然后设置了目标位置及缓动函数。最后，在animate()函数中通过requestAnimationFrame()方法来实现了缓动动画效果。当动画效果完成后，可以通过callback函数来添加其他的动作。

示例二：使用CSS过渡实现缓动动画

HTML：

<div class="elem">Hello, world!</div>

CSS：

.elem {
  width: 100px;
  height: 100px;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);
}

.elem.move {
  left: 200px;
  top: 0;
}

JavaScript：

// 获取需要添加动画的元素
const elem = document.querySelector('.elem')

// 添加动画
elem.addEventListener('click', function() {
  elem.classList.add('move')
})

在这个示例中，我们先定义了一个DIV元素，并为其设置了样式。通过CSS样式中的transition属性，即可实现缓动动画的效果。最后，在JavaScript中，我们为DIV元素添加了一个click事件，当用户点击DIV元素时，即可通过添加.move类来触发缓动动画效果。

总结

通过以上两个示例，我们可以看出，实现缓动动画的方式有很多，不同的应用场景需要选择不同的方式来实现。在实现缓动动画时，要根据目标位置、缓动函数、动画时长等参数来计算每一帧的时间间隔和位置坐标，最后通过定时器或CSS过渡来触发动画效果。为了提高动画效果的性能和流畅度，我们可以使用requestAnimationFrame()方法来代替setTimeout()方法，并使用硬件加速等技术优化动画效果。