json spirit_Spirit App：Web实时轻松动画

json spirit

完整的时间轴控制，导入和导出JSON，检查动画，直观的界面，实时编辑，易于理解的API，针对速度和实时反馈：创建和管理Web动画时，您可能希望在图形用户界面中进行所有操作。在本文中，我们将介绍Patrick Brouwer为Web动画设计者提供的称为Spirit的最新工具。我们将学习它如何改变您在网络上创建动画的方式。让我们动起来！

起床并跑步

精神分为三个部分，要求：

桌面应用程序（时间轴）。
运行时（JavaScript文件）。
浏览器扩展程序，使您可以通过在应用程序和运行时之间进行通信来连接到任何网页。

桌面应用程序是用于创建和管理动画的GUI（图形用户界面），而浏览器扩展程序则在其相应的桌面应用程序和您的网页之间建立连接。

该应用程序当前可用于Mac，但不久后将可用于Windows和Linux。目前，Spirit的浏览器扩展严格是Chrome，但其他主要浏览器（Firefox，Opera和Safari）的兼容扩展也在开发中。

当所需的每个组件都准备就绪时，您可以开始动画开发。打开应用程序，使用浏览器导航到所需的网页URL，启用扩展程序并开始动画制作！

在本地发展的提示

如果您想从本地文件系统制作网页动画，请确保在chrome扩展名设置中选中允许访问文件URL复选框。

建议您在本地开发时为要设置动画的每个元素添加一个data-spirit-id 。

<!--first group-->
<div data-spirit-id="foo">…</div>
<!--second group-->
<ul data-spirit-id="bar">…</ul>

这使使用GUI来编辑元素的时间线更加容易，并且使运行时更容易选择目标，而无需使用基于元素CSS选择器（例如body > div > div > ul ）。

运行时播放器

Spirit使用所谓的“运行时（播放器）”。如果您访问的网页没有Spirit运行时，则浏览器扩展将自动为您注入一个临时运行时。运行时只是一个JavaScript文件（〜10kb），因此只要您听到“运行时”一词就对自己说“ JavaScript文件”。

<script src="spirit.js"></script>

运行时使您可以直接在网页上播放动画，并利用GSAP的功能播放所有动画。这意味着您可以使用特定于GSAP的属性以及诸如drawSVG或morphSVG类的插件，以及仍在开发中的其他动画策略（ WAAPI ）。

如果您希望贡献自己的时间来帮助维护或增强它，则可以通过开放源代码获得运行时。如果您希望将运行时播放器安装为NPM软件包，则可以从终端输入安装命令npm install spiritjs --save ，或者可以使用其安装命令yarn add spiritjs尝试给Yarn尝试。

时间线检查器

您是否是网络动画设计师，正在寻找易于控制，导航和使用的时间轴？Spirit支持您，其优雅而直观的界面为您提供了许多微调创作的选择。可以清理时间轴并轻松添加关键帧。但是，排序元素是一个有待实现的功能。如果您是实时开发的，则可以根据需要添加或删除元素。工作完成后，请单击“ 后退”按钮，导出包含进度的JSON文件，并在需要时使用Spirit Spirit运行时 API进行加载。

每个关键帧都可以在时间安排和缓动方面进行微调。添加和删除它们也很简单。元素在时间线检查器中垂直列出，并且每个元素都有自己的时间线。

动画每个属性的值可以是运行时接受的任何值。甚至有可能将JavaScript代码用作传递值，使用鼠标事件，滚动和位置检测等功能来生成动态灵活的元素。确保使用诸如{ window.innerWidth - this.clientWidth }这样的花括号来包装属性值JavaScript逻辑。

每个元素可以具有许多可用于设置动画的属性，包括与stroke ， fill ， color ， position和size有关的特定SVG属性。您甚至可以选择clip-paths ， filters ， box-shadow和z-index进行动画处理。如果提供的默认属性不符合您的需求，那么也可以添加自定义属性。确保传入的自定义属性与W3C规范记录CSS属性名称一致。

了解“组”

动画组是您要设置动画的对象（HTML元素）的集合。将组视为“组件”，其中每个组都可以导出为JSON。

您可以根据需要创建任意多个组，并控制每个组。通过直接从网页中选择每个组或通过Chrome Devtools中的“ 元素”面板轻松地创建新组并添加新元素。当捕获的元素没有data-spirit-id属性时，它具有的唯一引用是XPath （相对于所选根目录），因此最好在生产开发调用时创建属性引用。

var tl = new TimelineMax()
spirit.setup().then(() => {
spirit.load('./my-animations.json').then(groups => {
// construct all groups
groups.construct();
// control the firing sequence of each group using GSAP
tl.add(groups.get('group-name'), 0).add(groups.get('group-anothergroupname'), '-=0.25').add(groups.get('group-yetanothergroupname'), '+=0.125')
})
});

群组实际上只是GSAP时间轴的集合，因此，如果您已经是GreenSock的用户，这将是您工作流和工具的一个受欢迎的补充。无法使用桌面应用程序（将来的功能请求）立即控制组，但是可以使用Spirit的高级API缓解此问题，因为它的运行时将GSAP API用于上面代码中反映的时间轴实例。您还可以查看由Spirit的制造商创建的此演示，展示将主时间轴序列与UI控件和多个组配合使用：

Spirit的API

正如我在有关组的先前说明中所讨论的那样，Spirit为需要更深入控制的开发人员提供了一个API。提供了两个API。一个简单的API和一个高级API。

spirit.loadAnimation({
container: element, // dom element that contains animation
loop: true,
yoyo: true,
delay: 2
})

尽管高级API可以进行广泛的控制，但简单的API可以涵盖诸如通过一系列选项控制播放之类的任务。您甚至可以返回值，加载组并添加交互性。

spirit.setup()

高级API可以满足您在简单API之外的所有其他需求。在使用高级API之前，您需要告诉运行时可以在哪里找到GSAP Tween和Timeline实例。在调用Spirit的setup方法之后，防洪闸将打开，使您能够执行时间轴构建和引用，交互性，关键帧和属性引用等操作。

离别的想法

使事情保持同步很重要，尤其是对于Spirit有效运行而言。 Spirit桌面应用程序会在后台自动进行自我更新，因此您始终可以轻松获得最新版本的安装和最新功能。通过自动更新Spirit应用程序，可以更轻松地迭代和实现新功能。 Chrome扩展程序也在后台更新。浏览器每隔几个小时检查一次已安装的扩展程序或应用程序是否具有更新URL。对于每一个，它都会向该URL发出请求，以寻找更新的清单XML文件。

转到chrome://extensions ，然后选中右上角的开发者模式复选框，然后按立即更新扩展按钮。通过确保适当的设置，添加新功能和更新数据后，Spirit可以进行操作而不会导致意外行为。

如果您想掌握Spirit的新功能和进度，可以在这里注册他们的新闻通讯，以及在Twitter上关注进度。 Spirit绝对是可以改变您创建网络动画的方式的工具。

有用的链接

spiritapp.io
Spirit App文档
GreenSock文档
Web动画草稿规范
入口

翻译自: https://webdesign.tutsplus.com/articles/spirit-app-easy-realtime-animation-for-the-web--cms-30111

json spirit