[翻] tween.js 中文使用指南

Tween.js 是一款强大的 JavaScript 动画库，它简化了在 Web 开发中创建动画的过程。本指南将介绍如何使用 Tween.js，包括其基本语法和用法示例。

安装

你可以通过多种方式获取 Tween.js，例如从 GitHub 仓库 下载源代码或使用 npm 安装：

npm install tween.js

使用

创建动画对象

在开始使用 Tween.js 之前，你需要先创建一个动画对象。你可以通过以下方式创建一个基本的动画对象：

var tween = new TWEEN.Tween(object);

其中 object 表示要进行动画变换的对象。动画对象还支持链式调用，例如：

var tween = new TWEEN.Tween(object)
  .to(target, duration)
  .easing(easingFunction)
  .onUpdate(updateFunction)
  .onComplete(completeFunction);

上述代码中，target 表示动画目标状态，duration 表示动画持续时间（以毫秒为单位），easingFunction 表示缓动函数，updateFunction 表示每次更新时执行的函数，而 completeFunction 表示动画完成后执行的函数。

执行动画

当你创建完动画对象后，你需要执行动画。你可以使用以下方法执行动画：

tween.start();

你也可以使用以下方法停止动画：

tween.stop();

缓动函数

Tween.js 支持多种缓动函数，你可以根据自己的需求选择不同的缓动函数。以下是 Tween.js 支持的一些常用缓动函数：

• TWEEN.Easing.Linear.None
• TWEEN.Easing.Quadratic.In
• TWEEN.Easing.Quadratic.Out
• TWEEN.Easing.Quadratic.InOut
• TWEEN.Easing.Cubic.In
• TWEEN.Easing.Cubic.Out
• TWEEN.Easing.Cubic.InOut
• TWEEN.Easing.Exponential.In
• TWEEN.Easing.Exponential.Out
• TWEEN.Easing.Exponential.InOut
• TWEEN.Easing.Sinusoidal.In
• TWEEN.Easing.Sinusoidal.Out
• TWEEN.Easing.Sinusoidal.InOut
• TWEEN.Easing.Elastic.In
• TWEEN.Easing.Elastic.Out
• TWEEN.Easing.Elastic.InOut
• TWEEN.Easing.Back.In
• TWEEN.Easing.Back.Out
• TWEEN.Easing.Back.InOut
• TWEEN.Easing.Bounce.In
• TWEEN.Easing.Bounce.Out
• TWEEN.Easing.Bounce.InOut

示例代码

以下是一个使用 Tween.js 创建动画的示例代码：

-- -------------------- ---- -------
--------- -----
------
------
  ------- -----------------------------------------------------------------------------------
-------
------
  ---- -------- ------------- ------ ------- ------ ----------------- ------------

  --------
    --- --- - -------------------------------

    --- ----- - --- ----------------------
      ----- ------ -------- ------- ------- -- -----
      -------------------------------------
      -------------------- -
        ------------------------- - ------ - ------------------ - -- - - ------------------ - -- - - ------------------ - ----
      --
      ---------

    -------- --------- -
      -------------------------------
      ---------------
    -

    ----------
  ---------
-------
-------

上述代码中，我们使用 Tween.js 创建了一个动画对象，并将其应用于一个 div 元素。动画会让该元素的宽度和高度从 100px 增加到 200px，持续时间为 1 秒，并且使用 TWEEN.Easing.Quadratic.InOut 缓动函数。我们还使用了 onUpdate() 回调函数来更新元

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5607