如果你需要在 web 开发中实现复杂的动画效果，那么你一定会用到 tween.js，一款十分流行的 JavaScript 动画库。但是，当你使用 tween.js 的时候，你可能会遇到一些问题，例如：在 tween.js 中定义的动画函数只是修改 CSS 样式，无法对 DOM 进行更复杂的操作。
这时，我们就需要引入 es6tween-plugin-render，这是一款可以与 tween.js 兼容的插件，它可以让你通过自定义 render 函数来执行更加复杂的操作，比如绘制自定义的 SVG 动画等。如果你想了解如何使用 es6tween-plugin-render，请按照本文的指导进行操作。
1. 安装
首先，你需要在你的项目中安装 es6tween-plugin-render，你可以在 npm 中使用以下命令进行安装：
npm install es6tween-plugin-render --save
2. 导入
在你的项目中导入 tweent.js 和 es6tween-plugin-render：
import * as THREE from 'three'
import * as TWEEN from 'tween.js'
import { Es6Tweener, Es6TweenerPluginRender } from 'es6tween-plugin-render'3. 配置
在项目中使用 es6tween-plugin-render 之前，我们需要对 Es6Tweener 进行一些配置。首先，我们需要创建一个 custom render 函数，并包括需要执行的操作（例如，将矩形放在画布的中心）：
-- -------------------- ---- ------- --- ------ - --------------------------------- --- --- - ----------------------- --- - - -- --- ------ - ----- --- --- --- --- -- - ---------------- -- ------------- -------------- --- - - ------------ - - --- - - ------------- - - ------------- - ------ -------------- - -- - - -- - - -- - - -- -
之后，我们需要将 render 函数附加到 Es6Tweener 中：
let tween = new TWEEN.Tween({ v: 0 })
.to({ v: 1 }, 1000)
.onUpdate((obj) => {
Es6TweenerPluginRender.update(render, obj.v)
})
.start()最后，我们可以在 Es6Tweener 的循环中执行 tween：
function render() {
window.requestAnimationFrame(render)
TWEEN.update()
}
Es6Tweener.load(<你的配置>)
Es6Tweener.start()
render()4. 示例
下面是一个简单的示例，它展示了如何将 circle 填充渐变颜色：
-- -------------------- ---- -------
--- ------ - ---------------------------------
--- --- - -----------------------
--- - - --
--- -------- - -------------------------- - -- - - -- -- -- -- --
------------------------ ----------
------------------------ ----------
--- ------ - ----- --- --- --- --- -- -
---------------- -- ------------- --------------
--- - - ------------ - -
--- - - ------------- - -
--- -------- - -------------------------- - -- - - -- -- -- -- --
------------------------ ----------
------------------------ ----------
------------- - --------
---------------
---------- -- -- -- - - --------
----------
-
--- ----- - --- ------------- -- - --
----- -- - -- -----
--------------- -- -
------------------------------------- ------
--
--------
-------- -------- -
------------------------------------
--------------
-
-----------------------
------------------
--------通过以上示例代码，你可以很容易地实现自定义的图形动画呈现。在设计项目时，工程师可以根据项目需要自己定义相应的 render 函数，并通过 es6tween-plugin-render 插件拓展 tween.js 动画库的使用，便于更加灵活的实现相应的动态图形效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c7e81e8991b448e5fab