用Between.js编写Java补间引擎-CSDN博客

本文介绍了如何从头开始开发一个JavaScript补间引擎，重点是Between.js，它提供了简单易用的API，支持ES6编写，并且通过插件功能扩展了功能。文章详细阐述了API设计、缓动效果、颜色插件开发以及测试自动化流程，旨在提高开发者的工作效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简短介绍

老实说，Javascript生态系统中已经有大量的补间引擎，有很多（流行的）补间引擎，例如Tween.js 和 GSAP 。

我喜欢Tween.js的简单性和可访问性以及GSAP的性能/流畅性，因此都有PROS和CONS。但是，网络正在向前发展，需要升级库以满足当前的条件。

一个月前，我决定尝试自己的技能来编写自己的补间引擎，这是我的工作方式……

准备和设置

每个现代图书馆都需要使用Javascript生态系统中的出色工具进行包围，例如整理，单元测试，测试覆盖率。理想情况下，我将包括基准测试和更多直观的示例，但我会说在撰写本文时它们还很不完整。

这是我用于项目维护的出色工具列表：

Ava.js - tur未来派JavaScript测试人员
Istanbul.js —测试覆盖率分析工具
XO — JavaScript幸福样式短毛绒

开源存储库的每一行都应按特定规则进行整理和测试，并生成大量软件供数百万人进一步使用。这就是为什么我喜欢介绍这些工具来帮助您自动化和保护开发工作流程的原因。

为了远程运行测试/覆盖范围，我们使用Travis CI，它在开源社区中被广泛使用。它是这样的： https : //travis-ci.org/sasha240100/between.js

概念与API

同时，最重要和最有趣的部分是API开发。从研究开始，研究类似开源软件的现有实现，并确保您确实需要创建新的东西，而不是使用出色且值得信赖的工具。

以我为例，我只想用中间件支持在ES6中编写适当的Tween.js替换。那就是促使我编写Between.js的原因 。

一切都那么简单。是的，它看起来与Tween.js / GSAP类似，只是因为这种管道模式很棒。而且没有什么不好的。

那么Tween.js到底出了什么问题（不是很好） ？对于我（个人），我将强调使用对象的必要性。您可以插值/补间的唯一结构是对象。

在ween.js中，我们决定对所有内容进行补间。这样，您就可以插值对象，数组，数字甚至是字符串（借助插件）。是的，例如，您可以从rgb(255, 0, 0)到rgba(65, 255, 134, 0.5) rgb(255, 0, 0)进行补间。

Ps：…甚至是十六进制值，例如#008B8B ，根据#008B8B ，它是“青色4”颜色。

上面的魔法可以使用的帮助来实现dom-color.js插件的between.js。 我们将在文章结尾处再次讨论该主题。

缓和

在开发between.js的某个点上，我们认为制作一个功能强大且易于使用的补间API会很棒。以下是基本的宽松代码示例：

我们使用了easing-functions包，并通过Between.Easing对象公开了其功能。因此，如果您打算扩展easing集合，请对该软件包进行贡献，我们将在依赖项中更新其版本以包含更多的easing品种。目前，我们支持31种宽松模式：

根据您的技能和经验，缓解API可能是一种功能强大的工具，您可以在以后的项目中尝试使用它，例如，对象可以转换过渡：

几天前，github贡献者添加了另一个功能-“暂停补间” pause() ， play() ， isPaused()方法。这些可用于与补间的动态交互，并扩展视频游戏和创意网站在使用between.js时的可能性。以下是如何使用它的简单示例：

颜色插件

在Between.js几乎准备就绪时，我们决定开发一个其他颜色插件，该插件提供了一种舒适的颜色更改方式。

插件支持的颜色类型：

RGB或RGBA
十六进制
高速钢
关键字（红色，绿色…）

Color插件里面有什么？

我们使用了以下依赖项：

color —一个漂亮的库，用于initialize()函数内部的颜色转换

JavaScript库，用于不可变的颜色转换和对CSS颜色字符串的支持。

2. color-string —我们用它来检查字符串是否是color关键字。要么是上面的库的依赖项。

用于解析和生成CSS颜色字符串的库。

颜色串
CSS颜色字符串的解析器和生成器 www.npmjs.com

3. lerp —一个简洁的线性插值函数，由Matt DesLauriers编写。

勒普
准线性插值函数 www.npmjs.com

实现使用插件API，并在插件对象内部包含以下功能：

测试startValue是否应由颜色插件覆盖

初始化startValue和destValue 。并且可以立即将颜色字符串转换为可以轻松插值的[r, g, b]格式的数组。

颜色数组插值。此步骤在补间对象的update()函数内部执行。输出转换回字符串，并存储在this.value 。

积分

因此，让我们考虑一下，我们都是webpack的用户，并且对dom-color插件感兴趣，我们希望以通常的方式将其包括在和谐模块中。它比浏览器复杂一些，但事实证明它是如此简单。我们唯一要做的就是导入ColorPlugin（默认情况下）并将其分配给内部的Between._plugins对象。属性名称无关紧要，但我建议您保持其名称相关以避免进一步的混乱。