一个熟悉的界面

如果您使用过其他Mac设计应用程序，如Sketch，PaintCode或Keynote，那么Kite的界面应该让人感觉宾至如归。您将设计组织为左侧源窗格中显示的图层树。在右侧的检查器窗格中检查和更改对象属性。中心画布允许您选择对象并使用工具栏中提供的不同工具。底部实用程序窗格显示动画时间轴和JavaScript控制台。

核心动画供电

由于Kite的构建旨在向用户公开Core Animation API的所有功能，因此如果您需要查找图层属性或动画值的含义，Core Animation文档将作为第二个参考。

接口

参观风筝界面

图层列表

图层列表会显示文档中的每个图层及其子图层。一个图层可以有几种类型的儿童，包括动画，动作或甚至其他图层。具有子图层的图层形成您在下面的屏幕截图中看到的树结构，并且是您如何组织设计的基本模型。

动作按钮

图层列表包含鼠标悬停时每个项目上的多个操作按钮。大多数项目可以切换其锁定和可见性状态。此外，图层可以屏蔽其父图层以及屏蔽其边界。

• 锁定/解锁 - 锁定画布上的项目不被鼠标移动。
• 显示/隐藏 - 从画布上的视图中隐藏项目。对于图层，这会使图层内容和子图形不可见。对于动画，这将从场景中删除动画。对于操作，它将阻止在演示文稿播放期间触发操作。
• 蒙版到边界 - 剪切图层及其子树的所有内容，该子树延伸到图层边界之外。
• 掩码父层 - 使用此层的可见部分来掩盖其父层的内容和子树。

网页

页面允许您在同一个Kite文档中拥有多个图层层次结构及其自己的独立时间轴。每个页面可以具有不同的画布大小和图层层次结构，但也可以与其他页面共享文档范围的资产，如图像和视频。

页面可以通过Actions链接到其他页面。您可以设置“转换到页面”操作，该操作将在触发事件时从当前页面转换为另一个页面。

页面图层是库中可用的特殊图层类型，可以在设计时 “替换”另一整页。在演示时，页面层填充了引用页面的图层。页面图层允许您使用自己的动画执行完全可自定义的页面过渡。

检查员

对象检查器允许您编辑文档中项目的属性，如图层，动画和操作。可以一次选择和检查多个对象，以便对类似项目进行快速批量更新。每个对象的属性都组织在不同的窗格中，如几何属性，外观属性，渲染属性等。这些窗格可以在不需要时折叠，以便为您需要的窗格提供更多的UI空间。

快速操作菜单

检查器中的许多属性都具有关联的快速操作，您可以通过单击属性标签来执行这些操作。例如，像图层属性这样的可动画属性position可以提供一种快速方法，可以使用几种不同类型的动画为图层的位置设置动画。此外，具有内置帮助的属性可以快速查找属性在修改时的效果。

数学运算

检查器中的文本字段支持常见的数学运算，因此您可以使用数学运算符（如加法+，减法-，乘法*，除法/，括号分组）轻松计算值()。

图书馆

检查器窗格的第二个选项卡是库。该库包含可以拖放到画布上的构建块集合，以构建您的设计。

保存自定义库项目

您还可以将图层树的任意部分保存到自己的库项目中。要创建自己的项目，请选择要保存的项目，然后单击Selection > Save to Library...主菜单或直接右键单击画布中的图层。

时间线

如果您在其他应用程序（如FinalCut Pro或Motion）中使用了基于轨道的时间轴编辑器，那么Kite的时间表将会很熟悉。您可以将轨道拖动到同步动画时间和关键帧之间。曲目和关键帧将在适当的时间段相互捕捉，以便您可以为动画设置精确的时间。

时间轴循环选择

在迭代动画的持续时间，弹性，时序曲线等时，在调整其值时循环一部分时间轴通常很有帮助。通过在时间轴中进行循环选择，您可以选择一遍又一遍地重复的时间范围。

要进行循环选择，只需拖动没有轨道的时间轴上的任何位置即可。单击时间轴的空白部分以删除循环选择。

图层轨道

图层的轨道持续时间对应于其在画布上的可见性。默认情况下，图层的持续时间非常长，因此它们在整个动画中都存在。但是，您可以通过在时间轴中启用图层轨道并调整其长度来更改此设置。

