JavaScript动画库 Tween.js动画示例

28 min read

以下是一个使用Tween.js动画库创建动画的示例:

首先，我们需要引入Tween.js库:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/Tween.js"></script>

接下来，我们创建一个HTML元素来显示动画效果:

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>

然后，我们使用JavaScript代码来创建动画:

// 获取要执行动画的元素
var box = document.getElementById("box");

// 创建一个Tween.js动画对象
var tween = new TWEEN.Tween({ x: 0, y: 0 })
  .to({ x: 300, y: 300 }, 2000) // 设置动画的结束位置和持续时间
  .easing(TWEEN.Easing.Quadratic.Out) // 设置动画的缓动函数
  .onUpdate(function () {
    // 在动画更新时更新元素的位置
    box.style.left = this.x + "px";
    box.style.top = this.y + "px";
  })
  .start(); // 启动动画

function animate() {
  requestAnimationFrame(animate);
  TWEEN.update(); // 更新Tween.js库的动画状态
}

animate(); // 启动动画循环

在上面的示例中，我们通过Tween.js创建了一个从{x: 0, y: 0}到{x: 300, y: 300}的动画，并设置了动画持续时间为2000ms。使用easing方法设置了动画的缓动函数，这里使用了二次方缓动函数Quadratic.Out。在动画更新时，我们使用onUpdate方法更新了元素的位置，通过改变元素的left和top样式属性来实现。最后，使用TWEEN.update方法在每一帧中更新Tween.js库的动画状态，并使用requestAnimationFrame方法来创建一个动画循环。

通过上述示例，您可以学习如何使用Tween.js库来创建动画效果。您可以尝试不同的动画属性和缓动函数来实现不同的动画效果。