在使用前端开发中，场景动画的实现是非常重要的，而实现过程中需要用到的动画库是非常多的。今天我们要介绍的是 npm 包中的一个优秀动画库：tweeny.js，它能够帮助我们实现多种复杂的动画效果，下面就为大家详细介绍 tweeny.js 的使用方法。
什么是 tweeny.js
tweeny.js 是一款非常小巧的 JavaScript 动画库，它能够帮助我们实现比如过渡等效果。它的优点在于支持多种不同的 Easing 函数，也可以用来处理 DOM、SVG 和自定义画布的动画等。tweeny.js 是一款十分强大的动画库，支持跨平台，能够完美兼容多个前端框架。
tweeny.js 的安装和使用
- 使用 npm 安装
我们可以使用 npm 来安装 tweeny.js，它的安装方式很简单，只需要在命令行中运行下面的命令就行了：
npm install tweeny
- 引入 tweeny.js
安装完成后，在需要使用 tweeny.js 的网页中引入以下代码：
import tween from 'tweeny'
引入过后，我们就可以使用 tweeny.js 提供的动画函数库来实现我们所需的动画了。
tweeny.js 的使用方法
1. tween.to() 方法
tween.to() 方法是 tweeny.js 实现动画过渡的最常用方法。它的基本使用方式如下：
tween.to(element, duration, {css: {property1: value1, property2: value2}, ease: tween.Easing.easeInOutBack});element 表示需要进行动画的元素，duration 表示动画的持续时间，css 属性用于确定动画的样式值，{property: value} 表示想要动画的 CSS 属性和值，ease 是 Tween 缓动函数类型。
完整的例子如下：
tween.to(element, 1000, {
css: {
top: '100px',
left: '400px',
opacity: 0,
},
ease: tween.Easing.easeInOutBack
});这段代码实现了将元素移动到 (left: 400px, top: 100px) 的位置，并且在过程中元素的透明度逐渐减小，最后消失。
2. tween.from() 方法
tween.from() 方法和 tween.to() 方法非常相似，区别在于它会从初始状态开始动画，逐渐变化到指定的属性值，它的基本使用方式如下：
tween.from(element, duration, {css: {property1: value1, property2: value2}, ease: tween.Easing.easeInOutBack});完整的例子如下：
tween.from(element, 1000, {
css: {
left: '-100px',
opacity: 0,
},
ease: tween.Easing.easeInOutBack
});这段代码会实现将元素从左边移动到中间，同时不断加强元素的透明度，直到恢复到初始透明度。
3. tween.chain() 方法
tween.chain() 方法允许我们按照指定的顺序执行一系列动画，在前一动画完成后才执行下一个动画。tween.chain() 的基本使用方式如下：
tween.chain(tween.to(element, duration1, {
css: {property1: value1, property2: value2},
ease: tween.Easing.easeInOutBack
}), tween.from(element, duration2, {
css: {property3: value3},
ease: tween.Easing.easeInOutBack
}));完整的例子如下：
-- -------------------- ---- -------
------------
----------------- ----- -
---- -
---- --------
----- --------
-------- --
--
----- --------------------------
---
------------------- ----- -
---- -
----- ---------
-------- --
--
----- --------------------------
--
--这段代码先执行第一段动画，将元素移动到指定位置，然后再执行第二段动画，将元素移动回初始位置。
总结
tweeny.js 是一款十分优秀的动画库，支持多种 Easing 函数，使用方法也很简单，只需要记住以下几个方法：tween.from()、tween.to() 和 tween.chain() 即可实现复杂的动画效果。希望本文对大家有所指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aee81e8991b448d895c