Okikio / Animate使用Web动画API构建的AnimeJs-Esque库
Web动画API允许我们构造动画并控制与JavaScript的播放。 API打开浏览器的动画引擎到开发人员，旨在利于CSS动画和转换的实现，将门打开到未来的动画效果。它是在Web上设置动画的最表情方法之一，让浏览器在没有黑客，胁迫或window.RequestanimationFrame（）的情况下进行自己的内部优化。
使用Web动画API，我们可以将来自样式表的交互式动画移动到JavaScript，将演示文稿从行为分开。我们不再需要依赖DOM - 繁重技术，例如将CSS属性和范围类写入元素以控制播放方向。与纯粹的声明性CSS不同，JavaScript还可以让我们动态地将值从属性设置为持续时间。对于建立自定义动画库和创建交互式动画，Web动画API可能是作业的完美工具。让我们看看它能做什么！
对于本文的其余部分，我有时会将Web动画API称为WAAPI。在Web动画API上搜索资源时，您可能会通过搜索“Web动画API”来误入歧途，因此可以轻松找到资源，我觉得我们应该采用Waapi术语;告诉我你在下面的评论中的想法。
@Okikio / Animate是现代Web的动画库。它是由AnimatePlus和Animejs的启发;它专注于性能和开发人员体验，并利用Web动画API以小尺寸的尺寸传递黄油光滑的动画，称重〜5.79 KB（缩小和谷拓）。
在2020年，我决定制作一个更高效的Pjax库，类似于Rezo Zero的启动块项目，但随着Barbajs的易用性。我觉得开始块更容易用自定义功能扩展，并且可以更快，更快，更易于使用。
注意：如果您不知道PJAX库是什么，我建议签出Moox / pjax;简而言之，PJAX允许使用FETCH请求和切换DOM元素之间的页面之间的平滑转换。
随着时间的推移，我的意图转移了，我开始注意到AWWwards.com的网站多久使用频率，但往往避免了网站和浏览器的自然体验。许多网站乍一看看起来很酷，但实际的用法经常被讲述了一个不同的故事 - 滚动栏经常被覆盖，预取往往太渴望，没有强大的互联网连接，CPU和/或GPU的人缺乏准备。所以，我决定逐步加强我要建造的图书馆。我开始了我称之为GitHub repo Okikio / Native中存储的“本机倡议”;一种以高度性能，兼容和轻巧的方式引入所有酷炫和现代特征的手段。
对于我设计的本机倡议，@ okikio / native的pjax图书馆;在测试实际项目时，我遇到了Web动画API，并实现了没有利用它的库，所以我开发了@ Okikio / Animate，以创建符合浏览器的动画库。 （注意：这是在2020年，围绕同一时间使用Wellyshen的使用Web-Animations正在开发出来。如果您使用的反应并需要一些类似效果的快速动画，请使用-Web-Animations是一个很好的合适。）首先，它应该是简单的包装器，但只需一点，我建立在它上，它现在处于80％的功能奇偶校验，具有更加成熟的动画库。
注意：您可以在Github Repo Okikio / Native上阅读本机主动性以及@ Okikio / Native库。此外，Okikio / Native是一个与@ Okikio / native和@ Okikio / Animate在其中的子包中的Monorepo。
Web动画API在设计中非常开放。它是独立的，但它不是最开发人员友好或直观的API，所以我开发了@ Okikio / Animate，以充当Waapi周围的包装，并介绍你所知道的功能和从其他更成熟的动画库中的功能（有些包括新功能）到Web动画API的高性能性质。为项目的自述文件提供更多的背景。
@ Okikio / Animate通过创建新实例的动画（一个充当Web动画API的包装）来创建动画。
从＆＃34导入{动画}; @ Okikio / Animate＆＃34 ;;新动画（{target：[/ * ... * /]，持续时间：2000，// ...}）;
动画类接收了一组动画的目标，然后创建一个waapi动画实例列表，以及主动画（主动画是设置为以非可见元素设置为动画的小动画实例，它存在于此跟踪各种目标元素的动画进度的方法），动画类然后播放每个目标元素动画实例，包括主动画，创建平滑动画。
主动画是在有关WAAPI的不同浏览器供应商实现中的准确性。主动画存储在Animate.Prototype.maination中，而目标元素的动画实例存储在弱势图中，其中密钥是其关键文件夹效应。您可以使用Animate.Prototype.getAnimation（EL）访问特定目标的动画。
您不需要完全理解先前的句子，但它们将有助于您了解okikio /动画的内容。如果您想了解有关Waapi如何工作的更多信息，请查看MDN，或者您想了解有关@ Okikio / Animate库的更多信息，我建议在Github上查看Okikio / Native项目。
默认情况下，创建一个新的动画实例非常讨厌，因此，我创建了动画函数，每次调用时都会创建新的动画实例。
从＆＃34导入动画; @ Okikio / Animate＆＃34 ;; // Orimport {Animate} from＆＃34; @ Okikio / Animate＆＃34 ;; Animate（{target：[/ * ... * /]，持续时间：2000，// ...}）;
从＆＃34导入动画; @ Okikio / Animate＆＃34 ;; //如果您通过脚本标签安装它：const {armate} = window.animate;（async（）=＆gt; {let [选项] =等待Animate（{target：＆＃34; .div＆＃34; //自动添加用于变换CSS属性的单元translatex：[0,300]，持续时间：2000，//以毫秒为单位：2，}）;控制台.log（＆＃34;动画完成...＆＃34;）;}）（）;
您可以在Github Repo中找到动画，动画.pug文件中此演示的源代码。并且，是的，演示使用哈巴狗，并且是一个相当复杂的设置。我强烈建议看着自述文件作为入门的底漆。
原生计划使用Gitpod，因此如果您想与演示一起玩，我建议点击自从整个环境为您设置的整个环境以来，单击“打开GitPod”链接 - 没有什么可以配置的。
您还可以查看此Codepen Collection中的一些示例我放在一起。在大多数情况下，您可以将代码从Animejs移植到@ Okikio / Animate，只有几到否问题。
我可能会提及@ Okikio / Animate支持目标动画目标的目标和目标关键字。 @ Okikio / Animate将将目标列表与一个列表合并到一个列表中，并使用集合删除任何重复的目标。 @Okikio / Animate支持函数作为动画选项，因此您可以使用类似于Animejs的惊人。 （注意：参数的顺序是不同的，在“动画选项＆amp; css属性中作为自述文件的方法”部分阅读。）
@Okikio / Animate并不完美;没有什么是真正的，并且看到Web动画API是一个不断改进的生活标准，@ Okikio / Animate本身仍然有很多空间要增长。也就是说，我不断尝试改进它，并希望你的意见是如此，所以请打开一个新问题，创建拉出请求，或者我们可以在Github项目中讨论。
第一个限制是它并没有真正具有内置的时间轴。有几个原因：
我没时间了。我仍然只有一个学生，没有很多时间开发我想要的所有项目。
由于支持异步/等待编程，我不认为需要正式的时间表。此外，我将TimelineOffset添加为动画选项，是否应该有史以来需要创建类似于Animejs中的时间线的东西。
随着组的效果和序列效果即将推出，我认为最好将包裹留下小，直到实际需要出现。在这篇文章中，我高度建议阅读Daniel C. Wilson系列在Waapi上，特别是第四部分涵盖了组效应和序列效果。
@ Okikio / Animate的另一个限制是它缺乏对自定义更容易的支持，如春季，弹性等。但是检查Jake Archibald为宽松工程的提案。他讨论了目前正在讨论的多种标准。我更倾向于他的提议，因为它最容易实施，更不用说最优雅的群体。与此同时，我从Kirill Vasiltsov文章与Waapi春天动画中获取灵感，我计划在图书馆中建立类似的东西。
最后限制是，@ Okikio / Animate只支持变换功能的自动单元。 Translatex，翻译，缩放，偏斜等。这不再是@ Okikio / [电子邮件保护]的情况，但仍有一些关于CSS属性的含义，支持颜色。有关详细信息，请检查GitHub版本。
Animate（{targets：[＆＃34; .div＆＃34; document.queryselectorall（＆＃34; .el＆＃34;）]，//默认情况下＆＃34; px＆＃34;，将应用转换x： 300，左：500，边缘：＆＃34; 56 70 8 70％＆＃34;，//＆＃34; eg＆＃34;将应用于旋转而不是px旋转：120，//没有单位自动应用颜色：＆＃34; RGB（25,25,25）＆＃34 ;,＆＃34;文本阴影＆＃34 ;:＆＃34; 25px 5px 15px RGB（25,25,25）＆＃34 ;}）;
一些未来的功能，如滚动线，就在拐角处。我不认为任何人实际上都知道它何时会发布但自Chrome Canare 92中的滚动线曲线以来，我认为可以安全地说在不久的将来看起来很好看。
我建立了时间轴动画选项，进入@ Okikio / Animate到未来证明它。这是一个例子：
感谢兄弟的演示灵感！此外，您可能需要Chrome的金丝雀版本或需要打开Chrome标志中的实验网络平台功能，以查看此演示。然而，它似乎在Firefox上工作了，所以......♥。
如果您想在Scrolltimeline阅读更多信息，Bramus写了一篇关于它的优秀文章。我还会建议阅读Google开发人员关于动画工作组的文章。
我的希望是让图书馆更小。目前〜5.79 kB似乎很高，至少对我来说。通常，我将使用Bundlephobia嵌入，但捆绑项目丢失，因此如果要验证大小，则我建议使用Bundle.js.org，因为它实际上它在浏览器上本地捆绑了代码。我专门建立它来检查@ Okikio / Animate的捆绑大小，但请注意它与BundlePhobia不如精确。
其中一个前进的演示显示了行动中的聚填充物。您将需要Web-Animations-JS的Web-Animations-Next.ms来支持时间表。其他现代功能是必需的关键特写福音件。
如果支持KeyFrameFfEfect，则使用JavaScript使用JavaScript进行测试，并且如果不是，则可以使用聚填充负载并执行它。只需避免将Async / defer添加到Polyfill，或者它将无法正常工作。您也希望聚填充地图，集合和承诺。
＆lt; html＆gt; ＆lt;头部＆gt; ＆lt;！ - 异步 - ＆gt; ＆lt; src =＆＃34; https：//cdn.polyfill.io/v3/polyfill.min.js？特征=默认值，es2015，es2018，array.prototype.includes，地图，设置，承诺＆＃34;异步＆gt;＆lt; / script＆gt; ＆lt;！ - 没有异步/推迟 - ＆gt; ＆lt; script src =＆＃34; ./ js / webanimation-polyfill.min.js＆＃34;＆gt;＆gt;＆gt;＆gt; ＆lt; / head＆gt; ＆lt;身体＆gt; ＆lt;！ - 内容 - ＆gt; ＆lt; / body＆gt;＆lt; / html＆gt;
如果您正在为ES6 +构建，我强烈建议使用eSBuild进行替代，捆绑和划船。对于ES5，我建议使用eSBuild（带尾部关闭），打字签字（带有ES5的目标）和Terser;截至目前，这是转换为ES5的最快设置，它比Babel更快且更可靠。有关更多详细信息，请从演示中查看gulpfile。
@ Okikio / Animate是Web动画API（WAAPI）周围的包装器，允许您使用来自Animejs和其他动画库的所有功能，以小而简洁的包装。那么，阅读后你的想法是什么？当您需要制作复杂的动画时，它是否认为你会达到什么东西？或者，更重要的是，有些东西会阻止你退回吗？在下面发表评论或加入关于GitHub讨论的讨论。