默认情况下，Kite不会在时间线窗格中显示图层的轨迹。如果要查看每个图层的轨迹，可以在应用程序“首选项”中打开它们。单击Kite > Preferences...主菜单，然后在“常规”首选项窗格中选中“显示图层的时间轴轨迹”。

安慰

JavaScript控制台是位于底部实用程序窗格中的第二个视图。在演示时评估脚本时，您将看到脚本的输出。您可以通过点击控制台按钮显示在控制台中的工具栏。

在内置控制台的命令行输入时，可以按键盘上的向上箭头循环显示输入的最后几个命令。

代码生成

在第3个实用程序窗格中，您将找到代码生成输出视图。单击“生成代码”工具栏按钮时，将显示文档的自动生成代码。为动画生成代码是将自定义动画按钮，进度指示器，HUD确认，解释性动画和交互式表情符号合并到应用程序中的好方法。

单击生成代码按钮将获取当前选择（如果没有选择，则整个文档）并生成本机Core动画代码以在iOS或Mac应用程序中重新创建您的设计。Kite支持Swift和Objective-C语言输出类型。

生成的代码支持所有图层和动画类型。由于Core Animation本身不支持其API中的用户交互，因此仅从Actions生成一组有限的交互代码。目前，所有带有“播放动画”响应的操作都会生成一个IBAction方法，您可以直接从自己的代码中调用该方法。生成的代码中不包含图层上的脚本。

当您选择导出生成的代码时，所有必要的资源（如图像和视频文件）将与代码文件本身一起复制到输出目录中。

帆布

画布是您可以直接拖动，旋转和调整图层大小的地方。它是您在播放期间呈现演示文稿时可以看到的内容的预览。

您可以直接在画布上拖放多种不同类型的媒体，直接从图像，视频或音乐文件创建图层。

工具栏

文档窗口的工具栏包含许多有用的快捷方式，您可以在创建设计时使用这些快捷方式。它也完全可定制，以满足您的需求。只需右键单击它并选择“自定义工具栏...”即可添加，删除或重新排列布局以满足您的口味。

对象

关键的构建块

图层

图层是允许您建立场景布局和几何图形的关键构建块。每个图层都有一个位置和边界，可以创建自己的坐标系。图层的anchorPoint定义图层的位置在其父图层中出现的点。图层可以具有子图层，这些子图层构成父子关系的层次结构。这些关系会影响移动，动画和动作在场景中的生效方式。

该图书馆有几种不同的类型，您可以添加到画布层。选择所需的图层类型取决于您想要实现的功能或效果。

• 图层 - 用于其他图层或托管图像内容的通用容器。
• 文本图层 - 承载富文本的图层，能够显示不同的字体，颜色和文本排列选项。
• 渐变图层 - 提供与标准图层相同的功能，但使用可生成渐变的颜色停止的动画排列填充其边界。
• 形状图层 - 定义具有填充和描边的BezierPath的图层。用于定义要设置动画的自定义图标，形状或几何图形。
• 复制器层 - 复制添加到其中的任何子层的图层。当与动画合作使用时，该层可以产生一些令人惊叹和令人愉快的效果。
• 发射器层 - 发射由其子发射器单元定义的粒子的层。适用于雨，火或烟等特殊效果。
• 视频层 - 承载视频或音频文件的图层，可在场景演示期间触发该视频或音频文件。
• 页面图层 -图层是“代表，在”再整页在设计时。在演示时，页面层填充了引用页面的图层。页面图层允许您使用自己的动画执行完全可自定义的页面过渡。
• 平铺层 - 即将发布的描述。
• 滚动图层 - 提供用于在场景中创建可滚动窗格的基本构建块的图层。
• 变换图层 - 不会将其子图层展平为单个2D平面的图层，因此您可以设计真正的“2.5D”场景和动画。

动画

动画是您添加到图层的对象，用于在一段时间内修改其属性。多个动画可以同时作用于同一图层，以对场景产生复杂的视觉变化。例如，您可以为图层设置动画scale并shadowRadius创建“屏幕提升”动画。除了为Layer的属性设置动画外，您还可以为Layer的Filter属性设置动画。这允许您为高斯模糊滤镜上的模糊半径或页面卷曲滤镜上的时间设置动画。

