Kite Compositor 教程：从入门到精通

Kite Compositor 是一款强大的 macOS 原生界面设计和动画制作工具，它允许你像在 Photoshop 中操作图层一样操作 UI 元素，并使用直观的时间轴来创建复杂的动画，非常适合设计 iOS、macOS 应用界面以及制作设计稿演示。

第一部分：基础入门

什么是 Kite？

想象一下 Kite 是一个“Photoshop + After Effects”的组合，但专门为 UI 设计而生,你可以：

• 构建界面：使用矩形、图片、文本等图层，像搭积木一样构建你的 UI。
• 创建动画：通过改变图层的属性（位置、大小、颜色、透明度等）,并使用时间轴来制作动画。
• 编写交互：使用 Swift 代码来响应用户的点击、拖拽等交互,实现复杂的逻辑。
• 导出资源：将制作好的动画导出为视频、GIF 或可交互的原型。

界面概览

打开 Kite,你会看到几个核心区域：

• Canvas (画布)：中间最大的区域，是你的设计舞台,你可以在这里看到和操作你的界面。
• Layers (图层列表)：左侧的面板，列出了画布上所有的元素，像 Photoshop 的图层面板一样，你可以在这里组织、隐藏、锁定图层。
• Timeline (时间轴)：底部的面板，是制作动画的核心，你可以在这里为图层添加关键帧,调整动画曲线。
• Properties (属性检查器)：右侧的面板，当选中一个图层时，这里会显示该图层的所有可编辑属性（如位置、尺寸、背景色、圆角等）。
• Library (库)：右侧的面板，包含可复用的组件、图片、颜色等资源。
• Toolbar (工具栏)：顶部的工具栏，包含选择、移动、缩放、文本等常用工具。

第二部分：核心功能详解

图层操作

图层是 Kite 的基本构建块。

• 创建图层：
  • 点击顶部工具栏的矩形、圆形、图片或文本工具,然后在画布上拖动即可创建。
  • 从 Library 面板中拖入预设组件。
• 选择与移动：
  • 使用 Selection Tool (选择工具，箭头图标) 点击图层进行选择。
  • 在画布上拖动图层可以改变其位置。
  • 在 Properties 面板中，可以精确输入 X 和 Y 坐标。
• 变换图层：
  • 选中图层后，按住 Shift 键拖动角点可以进行等比缩放。
  • 在 Properties 面板中，可以精确设置 Width (宽度) 和 Height (高度)。
• 样式调整：
  • 选中一个图层，在 Properties 面板中找到 Fill (填充) 可以修改颜色。
  • 修改 Corner Radius (圆角) 可以让矩形变成圆角矩形。
  • 修改 Opacity (不透明度) 可以调整图层透明度。

制作动画

动画是 Kite 的灵魂，我们通过关键帧 来创建动画。

• 什么是关键帧？ 关键帧是动画中的“快照”，你定义了某个属性在某个时间点的状态，Kite 会自动计算并生成两个关键帧之间的过渡动画。

• 创建一个简单的位移动画：

  1. 在画布上创建一个红色的矩形图层。
  2. 在时间轴面板中，确保时间指针位于 0s 的位置。
  3. 在画布上选中红色矩形，将其拖动到起始位置（比如左侧）。
  4. 在 Properties 面板中，找到 Position 属性，你会看到它旁边有一个菱形图标，点击它，这就是添加关键帧按钮，一个关键帧被添加到了 0s 的位置。
  5. 将时间指针拖动到时间轴的 1s 位置。
  6. 在画布上将红色矩形拖动到目标位置（比如右侧）。
  7. 再次点击 Position 属性旁边的菱形图标，第二个关键帧被添加到了 1s 的位置。
  8. 播放动画：点击时间轴上的 Play 按钮（三角形图标）,你将看到矩形从左侧平滑移动到右侧。

• 动画曲线 动画曲线决定了动画的速度变化，也就是“缓动”效果。

  1. 在时间轴上,点击你刚刚创建的两个关键帧之间的连线。
  2. 在 Properties 面板下方，会出现一个曲线编辑器。
  3. 尝试拖动曲线上的控制点,你会发现动画的速度和感觉完全不同了。
  • 线性：匀速运动。
  • 缓入：开始慢,后来快。
  • 缓出：开始快，后来慢。（最常用,最符合物理直觉）
  • 自定义：可以绘制任意的曲线来创造独特的动画效果。

使用蒙版

蒙版可以用来裁剪图层的显示区域,创造出各种有趣的效果。

• 创建蒙版：
  1. 在画布上放置一张图片作为背景。
  2. 在 Layers 面板中，右键点击图片图层，选择 Add Mask (添加蒙版)。
  3. 一个白色的蒙版图层会出现在图片图层下方。
  4. 使用矩形或圆形工具在蒙版上绘制一个形状。
  5. 重要：在蒙版上，黑色代表隐藏，白色代表显示，你可以用画笔工具画黑色来擦除部分显示,用白色来恢复显示。

第三部分：实战项目 - 制作一个简单的登录界面动画

让我们综合运用上面的知识,制作一个登录界面的加载动画。

目标：一个带有 Logo 和标题的登录界面，点击“登录”按钮后，整个界面缩小并淡出,然后跳转到主界面。

步骤 1：构建登录界面

