前言
前端动画是一个非常重要的环节，它可以为网页增添生命力，也可以让用户获得更好的视觉体验。而掌握动画常用库是作为一个前端工程师需要掌握的技能之一。在众多动画库中，Gm-tween 是一个非常不错的动画库，它具有 API 简单，易于使用，速度快等特点。接下来，本篇文章将为大家详细介绍 gm-tween 的使用方法，以及实际运用的示例。
安装
首先，我们需要使用 npm 命令来安装 gm-tween。打开终端窗口，输入以下命令：
npm install gm-tween --save
其中，--save 参数表示将 gm-tween 添加到你的项目的 package.json 文件中。
基本使用
安装完成后，在你的 JavaScript 中引入 gm-tween 库：
const tween = require('gm-tween');接下来，我们来创建一个简单的动画：
const obj = { x: 0, y: 0 };
const target = { x: 100, y: 200 };
tween(obj).to(target, 1000).start();以上代码表示，将一个对象从 {x:0, y:0} 移动到 {x:100, y:200}，动画时间为 1000ms。
以上是一个最基础的使用方法，下面，我们来详细介绍 gm-tween 的高级使用方法。
API & 详细说明
「位置」向「目标位置」移动
下面是一个基本的示例：
-- -------------------- ---- -------
----- --- - --- --- -- ----
----- ------ - --- ---- -- -----
----------
----------- -----
---------------------
------------ -- -
------------------ ------
--
---------以上代码表示，让一个对象从位置 {x:50, y:50} 移动到目标位置 {x:200, y:200}，动画时间为 1000ms，使用了 'outElastic' 缓动函数，同时在每帧更新时调用 console.log() 打印该对象的位置坐标。
缓动函数是用来调整动画速度的函数。gm-tween 总共内置了 30 种缓动函数，分别是：
- linear
- inQuad / outQuad / inOutQuad
- inCubic / outCubic / inOutCubic
- inQuart / outQuart / inOutQuart
- inQuint / outQuint / inOutQuint
- inSine / outSine / inOutSine
- inExpo / outExpo / inOutExpo
- inCirc / outCirc / inOutCirc
- inElastic / outElastic / inOutElastic
- inBack / outBack / inOutBack
- inBounce / outBounce / inOutBounce
「大小」从「初始大小」到「目标大小」
可以让一个元素从一个大小过渡到另一个大小，在 gm-tween 中实现也相对较简单，下面我们来看代码：
-- -------------------- ---- -------
----- --- - - -- ---- -- --- --
----- ------ - - -- ---- -- --- --
----------
----------- -----
---------------------
------------ -- -
------------------ -------
--
---------以上代码表示，在 1000ms 内让 obj 元素的初始大小 {w:100, h:100} 过渡到目标大小 {w:200, h:200}，同时使用了 outElastic 缓动函数，在每帧更新时调用 console.log() 打印大小。
「颜色」从「初始颜色」过渡到「目标颜色」
下面是一个演示不同颜色过渡效果的示例：
-- -------------------- ---- -------
----- --- - - -- ---- -- -- -- - --
----- ------ - - -- -- -- ---- -- --- --
----------
----------- -----
---------------------
------------ -- -
----- ----- - -------------------------- --------------------- -----------------------
-------------------
--
---------以上代码表示，在 3000ms 内将 obj 元素的初始红色过渡到目标颜色蓝绿色，过渡效果使用了 inOutCubic 缓动函数，在每帧更新时将颜色输出到控制台。
「旋转」从「初始角度」旋转到「目标角度」
gm-tween 可以非常轻松地实现元素的旋转动画。下面是一个基本示例：
-- -------------------- ---- -------
----- --- - - ------- - --
----- ------ - - ------- --- --
----------
----------- -----
---------------------
------------ -- -
------------------------
--
---------以上代码表示，在 2000ms 内，让一个元素在初始角度 0 的状态下 旋转到目标角度 360 的状态，过渡效果并使用了 inOutCubic 缓动函数，在每帧更新时将角度输出到控制台。
总结
在本篇文章中，我们深入了解了 gm-tween 的使用方法。包括如何安装和引用 gm-tween，以及基础用法和高级用法的 API 详解和示例。希望大家能够在实际工作中灵活使用 gm-tween 实现更好的动画效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e72255dee6beeee7504