导出

一旦完成一个工程,你一定想让全世界都看到你的成果。有以下几种方式可以实现。

视频录像和Gif动图 Videos and Animated Gifs

通过预览视图上的录制工具可以导出视频或Gif。当你点击右上角的录制按钮就开始录制预览视图中的全部操作(按住 Alt 键再点击可以在导出的视频中隐藏鼠标指针;按 Cmd 键可以切换显示鼠标箭头形状还是手指形状,在设计桌面应用时可能会用到)。开始录制后,再次点击录像按钮停止录制。

Gif 设置

当你导出 Gif 时,你可以在下拉菜单选择或键入参数来设置下面几个预设格式:

·45%

输入一个百分数可以生成按百分比缩小的版本。并且这个设置会覆盖下面的设置。

·134h

导出一个确定高度的 Gif ,是等比缩放的。

·320w

导出一个确定宽度的 Gif ,是等比缩放的。

·400w 300h

导出一个固定大小的 Gif,此时会缩放画布至合适的大小,并且会自动增加内边距和投影,还可以在右侧设置图片背景的颜色。

在设备上运行 Running on Device

在手上把玩你的设计稿是最好的体验方法,它提供的体验和使用鼠标点按完全不同。下载 Principle Mirror 在你的 iOS 设备上然后用数据线连接电脑。Principle Mac 版会自动发现已连接的设备,并立即发送当前的设计稿到设备上。使用快捷键 Cmd + ~ 可以快速切换两个设计稿。

iOS 设备上的设计稿在断开数据线后可以继续运行。这可以让你更容易的把设计展示给团队成员。

Principle 文件可以在 iOS 设备上直接打开。所以你可把文件发送给他人,或者让别人把设计稿发给你,一切就是这样简单。

动画参数 Animation Values

动画参数可以用在代码中。工程师可以非常简单的获取动画参数。

核心动画(iOS,Mac)

在这个例子中,我们给图层的x属性做了动画

float newValue = 320.0f;
float oldValue = layer.position.x;

// Move layer to new position
layer.position = CGPointMake(newValue, layer.position.y);

CABasicAnimation *animation = [CABasicAnimation animation];
animation.fillMode = kCAFillModeBackwards;
animation.additive = YES;
animation.toValue = @0;
animation.keyPath = "position.x";
animation.fromValue = @(oldValue-newValue);
animation.duration = 0.3; // time value of second keyframe minus the first keyframe's
animation.beginTime = CACurrentMediaTime() + 0.1; // time value of first keyframe
animation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.1 :0.1 :0.9 :0.9]; // these 4 numbers are from the curve selector popup

[layerToAnimate addAnimation:animation forKey:nil];

CSS3动画

div {
animation-duration: 4s; /* time value of first keyframe /
animation-delay: 2s; /
time value of second keyframe minus the first keyframe's /
animation-timing-function: cubic-bezier(0.1,0.1,0.9,0.9) /
these 4 numbers are from the curve selector popup */
}