1. 创建画布：新建一个 Kite 文件，设置画布大小为 375x667 (iPhone 8 尺寸)。
2. 添加背景：创建一个矩形图层，设置 Fill 为浅蓝色,覆盖整个画布。
3. 添加 Logo：从 Library 或本地拖入一个 Logo 图片,调整大小和位置到画布上方。
4. ：使用文本工具，输入 "Welcome Back"，设置合适的字体、大小和颜色，放在 Logo 下方。
5. 添加输入框和按钮：创建两个圆角矩形作为输入框，创建一个绿色的矩形作为“登录”按钮,并添加文本。

步骤 2：制作“登录”按钮的动画

1. 创建新场景：点击顶部菜单 Scene > New Scene，命名为 HomeScene，这将是我们的主界面，简单放一个“主页”的文本即可。
2. 回到登录界面：在 Scenes 列表中选择 LoginScene。
3. 制作点击效果：
   • 选中“登录”按钮。
   • 在 Properties 面板中，找到 Opacity (不透明度)。
   • 在时间轴 0s 位置，点击 Opacity 旁边的菱形，设置关键帧为 1。
   • 将时间指针移动到 1s，将 Opacity 改为 8,再添加一个关键帧。
   • 播放动画,你会看到按钮有一个微妙的点击反馈。

步骤 3：制作页面切换动画

1. 选中所有登录元素：在 Layers 面板中，按住 Cmd 键点击选中所有属于登录界面的图层（Logo、标题、输入框、按钮）。
2. 创建组合：右键点击其中一个图层，选择 Group Layers,这样所有元素就被打包成了一个组。
3. 制作缩放和淡出动画：
   • 选中这个组。
   • 在时间轴 0s 位置，为 Position 和 Opacity 添加关键帧（位置在画布中心，不透明度为 1）。
   • 将时间指针移动到 5s。
   • 在 Properties 面板中：
     • 将 Scale (缩放) 设置为 8。
     • 将 Opacity 设置为 0。
   • Kite 会自动为你添加这两个关键帧。
   • 调整动画曲线,让缩放和淡出感觉更自然。

步骤 4：添加交互逻辑

我们需要让点击“登录”按钮来触发这个动画。

1. 打开代码编辑器：选中“登录”按钮图层，在 Properties 面板中找到 Actions (动作) 区域，点击 号，选择 Action on Tap (点击时动作)。

2. 编写 Swift 代码：会弹出一个代码编辑器,输入以下代码：

   // 当按钮被点击时执行
   action("onTap") {
       // 获取我们创建的登录界面组
       let loginGroup = self.group("Group 1") // 注意：这里的 "Group 1" 是你创建的组的默认名称，如果改了就用改后的名
       // 为这个组播放一个名为 "loginAnimation" 的动画
       // 我们需要先给这个动画命名
       let animation = Animation.named("loginAnimation")
       loginGroup.animation = animation
       // 播放动画
       loginGroup.play()
       // 动画结束后，切换到主界面场景
       // Kite 提供了一个简单的场景切换方法
       // 注意：这个方法可能需要更复杂的逻辑，这里为了简化演示
       // 更标准的做法是监听动画结束事件，然后切换场景
       // 这里我们先使用一个简单的延时切换
       delay(0.5) {
           self.scene = "HomeScene"
       }
   }

3. 命名动画：

   • 在时间轴上，选中你为 Group 1 创建的所有关键帧（从 0s 到 5s）。
   • 在 Properties 面板下方，你会看到一个 Animation 字段，输入 loginAnimation 并按回车。
   • 这样，代码中就可以通过 Animation.named("loginAnimation") 来找到这个动画了。

4. 测试：点击 Kite 右上角的 Preview (预览) 模式，或者按 Cmd + R，现在你可以点击“登录”按钮,看到完整的动画和场景切换效果了！

第四部分：进阶与资源

组件

组件是可复用的 UI 模块，你可以将一个登录框保存为组件，然后在多个场景中复用，修改组件的源文件，所有引用它的地方都会自动更新,这是保持设计一致性的强大工具。

Swift 代码与交互

Kite 的真正强大之处在于 Swift 集成,你可以：

• 访问和修改图层的属性。
• 处理用户输入（点击、滑动、键盘输入）。
• 创建复杂的逻辑,比如根据用户输入改变界面状态。
• 与网络 API 通信,加载动态数据。

导出

• 导出视频/GIF：File > Export > Export as Movie... 或 Export as GIF...,选择要导出的场景和时间范围。
• 导出图片序列：File > Export > Export Images...，可以导出动画的每一帧,方便在开发中使用。
• 导出可交互原型：Kite 可以导出为一个 .app 文件，你可以将它分发给其他人，让他们在没有安装 Kite 的情况下体验你的交互原型。

学习资源

• 官方文档：Kite Compositor 官方文档 是最权威的资料。
• 官方示例：下载 Kite 时会附带很多示例项目,仔细研究它们是学习高级技巧的最佳途径。
• YouTube 教程：搜索 "Kite Compositor tutorial",有大量优秀的视频教程。
• 社区：寻找 Kite 的用户社区,可以提问和分享作品。

Kite Compositor 是一款功能极其强大的工具，它将 UI 设计、动效制作和原型开发无缝地结合在一起，通过这份教程，你已经掌握了它的基本操作和核心工作流，最好的学习方式就是动手实践，尝试去复刻你喜欢的 App 界面，或者发挥创意制作自己的动画,祝你玩得开心！