java between
简短介绍
老实说，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颜色字符串的库。
3. lerp —一个简洁的线性插值函数，由Matt DesLauriers编写。
实现使用插件API，并且在插件对象内部包含以下功能：
- 测试
startValue是否应由颜色插件覆盖
- 初始化
startValue和destValue。 并且可以立即将颜色字符串转换为可以轻松插值的[r, g, b]格式的数组。
- 颜色数组插值。 此步骤在补间对象的
update()函数内部执行。 输出转换回字符串，并存储在this.value。
积分
因此，让我们考虑一下，我们都是webpack的用户，并且对dom-color插件感兴趣，我们希望以通常的方式将其包括在和谐模块中。 它比浏览器复杂一些，但事实证明它是如此简单。 我们唯一要做的就是导入ColorPlugin（默认情况下）并将其分配给内部的Between._plugins对象。 属性名称无关紧要，但我建议您保持其名称相关以避免进一步的混乱。
有关集成的更多信息，请参见GitHub上的文档 。
总结一下…
…对于我们来说，创建新的东西，重新设计旧的但金色的图案以顺应现代ES6趋势并通过插件支持集成来扩展功能是一次有趣的经历。
我们真的希望您尝试使用between.js并加入我们的社区来支持开源软件开发，所以请打开一个新期刊并提出您的想法。 我们愿意尽快推出更多插件！
非常感谢Alexandr Kornienko的合作，他帮助我编写了这篇文章，并开发了一些很酷的视觉演示来简化。
翻译自: https://hackernoon.com/writing-a-javascript-tweening-engine-between-js-b510a299c82c
java between
2339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