动画播放

默认情况下，每个动画将beginTime在演示文稿播放模式下以指定的方式播放。这是在画布编辑器中预览场景时将看到的播放时间。或者，您可以选择不在其中播放动画，beginTime而是在触发操作时播放- 就像在鼠标单击操作期间一样。要执行此操作，请取消选中动画检查器窗格中的“在开始时播放”复选框。

请注意，即使未选中“在开始时间播放”，也会在通过编辑器进行清理时播放动画。但是，在演示播放期间触发之前，它不会播放。要在时间线中进行清理时隐藏或临时删除动画，请单击动画旁边的“ 图层列表”窗格中的“眼睛”图标。

动画类型

该库提供了四种不同类型的动画，您可以根据您尝试实现的效果进行选择：

• 基本动画 - 将图层属性从一个值修改为另一个值的动画。
• 关键帧动画 - 以指定时间间隔在值列表之间进行插值的动画。这种类型的动画对于沿路径移动图层的位置很有用。
• 春天动画 - 就像一个基本动画，但提供像mass，stiffness和damping，以及initialVelocity调整动画弹性的参数。
• 组动画 - 此类动画可用于将其他类似的子动画组合在一起。例如，您可以将图层的scale动画和shadowRadius动画分组为一个名为“提升”的动画。这使得复杂的动画更容易在动作中触发。

操作

动作是风筝作为动画应用程序的关键区别之一。通过操作，您可以在演示文稿播放期间的任何时刻触发要播放的动画或其他操作。这意味着您不需要在线性时间内编写每个交互的脚本。您可以在鼠标单击，按键，捏合手势或“操作”检查器中提供的许多其他事件期间即兴启动动画。

默认提供的操作

某些图层（如“滚动图层”）在将其添加到画布时会为您设置默认操作。滚动图层具有默认操作，当鼠标在Mac上的界限内滚动或在iOS上的界限内拖动触摸时，滚动文档图层的内容。视频图层具有默认的鼠标单击操作以播放其视频内容。

脚本

概观

内置的JavaScript脚本环境可将您的动画设计打开到下一级详细信息和自定义交互逻辑。每个图层都可以包含一个与之关联的JavaScript文件，以执行自定义预设置例程，绘制自定义图像内容以及响应交互处理程序。

这些图层脚本文件的行为与基于Web的JavaScript代码类似。他们可以查看图层层次结构并更改图层属性。他们可以观察对另一个图层上的属性的更改并执行自定义操作。他们可以触发动画，创建新动画，触发动作，添加CoreImage过滤器，绘制贝塞尔曲线路径，设置定时器等等。您可以从JavaScript API中找到任何您能想到的内容。

脚本文件

脚本/Assets作为单个文件保存在文档的子文件夹中。这意味着您可以使用自己喜欢的外部编辑器编写脚本，每次呈现文档时都会选择更改。

脚本操作

如果您只想运行一小段代码来响应操作，则可以使用“运行JavaScript”操作，而不是使用整个脚本文件来满足简单的脚本需求。

JavaScript控制台 - 错误和输出

在使用脚本编辑和显示设计时，您可以将底部实用程序窗格切换到JavaScript控制台视图，以查看脚本生成的任何错误或输出。

API参考

您可以参考JavaScript API参考以查看正在使用的API的文档和示例。您还可以查看Kite（桌面底座，电视相册）中提供的几个内置示例模板，以查看API的使用情况。要从模板创建新文档，请在主菜单中选择File > New From Template...。

输入

从其他应用程序导入设计内容

概观

风筝可以从其他应用程序导入图层内容，以便从Adobe XD CC和Sketch等应用程序中快速启动您的动画设计。从Kite的主菜单栏中，您可以选择File ▸ Import并选择要从中导入图层数据的应用程序。

目前，Kite支持Adobe XD和Sketch作为导入源。如果未选择任何图层，则导入的内容将成为当前所选图层或根图层的子图层。

选项

下面的屏幕截图显示了Adobe XD的导入选项，但这些选项也适用于Sketch的选项。

