导出 #

一旦你创造了完美的动画，你会想向全世界分享。有几种方法可以帮你做到。

分享到 Web #

在 Principle 6 及以后的版本中，分享到 Web 是让别人看到你的设计的最简单的方法。

只要点击 “File”->“Export”->“Share to Web”，你就会得到一个链接，你可以把它发给任何人，让他们在网络浏览器中查看。

分享图片 #

你可以通过选择图层并点击 “File”->“export”->“Images of Selected Layers” 来把图层导出为图像。这将把每个选定的图层的 PNG 图像导出到 Principle 文件保存的文件夹中，如果 Principle 文件还没有保存，则导出到桌面。

视频或 Gif #

要导出视频或 Gif 动画，请先点击预览窗口右上方的相机图标。你可以选择使用圆形触摸光标、箭头光标，或者在录制时隐藏光标。为光标选择一个选项后，Principle 开始对预览窗口进行屏幕记录。因为它实际上是在记录你的屏幕，所以视频的导出尺寸受你的显示器的分辨率限制。当图标开始闪烁时，录像已经开始，你可以开始与你的设计进行互动（录像开始可能需要一些时间）。一旦你完成了你的设计的录制，再次点击相机图标停止录制。

我们强烈鼓励你使用导出的视频而不是 gif，因为视频的文件大小比 gif 小，质量也更高。

视频输出目前不支持音频，所以如果你的设计使用了声音，它将不会出现在录制的视频中。

Gif 设置 #

当导出 Gif 时，你可以通过从下拉菜单中选择预设或输入此格式的设置来选择自定义导出尺寸。

  • 45% 任何数字后面的百分号都会导出一个 Gif，它是你所记录的内容的缩小版，输出的内容将按你输入的百分比缩放。如果指定了百分比，宽度和高度值将被忽略。

  • 134h 导出一个具有指定高度的 gif，保持与画板相同的长宽比。

  • 320w 导出一个具有指定宽度的 gif，保持与画板相同的长宽比。

  • 400w 300h 导出一个具有指定尺寸的 gif。录音将被缩小以适应这个尺寸，但将保留其原始的长宽比。填充物和阴影会自动添加。颜色井中设置的颜色将被用来填充 gif 的背景。

关于 Gif 文件格式的说明 #

Gif 格式非常古老（它是在 1987 年发明的），关于 Gif 有一些怪癖，可能会让你吃惊。

  • Gif 只支持 256 种颜色 如果你的设计有很多颜色，或者有微妙的渐变，你可能会注意到有些颜色不见了，或者当你把它导出为 gif 文件时有错误。这是因为 gif 文件必须从你的设计中挑选 256 种颜色，并将整个设计装入这些颜色。如果你想制作一个非常漂亮的 gif 文件，减少设计中的颜色和渐变的数量会有帮助。另外，以电影形式导出会有更好的颜色。

  • Gif 文件非常大 大多数人的印象是 gif 文件很小，因为他们在网上看到很多微小的、短小的 gif 动画。在现实中，gif 文件格式是非常难做小文件的，对于某些内容来说，是不可能的。如果你试图导出一个长达几秒钟的 1080p gif 动画，文件可能很容易达到数百兆字节。与 gif 相比，以.mov 形式导出几乎总是会产生较小的文件大小。制作小型 gif 文件的最佳方法是导出小型、短小的动画。

  • Gif 只支持 1 位alpha 不像 PNG 有 8 位alpha，gif 文件格式只支持 1 位alpha，这意味着一个像素要么完全可见，要么完全透明。由于不能从不透明逐渐过渡到透明，透明的 gif 边缘看起来非常锯齿状和像素化。不可能从 Principle 导出透明背景或透明元素的 gif，因为这样看起来很糟糕。

  • Gif 动画是一种资源占用，你是否曾在一个有几个 GIF 的页面上打开你的网络浏览器，却发现你的计算机的风扇疯了，你的电池寿命消失了？这是因为 GIF 动画在播放时很耗费资源。与 mp4 等现代动画格式不同，计算机上没有专门的硬件来有效地制作 gif 动画。这就是为什么 Principle 不支持 gif 动画作为图层。最好的办法是拖入电影。

Principle Mirror #

iOS 的 Principle Mirror App 可以用来在你工作时将你的设计实时同步到你的 iOS 设备上。下载Principle Mirror App (opens new window) ，并将其连接到电脑的 USB 端口。Mac 的 Principle 和 Principle Mirror 会自动找到彼此，并将最上面的 Principle 文档发送到您的设备。在设计评审中，按 Cmd~ 可以在打开的 Principle 文档之间快速切换，iOS 应用也会切换文件。

该设计即使在与 USB 断开后仍会继续运行，便于向其他人展示。

如果你想在安卓、Windows 或 Linux 上查看你的设计，请使用 Share to Web。

动画值 #

Principle 使用标准的 bezier 缓和函数，以及动画的延迟和持续时间值。由于这是描述动画的标准方式，这些值通常会直接映射到代码中，不管你的目标是什么平台。点击并按住一个关键帧以查看其时间偏移。点击关键帧之间的蓝色区域来访问其缓和曲线。Spring 动画使用一个标准的 RK4 物理集成器。我们不建议使用任何需要持续时间参数的 UIKit 弹簧 API，因为这只是弹簧物理学的粗略近似，而不是真正的弹簧模拟。

性能