简介
mojs-util-tweenable 是 mojs 团队开发的一个轻量级动画库，它是使用 Tweenable 库构建的。该库允许你使用相同的缓动算法来编写动画路径和选项的函数。
该库提供了但不限于以下的服务：
- 使用公式构建自定义缓动。
- 设置时间线分别挂载事件。
- 支持主要浏览器和 IE。
安装
NPM:
$ npm install mojs-util-tweenable --save
CDN:
<script src="https://cdn.jsdelivr.net/npm/mojs-util-tweenable.js"></script>
引用:
const Tweenable = require('mojs-util-tweenable');使用
1. 基础用法
快速设定一个动画匀速从 0 到 100。
const startValue = { x: 0 };
const endValue = { x: 100 };
const options = { duration: 1000 };
new Tweenable().tween(startValue, endValue, options).on('update', ({ x }) => {
console.log(x);
});2. 缓动算法
在路径函数 tweenOptions.easing 和选项函数 tweenConfig.easing 中使用缓动函数。不同的缓动函数可以让你的动画变得不同。
-- -------------------- ---- -------
----- --------- - --
----- --------- - ----
----- ------ - -
-
-- ----
-- ------------
-- ------
--
-
-- --------
-- ------
-- ------------
--
--
----- ------- - -
--------- -----
------- --------------- ------
--
----- ----------- - --------------
----- ----------- - ------- - - - ------------
----- -------- - --- ------------
---------------------- -- -- -
----- ----- - ----------- - --
----- -------- - -----
----- ------ - --------------- - ----------
----- ------ - --------------- - ----------
----- ---- - --------------- - ----------
----- ---- - --------------- - ----------
----- ---------- - -
-- -------
-- -------
--
----- -------- - -
-- -----
-- -----
--
----- ------------ - -
---------
------- -
-- ---------------------
-- ---------------------
--
--
--------------
-------- -- --- --------------- -- ------------------- - - ------
-------- -- -------------------------- --------- --------------
-------- -- --- --------------- -- ------------------- -------
-------- -- ------------------------ ----------- ---------------
---3. 时间线
时钟是一种应用常常需要的特别的时间线。在移动物件时，使用 then 将分别建立起新的时间线对象作为分配在其他物件上时的协格(补间动画)。
-- -------------------- ---- ------- ----- ---------- - - -- -- -- - -- ----- -------- - - -- ---- -- --- -- ----- ------- - - --------- ---- -- ----- -------- - --- ------------ -------------- -------- -- -------------------------- --------- --------- -------- -- --- --------------- -- ------------------- ------- -------- -- ------------------------ ----------- ----------
结语
本文主要介绍了 npm 包 mojs-util-tweenable 的使用方法，包括了基础用法、缓动算法和时间线。通过深入浅出的介绍和示例代码帮助读者更好的掌握该库的使用方法和原理。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc981e8991b448dd4c1