• 图层展平 - 激活时，名称以两个星号字符**结尾的所有图层将其图层层次结构展平为单个图像。这样做可以提高深层嵌套图层的性能，而不需要为各个子图层设置动画。
• 导入文本图层 - 此选项可以折衷原始文本渲染与文本编辑能力和风筝中的动画能力的准确性。其他应用程序可能具有更复杂的文本属性（例如行高），只要您不需要为文本大小，颜色等设置动画，就可以通过文本本身的图像最佳地再现这些属性。
• 导入形状图层 - 此选项折衷原始形状路径渲染的精确度，以及风筝中的形状编辑能力和动画能力。其他应用程序可能具有更复杂的形状填充和边框（例如，多个填充或多个笔划），只要您不需要为形状的路径，填充颜色等设置动画，就可以通过形状本身的图像进行最佳再现。
• 图像比例 - 导入图像资源时，Kite会要求源应用程序以此比例导出资源。默认设置是匹配运行应用程序的屏幕的比例。
• 启用XD集成（适用于XD） - 选中后，Adobe XD将在菜单中有一个菜单项，File ▸ Export用于将活动的XD文档内容发送到Kite。

脚本API

Canvas对象的JavaScript API

Layer < Object

信息

本Layer类API直接代理到核心动画CALayer的API。如果您需要有关任何属性或方法的更多信息，CALayer API是一个很好的参考。

实例成员

• position ： Point
  图层anchorPoint相对于其superlayer位置的位置。
• x ： Number
  图层位置的x坐标。
• y ： Number
  图层位置的y坐标。
• z ： Number
  图层位置的z坐标。
• zPosition ： Number
  价值相同z。
• bounds ： Rectangle
  图层的边界框。
• width ： Number
  图层边界的宽度。
• height ： Number
  图层边界的高度。
• frame ： Rectangle
  它的superlayer坐标空间中图层的矩形边界框。
• anchorPoint ： Point
  在画布上建立图层位置的点。此点在图层的坐标空间中从0到1进行归一化。
• anchorPointZ ： Number
  如果图层的anchorPoint，则为Z坐标值。
• backgroundColor ： Color
  填充图层边界的颜色。
• cornerRadius ： Number
• borderColor ： Color
  概述图层边界的颜色。
• borderWidth ： Number
• opacity ： Number
• mask ： Layer
  一个Layer的实例，其alpah通道用于屏蔽接收器的可见部分。
• shadowColor ： Color
  填充图层阴影的颜色。
• shadowOpacity ： Number
• shadowRadius ： Number
• shadowOffset ： Size
• shadowPath ： BezierPath
• hidden ： Boolean
  用于指示图层是否在画布上可见的图层的标志。
• doubleSided ： Boolean
  当远离观察者的假层被隐藏在视野之外时。
• geometryFlipped ： Boolean
  层（及其子层）的几何形状是否垂直翻转。
• contentsAreFlipped() ： Boolean
  如果在相对于局部坐标空间渲染时将翻转图层内容的内容，则返回true。
• masksToBounds ： Boolean
  用于剪切图层及其子树的所有内容的标志，该子树延伸到图层边界之外。
• minificationFilter ： String
• magnificationFilter ： String
• minificationFilterBias ： Number
• opaque ： Boolean
• edgeAntialiasingMask ： Number
• shouldRasterize ： Boolean
• rasterizationScale ： Number
• autoresizingMask ： Number
• display() ： Void
• setNeedsDisplay() ： Void
• setNeedsDisplayInRect(rect) ： Void
• needsDisplay() ： Boolean
• displayIfNeeded() ： Void
• needsDisplayOnBoundsChange ： Boolean
• drawsAsynchronously ： Boolean
• drawInContext(context) ： Void
• renderInContext(context) ： Void
• compositingFilter ： Filter
  用于将图层与其背景合成的滤镜对象。
• filters ： Array
  一个数组，用于修改图层的外观。 Filters
• backgroundFilters ： Array
  一个数组，Filters用于修改此图层下方图层的外观。
• contents ： Image
  图层绘制的位图图像。
• contentsRect ： Rectangle
• contentsCenter ： Rectangle
• contentsGravity ： String
• contentsScale ： Number
• convertPointFromLayer(point, layer) ： Point
  将给point定layer坐标空间中的给定转换为接收层的坐标空间。
• convertPointToLayer(point, layer) ： Point
  将给定point的接收层坐标空间转换为给定layer的坐标空间。
• convertRectFromLayer(rect, layer) ： Rectangle
  将给rect定layer坐标空间中的给定转换为接收层的坐标空间。
• convertRectToLayer(point, layer) ： Rectangle
  将给定rect的接收层坐标空间转换为给定layer的坐标空间。
• convertTimeFromLayer(timeInterval, layer) ： Number
  将给timeInterval定时layer空中给定的时间转换为接收层的时空。
• convertTimeToLayer(timeInterval, layer) ： Number
  将给定timeInterval的接收层时空转换为给定layer的时空。
• allowsImplicitAnimations ： Boolean
  打开或关闭图层的隐式动画。如果禁用，则更改图层的属性不会自动在旧值和新值之间创建动画。默认为true

  layer.mouseDown = function(event) {
  
   // This change is animated from the old value to the new value because implicit animations are enabled.
   this.x = 100;
  
   this.allowsImplicitAnimations = false;
  
   // This change is reflected immediately on the canvas without an animation because implicit animations are disabled.
   this.x = 200;
  };

• animations ： Array
Animations与此图层关联的数组。
• actionForKey(key : String) ： Void
• addAnimation(animation : Animation) ： Void
• removeAllAnimations() ： Void
• animationForKey(key : String) ： Void
• removeAnimationForKey(key : String) ： Void
• animationKeys() ： Array
• interactions ： Array
Action与此图层关联的s 数组。
• transform ： Transform3D
  应用于图层的3D变换矩阵。
• affineTransform ： AffineTransform
  3D转换矩阵转换为AffineTransform。
• rotation ： Number
  围绕层的Z轴旋转。
• rotationX ： Number
  围绕图层的X轴旋转。
• rotationY ： Number
  围绕图层的Y轴旋转。
• rotationZ ： Number
  围绕层的Z轴旋转。
• scale ： Number
  图层的X和Y比例。
• scaleX ： Number
  图层的X坐标空间中的比例。
• scaleY ： Number
  图层的Y坐标空间中的比例。
• scaleZ ： Number
  图层的Z坐标空间中的比例。
• translation ： Size
  X和Y坐标空间中平移的大小。
• translationX ： Number
  图层的X坐标中的平移。
• translationY ： Number
  图层的Y坐标中的平移。
• translationZ ： Number
  图层的Z坐标中的平移。
• sublayerTransform ： Transform3D
  3D变换矩阵应用于图层的子图层。
• sublayerRotation ： Number
  围绕图层子层的Z轴旋转。
• sublayerRotationX ： Number
  围绕图层子层的X轴旋转。
• sublayerRotationY ： Number
  围绕图层子层的Y轴旋转。
• sublayerRotationZ ： Number
  围绕图层子层的Z轴旋转。
• sublayerScale ： Number
  层的子层的X和Y比例。
• sublayerScaleX ： Number
  图层子图层的X坐标空间中的比例。
• sublayerScaleY ： Number
  图层子图层的Y坐标空间中的比例。
• sublayerScaleZ ： Number
  图层子图层的Z坐标空间中的比例。
• sublayerTranslation ： Size
  图层子图层的X和Y坐标空间中的平移大小。
• sublayerTranslationX ： Number
  图层子图层的X坐标中的平移。
• sublayerTranslationY ： Number
  图层子图层的Y坐标中的平移。
• sublayerTranslationZ ： Number
  层的子层的Z坐标中的平移。
• superlayer ： Layer
  此图层的父图层。这一层是它的一个孩子superlayer。
• sublayers ： Array
Layers此图层拥有的数组。
• addSublayer(newSublayer) ： Void
  向接收器添加新的子层。
• insertSublayerAtIndex(newSublayer, index) ： Void
  在指定索引处将新子层添加到接收器。
• insertSublayerAtBelow(newSublayer, sibling) ： Void
  在指定的兄弟层下面的接收器中添加一个新的子图层。
• insertSublayerAtAbove(newSublayer, sibling) ： Void
  将新子层添加到指定同级层上方的接收器。
• replaceSublayerWith(oldSublayer, newSublayer) ： Void
  替换oldSublayer用newSublayer的接收机。
• getLayersByName() ： Array
  在图层的子图层中搜索具有参数名称的图层。返回找到的图层数组。
• getLayerByName() ： Array
  在图层的子图层中搜索具有参数名称的图层，并返回第一个图层（如果有）。
• canvasReady() ： Function
  您可以设置在画布准备好进行初始播放时调用的回调函数。这是在场景中设置其他内容的好地方。

  // Called just before the presentation starts
  //
  layer.canvasReady = function(event) {
  
   // Find layers in the layer tree
   //
   this.screenLayer = canvas.getLayerByName("Screen");
   this.dockBackgroundLayer = canvas.getLayerByName("Dock Background");
   this.toolTipLayer = canvas.getLayerByName("App Tool Tip");
  };

• drawLayerInContext() ： Function
  一个回调函数，您可以设置为通过CoreGraphics以编程方式绘制自定义图层内容。

  // ------------------------------------------
  // Called to draw custom layer content
  // ------------------------------------------
  
  layer.drawLayerInContext = function(layer, context) {
  
   var path = BezierPath.bezierPathWithRoundedRectXRadiusYRadius(this.bounds, 10, 10);
  
   Color.redColor().set();
   path.fill();
  };

• mouseDown(event) ： Function
  您可以设置在鼠标单击图层时调用的回调函数。

  // ------------------------------------------
  // Handle Events
  // ------------------------------------------
  
  layer.mouseDown = function(event) {
  
   this.backgroundColor = new Color("CCCCCC");
   this.width = 200;
   this.height = 200;
  };

• mouseUp(event) ： Function
  您可以设置在鼠标单击图层时调用的回调函数。
• mouseMoved(event) ： Function
  您可以设置在鼠标在画布上移动时调用的回调函数。
• mouseEntered(event) ： Function
  您可以设置在鼠标进入图层边界时调用的回调函数。
• mouseExited(event) ： Function
  您可以设置在鼠标退出图层边界时调用的回调函数。
• mouseDragged(event) ： Function
  您可以设置在鼠标拖动图层边界时调用的回调函数。
• scrollWheel(event) ： Function
  您可以设置在鼠标滚轮在图层边界内滚动时调用的回调函数。
• keyDown(event) ： Function
  您可以设置在键盘上按下键时调用的回调函数。
• keyUp(event) ： Function
  您可以设置在键盘上释放键时调用的回调函数。
• magnifyGesture(event) ： Function
  您可以设置在用户在屏幕或触控板上进行放大手势时调用的回调函数。
• rotateGesture(event) ： Function
  您可以设置在用户在屏幕或触控板上进行旋转手势时调用的回调函数。
• name ： String
• delegate ： Object
• style ： Object
• scrollPoint(point : Point) ： Void
• scrollRectToVisible(rect : Rectangle) ： Void
• visibleRect ： Rectangle
• layoutSublayers() ： Void
• resizeSublayersWithOldSize(size) ： Void
• resizeWithOldSuperlayerSize(size) ： Void
• modelLayer ： Layer
  如果在presentationLayer上调用，则返回图层的原始模型图层。
• presentationLayer ： Layer
  返回原始模型图层的表示层。
• hitTest(point) ： Layer
  返回包含给定的图层的最远后代point。
• containsPoint(point) ： Boolean
  如果图层的边界包含给定的，则返回true point。
• observe(keyPath, changeHandler) ： ObservationInfo
  为特定的图层添加观察处理程序keyPath。当此属性更改时，将changeHandler调用该属性。但是，由于动画更改了属性，因此不会调用更改处理程序。

  layer.observe("position", function (object, oldValue, newValue) {
  
   var newPoint = newValue.pointValue;
   var newPosition = { x: newPoint.x, y: newPoint.y };
  
   // Offset the new position by the shadowLayer's original
   // offset
   //
   newPosition.x += shadowXOffset;
   newPosition.y += shadowYOffset;
  
   shadowLayer.position = newPosition;
  });

• beginTime ： Number
• duration ： Number
• speed ： Number
• timeOffset ： Number
• repeatCount ： Number
• repeatDuration ： Number
• autoreverses ： Boolean
• fillMode ： String