Principle: 做动效，选对软件很重要 - 简书
<div class="fixed-btn note-fixed-download" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover" data-content=''>
写了28900字，被278人关注，获得了615个喜欢
Principle: 做动效，选对软件很重要
你有多久没做动效了？平时的工作主要是终端视觉设计，功能需求加运营需求，静态稿件加动效设计，从比例来看，动效设计其实不会占很多空间，但偶尔也会来一波。而实际场景往往是：需求是排满的，项目是紧急的，时间呢当然是很少的。一旦有了概念，落地当然是越快越好，效率至上。因此，做动效选对软件很重要。目前市面上已经有很多动效原型设计的软件，AfterEffects，Keynote，Flash，Hype3，Flinto，Proto.io，Pixate，Origami，Framer...两只手已经快要数不过来惹，数不过来也学不过来。学习一款新软件的过程并不轻松，新软件是否真的高效，很多软件与静态稿设计软件（PS、Sketch等）不能无缝衔接始终是一道坎，面对新的逻辑想要从初学者到轻松驾驭，时间也是个问题。看过上面提到的部分软件，也很想尝试，但一看见陌生的界面和新的逻辑内心就非常拒绝，始终难遇真爱。痛并用着的After Effects虽然After Effects软件很强大，拿来做动效很多人说是大材小用。但作为学渣我只会这一款，掌握的也都是非常基本的功能。在此之前我一直使用AE 来完成所有的动效相关的工作，但始终磕磕绊绊，心情略沉重：1. 简单的动效无法敏捷设计日常忙碌的工作中，做出的动效质量不高，因为精调成本太高，想要获得流畅、弹性的动效，需要各种精调布塞尔曲线、图像缩放。另外，使用AE渲染出的mov文件导入ps转化为GIF整个过程非常缓慢，如果是10秒以上的视频文件在ps打开每次都要等1分钟以上，如果是macbookpro还会因此开始呼吸，心疼...2. 无法交互始终是痛点 作为视频处理软件，AE最终生成的是一个动效视频演示，更像是讲述了一个故事。而在界面的动效设计中，我们更需要的是（面向PM、开发者、用户测试的）基于真实场景的交互和使用体验。3. 最终沦为纸上谈兵 没有具体的数值给开发，很难被完美落地实现。你的动效设定很难形容（通常都用时间描述＋跑去和程序员一起慢慢微调），感觉跟开发GG的代沟也越来越深...我们宝贵的工作时间和对动效的耐心与热爱就这样被这些不人性化的缺点给消耗掉。有没有一个新型的动效设计软件既能敏捷高质量地输出动效，又能帮到开发GG获取数值完美实现呢？前所未有的高效－Principle
创始人语录
今天推荐一款非常感人的动效设计软件——Principle。前两天因为有个动效需求排期紧急，半夜搜寻新的动效软件无意发现，看了一下官网视频内牛满面地get了，隔天就用它出demo了。Principle在今年8月份诞生，来自前Apple工程师Daniel Hooper，找到，Daniel Hooper认为A／B test或是客户的评价都不是衡量这款产品的成功指标，而是通过花费大量时间与设计师交流使用感受以获取方向，这么为设计师考虑，有点想哭。了解Principle的5个视频可以帮助快速了解基本操作，和学习Sketch一样查看，英文原文可在找到。Youtube可以搜寻到，太基础不推荐，和看完官网的5只视频效果一样。（新软件太多，连学习过程也有规律了有木有：扒官网&找中文手册&找教学视频&设计网站膜拜大神跪求源文件）没错，接下来就去dribbble搜寻用Principle制作的动画，下载源文件研究。如果你是AE和Sketch的使用者，会对Principle有更为熟悉的认知：类似Sketch的界面＋AE的时间轴动画＋Keynote的神奇移动，外挂一个容易理解的联动功能，用于触发了某个事件发生的变化。画布预设
界面如此清切眼熟，和Sketch如出一辙。每个画布相当于独立的界面，也因此只要有联动变化，就需要新建一个画布，即使他们之间只有细微的差别。（需要注意的是这里屏幕尺寸是1/2）方便的文件拖动
有无@2x文件拖动对比
图片可以直接拖进Principle，Sketch内的文件也可以直接拖进Principle使用，省去了切图的麻烦，注意拖拽前图片或文件需加上@2x的后缀（切图同理）。但如果设计稿经常发生更变，还是建议切图使用，因为可以在Principle直接替换切图而保留其动效设定。支持的交互动作包括点击、拖拽、长按、滚屏、自动循环等，可模拟3Dtouch。
窗口实时预览
提供一个预览窗口体验操作，运行效果界面跟设计界面本来就应该分离，开发者坚持这点真是太好了。元素间自动生成补间动画
如果两个画布中文件名称一样但发生了变化，Principle就会自动像Flash一样为它创建一个补间动画。这里演示的动画除了画布间的Tap触发事件，对图形没有任何额外的操作，Principle根据4幅图之间的元素形状变化自动生成了补间动画。另外，可以快速调整补间动画的效果为缓入、缓出等或直接调整曲线。导出mov、gif甚至追波稿可以通过预览视图的录制工具录制视频并导出视频或GIF，导出时提供各种方便的尺寸设定。目前点击形状只能在圈和鼠标之间切换，分别适用于移动终端和web。在手机上即时体验如果是终端界面动效，在Apple Store下载Principle并用数据线与mac相连，打开principle立刻镜像出你的动效demo，拔掉数据线依然有效，可以欢乐地在手机反复体验，甚至拿去用户测试。而且任何修改都是即时呈现的。手动获取动画数值虽然暂不支持直接输出动画数值，但可以通过时间轴手动获取曲线的具体数值交给开发者去实现我们的设计。
好的软件会影响使用者如果说Photoshop的原配是AE的话，Sketch的最佳拍档未来很有可能是Principle，至少目前为止他们一样高效、敏捷。优点：1. 交互友好，可视化操作，易上手，零代码。逻辑是继承性的，适用于有AE、Keynote、Flash的任何使用经验者2. 轻松输出高质量的动效demo，预设动画曲线非常精妙，调节方便，适用于简单快速的动效需求3. 高效精准，让你的想法快速落地进行用户测试，更直观地与开发分享动效细节4. 爱上做动效这件事，因为做动效从未变得如此简单改进的空间：1. 每一次的变化都需要新建一个画布，如果是复杂的交互将带来多画布和繁琐的逻辑，整个动画地图会非常复杂（比如手上另一个抽奖场景动效，从抽奖过程到结果展示，这种故事性的行为还是需要用AE来完成）2. 目前支持的动效功能比较少，只有xy轴位移、透明度、大小、旋转（已经可以做出很多精彩的效果）。初期版本肯定不如其他动效软件完整，比如z轴位移、重力插件、修剪路径这种（原来我知道的也很少...）btw：本文没有进行软件对比之意，因为并没有深入了解文中提到的除AE之外的其他软件，勿撕。有时间的话最想入手了解的应该是Hype3和Flinto吧，欢迎交流学习。以上
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
@IT 专题 由 IT大分类，转定位于IT·互联网行业观察与思考，数码产品极客体验。
主编：向右奔跑 http://www.ji...
· 251322人关注
· 2124人关注
喜欢不一样视角的产品理论与设计希望你也能喜欢
· 490人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：Principle : 你必须试一试的原型设计工具
原型设计工具Principle试用报告
距&&推荐他的新软件给我已经有五个月了。他给了我一个非常棒的机会：成为&&初期版本的Beta测试用户。长久以来，我花了很多时间在寻找一个好的动画和交互设计方式。过去常用的是After Effect　　AE非常耗费时间，交互不友好并且效果不够真实。我常常花很多时间来折腾缓动曲线，以正确获得完美、平滑的动画效果。然而，程序猿们却从来没有能够按设计效果100%实现过。尝试了&&和&　　但是从未真正的掌握他们，因为他们的软件界面用起来很不熟悉。需要花时间（可我缺的就是时间）去多练习、去搞懂他们是怎么工作的。所以我放弃了他们并且浪费了30天的试验时间......从没搞明白过 Framer.js　　我不是一个写代码的。在我看来，如果你不得不靠写代码来创建一个原型，你不妨去学习真正的语言并且花一些时间去和开发人员在一起。(这里我有些夸张，我知道Framer确实很强大，但仍然......)Origami 要学的东西太多　　很多设计师都发现它很棒，我认可，它看起来非常有效和强大，还有一个巨大的社区在分享他们的经验。但是要记住各种Patch的功能这种方式对我来说太不熟悉了。所以我还是搞不定。&因为没有预览窗口而导致放弃　　这是一个非常强大的工具，也有一些很有趣的特点。但当你每次都必须先保存并重新加载原型才能看到它的运行效果的时候，简直太扫兴了。&　　是因为懒于尝试和学习新的软件吗?&　　　　我很喜欢可视化和快速的工作环境。基本上说，在不同的软件之间跳转切换实在是工作效率的杀手。尤其是当这些软件之间不共享相同的概念、名称、用户界面以及快捷键的时候。（没错，Adobe，就是在说你，在AE里按“T”键为什么不是对应的文本工具呢？）　　因此，我不想每5分钟就不得不转换一次思维模式。（译注：对此译者也是深有同感，如果能在一个软件中一站式解决所有设计需求，效率上肯定会高很多）【&心中的圣杯： Principle 】　　这个软件很聪明的结合了Sketch、Keynote、Flash以及After Effect等软件的优点（再加上一些专门做交互原型的额外功能)。　　最让我印象深刻的是第一次使用时，就立即感觉很熟悉。如果你也很熟悉Sketch，可以发现Principle里面有：检查器面板（Inspector）图层列表（Layer list）画板（ARTBOARDS）&(!)【&案例示范&】第二步：&选择一个素材及其交互设置项上图中，选中了蓝色矩形，并且选择了“点击”交互设置第三步&:&这个交互设置复制了一份画板，你可以调整其中任意素材。第四步：软件自动创建了其中的渐变动画，然后就可以开始通过预览窗口试玩这个动效了。创建一个复杂的渐变效果，竟然如此不可思议的快速和简单。在原型设计的工作流中加入画板有什么好处？　　我曾经在阅读时学到一个理念：像一个编舞者一样设计界面上的动效。画布就是舞台，而各种素材就是其间的舞者。　　当从一个场景渐变过渡到另一个场景时，用户界面上的每个元素的动效都需要有意义。　　使用画板这里真的是最好的,因为你可以看到每个应用程序的状态,每个屏幕一眼,UI将如何反应。　　引入画板的好处包括：可以看到App的每一个状态，每一个场景以及UI元素是如何反馈的。【主要功能特性】轻松地创建从一个场景到另一个场景的渐变效果，对我来说，这就是我要的核心功能。除此以外，Principle还有很多强大的功能可以帮助把原型设计更上一层楼。&交互动作设置（Interaction）此软件专注于设计触摸屏应用程序。因此可以设置以下各种交互动作：点击（Tap）拖拽（Drag）滚屏（Scroll）自动创建渐变动效（Auto animation）长按（Long press）动效设置面板（Animation Panel）　“每个动画效果的共性是什么?&&他们强烈建议永远不要创建线性的动画效果，因为不符合现实世界的心理预期。”　　再次强调，Principle很强大。默认情况下每个动画效果都应用了一个 ease-in（缓动渐快）&/ ease-out（缓动渐慢）&效果，并且可以方便地切换为其他预定义的或自定义的效果。　　此外，此面板还允许您更改一个动画的持续时间、选择执行顺序，以及创建有意义的渐变效果。动效面板在软件的底部，可以在这里控制所有的动画效果（和AE很像，但要高效10倍)。以下是在之前的动效上设置了其他不同动效的效果图：驱动器面板（Driver panel）我花了一些时间来完全理解这个功能。一旦你掌握了，你会惊异于你能在原型中实现的效果。驱动器主要是用于创建滚动或拖动事件，并“链接”不同的素材，或在某个项目上添加几个属性。比方说，你希望当拖动一个素材时显示一个叠加层，或者希望当滑屏时旋转一个素材。这些都可以通过驱动器实现。以下是案例示范：第一步：准备素材紫色矩形放置在画板以外，当拖动它时，一个叠加层将逐渐显示出来。第二步：&打开软件顶部的驱动器面板，然后选中目前设为透明的叠加层矩形第三步：在驱动器面板的对应图层中添加不透明关键帧，这样的话，紫色矩形被越往下拉，叠加层显示的颜色就越深。这个功能需要多加练习，一旦你掌握了......（译注：原作者真是好爱用点点点，留潜台词）&其他更多......　　当然，还有更多的小功能，如遮罩、文本、预设画板......以及针对各位Dribbblers，提供了一个录制原型演示&导出GIF的功能，方便你在粉红色的网站（译注：也就是了）上分享给其他设计师朋友。【尚不完善】　　能成为Principle的beta测试用户真的很棒。我测试时是0.2版本，然后立马感受到它的巨大潜力，并爱上了它。还有很长的路要走。提供的动效类型没有AE多，只包括：遮罩、X轴/Y轴移动、透明度、大小缩放、旋转。但也已经可以做出很多效果，专注于简洁嘛。暂不支持导入Sketch源文件，但我打赌很快就会有不支持将原型输出嵌入到Web中预览、测试软件的迭代优化还不够【前景不错】　　我对这个软件的未来很有信心，因为我看到了Principle的团队在倾听用户的反馈并且改进。　　我想说我有点小难过，因为现在Principle开放试用了，我不得不和大家一起分享我喜欢的秘密玩具。　　但我又等不及想要看你们用它来创建各种精彩，以及伟大的原型工具将如何影响未来的每一个App。【让你的动效设计知识更上一层楼】如果你是动效设计的初学者，以下是一些我推荐阅读的文章：UX choreography (personal favorite):The purpose of animation :&The good use of animation :&Understanding easing curves :Good transitions :&-------------------------------------------------------------------------------------------译者：Shunz顺子译文地址：欢迎订阅个人微信公众号：
打开微信“扫一扫”，将本文章分享到朋友圈
快给朋友分享吧！
31人已收藏
小U妹文章推荐
Ctrl+Enter
你的打赏就是我的动力！
悄悄说，听说打赏的人收入都比我高，不信你试试。
注: 打赏金额随意，完成后，请手动关闭本窗口。
Ctrl+Enter
您将要删除您的大作
Principle : 你必须试一试的原型设计工具
在她入驻到UI中国的日子里
总共吸引了2555位设计师的驻足流连
总共收获了6位设计师的由衷赞赏
总共获得了31位设计师的悉心珍藏
总共引起了0位设计师的深入讨论
依然要删除吗？Principle文档中文版
Principle是一款动效交互原型制作软件效率高著称，只有mac版。开了个Principle中文网，后续增加实例教程,欢迎访问
界面&Interface绘图&Canvas屏幕中心区域是绘图空间，绝大部分工作将会在这里完成。它包括所有画布和画布间的跳转关系。被选中的画布将会以绿色边框高亮显示。预览&Preview预览功能可以随时操作预览你的设计草稿，它默认锁定在屏幕右上。当然你可以拖拽预览窗口到软件窗口外解锁。点击关闭按钮即可重置预览窗口到工作区右上角。拖拽预览窗口四角可以改变窗口大小，窗口大于画布时，画布不会放大，但窗口小于画布时会等比缩小。图层列表&Layer List图层列表在软件的左下，它显示了全部画布、子图层、图层间的层级关系。在图层列表中拖拽图层可以可以成组或解组。拖拽画布排序即改变画布在屏幕中的显示位置顺序。点击眼睛可以切换隐藏显示图层以便编辑，但不影响在预览窗口中的可见性。检查器&Inspector工作区左侧，图层列表上方是检查器，在这显示了选中图层的各种属性，包括：对齐操作、X/Y坐标、长/宽、角度、缩放、透明度、圆角率、关联的图片、颜色填充、组合裁剪、水平/竖直操作。动效视图&Animate View点击顶部“Animate”工具按钮或点击画布间的跳转箭头即可打开动效视图。它通常用来调节切换动画的时间和动画曲线。联动视图&Drivers View点击顶部“Drivers”工具按钮打开动效视图。它通常用来创建逐帧的补间交互动画。画图&Drawing初见 Principle，可能会觉得它像一个绘图工具。基本元素可以在 Principle中绘制，复杂的图形可以通过图片形式导入。新图层会默认归入当前的画布中。画布&ArtboardsPrinciple 的画布和其他画图软件类似：每个画布相当于一个独立的页面。画布的尺寸可以设置成各种设备的大小或任意你喜欢的尺寸。多个画布可能代表同一个页面，页面间只有细微的差别。例如：设计播放器的播放和暂停状态使用两个画布，两个画布只有播放和暂停的按钮不同。矩形&Rectangles点击左上角“矩形”图标或使用快捷键“R”来画一个新的矩形。如果想画一个圆，只需把圆角率调成一个非常大的数值。把图片拖到检查器的图片区中可以给图形设置图片背景。新矩形默认尺寸为44x44像素，这是因为在iOS中至少44x44的区域才方便点击。文本&Text文本和矩形的属性参数类似，只多了字体、对齐方式、字体大小。字体和对齐方式两个属性不能动态变化。Principle 中使用的字体可能在iOS设备中不存在，所以这可能导致在设备连接“镜像”时不显示文字。使用常规字体或安装所需字体来解决这个问题。图片&Images在 Finder 中可以拖拽图片到 Principle 里 ，也可以直接粘贴 PNG 和 JPEG 到 Principle 中。如果你是 Sketch 用户 ， 合并选区为一张 PNG 图片，粘贴到 Principle 即可。当图片很多层级结构错综复杂时，会让人很烦恼。我们深知这一情况，正在着手解决。图片的长宽比默认是锁定的，你可以点击长/宽属性框中间的小锁头图标解锁。拖拽图片到一个矩形的图片容器中可以把图片变成一个矩形，点击图形容器并按DELETE键可以删除矩形的图片背景。高分辨率图片如果拖入的图片名以“@2x”或“@3x”结尾（例如logo@2x.png、menu@3x.png），那么导入的图片将会自动缩放为1/2和1/3大小。如果你已经导入了一个高分辨率的图片，也可以通过设置图片的长宽数值为1/2达到同样的效果。(进阶提示：检查器的属性输入框支持简单的数学运算，输入“320/2”可以方便的调节图片大小。)从 Sketch 和其他软件中复制粘贴图片到 Princile 中默认是1倍大小。所以在导入 Principle 前，图片最好导出为高清分辨率来保证显示正常。组合&Groups组合在 Principle 里只是一个有确定填充的矩形图层。因此，组合将会有自己独立的位置和大小，不管是否小于子部件的边界。UIKit，Android，DOM 也是这样去绘图和运动的，如果你按使用 Photoshop 或 Sketch 的方式来使用图层可能会有意外情况发生。组合在制作更大的图层交互、旋转不同原点的图层、在每个图层的基础上实现连环动画是非常实用的。裁剪/遮罩/剪辑&Cropping / Masking / Clipping当你勾选“Clip Children”后，组合功能可以裁剪图层。如果想要圆形的遮罩，可以调节圆角率参数。连续的交互&Continuous InteractionsPrinciple 内建了三种通用的交互：拖拽、滚动、翻页。并可以单独的只在图层的X轴或Y轴开启。拖拽&Dragging开启拖拽后就能用鼠标点击按住移动图层来改变位置。轮播图、悬浮窗、探探，都是典型的拖拽案例。滚动&Scrolling当一个图层有子图层时，可以开启滚动。当手指拖动滚动图层时，子图层会随手指移动，但父图层整体不会移动。地图、新闻列表、长文章都可以利用滚动实现。如果没有子图层时开启了滚动，那么系统会自动创建一个滚动图层组，很棒吧。打开“Clip children”选项后滚动到边界之外的部分会不可见。翻页&Paging翻页和滚动很像，只不过翻页可以每次滚动固定的距离，这个距离和组合的大小一致。翻页可以用于图片切换、手机主页的图标翻页、或者任何卡片式翻页设计，最近这种设计非常流行。如果你想在页面间添加内边距，让翻页组稍稍比你需要的大一些，留空页面内容的边距。事件&Events事件触发器用于在不同画布之间页面切换。点击图层或画布，你会在右侧发现“闪电”图标，点击图标会出现支持的事件列表。点击按住事件前面的空心圆，拖拽指针到想要跳转的画布就创建了页面跳转的一种交互。这时你会发现两个画布上面会出现一条箭头，从出发页面指向目标页面。拖拽时如果指向当前的画布，会在右侧复制一份当前画布。值得注意的是如果把图层的透明度设置为0，那么这个图层就不能触发点击事件，是真的“透明”。下面是事件的几个类型点击&Tap点击是最常见的事件，多数用于可点击的按钮。触发非常简单：按下，松开，发射！拖拽开始&Drag Begin当按住部件，开始移动时，就会触发这个事件。使用这个事件的前提是要打开部件的可移动属性(draggable)，如果在目标画布有同样名称的图层部件，不出意外完成拖拽事件后部件的位置就确定了。拖拽结束&Drag End拖拽图层部件之后松开鼠标会触发事件。同样在使用之前需要打开可移动属性。滚动开始&Scroll Begins当一个部件图层开始滚动时触发事件。使用前需要打开可滚动属性。滚动释放&Scroll Released当部件图层滚动并抬起鼠标时触发事件。注：此时滚动可能还没停止，只是鼠标松开了。这个事件同时对滚动和翻页起作用。使用前需要打开可滚动属性。滚动结束&Scroll Ended当滚动完全停止时触发事件。这个事件同时对滚动和翻页起作用。由于必须完全停止后才触发事件，所以整个动画可能有很长时间的延迟等待动画完全结束。使用前需要打开可滚动属性。按下&Touch Down当鼠标按下时触发事件。可以用于制作按钮的按下效果。释放&Touch Up当鼠标抬起时触发事件。注：鼠标从外部按下，移入有事件的部件图层，这样是不能触发事件的。必须在带有事件的部件图层按下才可以触发事件。长按&Long Press按住0.5秒后触发事件。自动跳转&Auto当进入设置此属性的画布时，自动触发。多用于循环原型或复杂的多步骤动效。注意：只有当鼠标进入预览区域时才会触发事件。这一举措是为了节省电池寿命，和你的精神。动画&Animation当触发事件时，Principle 会自动创建两个画布之间的补间动画。动画地图&Animation Mappings如果一个图层部件在两个画布中名称一样，Principle 就认为这两个部件是同一个，继而根据这个部件的位移等属性变化创建补间动画。反之，如果在两个画布间没有图层部件名称相同，画布切换时部件就会突然消失或显示。预设动画曲线&Custom Animations动画的默认持续时间是 0.3秒，默认曲线是 iOS 和 OSX 中使用的曲线。在动画视图(Animate)中可以调节设置。点击两个画布顶部的箭头显示该转换的动画视图，可以生成动画的图层部件及其属性以列表显示，在这个时间轴可以调节动画持续时长、出现时机和动画曲线。关键帧&Keyframes在动画视图中，每条时间轴有两个关键帧，一个代表动画开始时刻，另一个是结束时刻。拖拽关键帧可以改变动画持续时间，拖动选区或用 Shift 可以批量修改。缓和曲线&Easing Curves缓和曲线决定了以下动画相关属性的速率：移动会不会从慢逐渐变得越来越快？或是开始非常快，但接近终点时突然又变慢了？以上现象就是由缓和曲线去控制的。在动画视图中点击时间轴右侧的下拉菜单，菜单中显示了预设的几种曲线，点击曲线名称可以在坐标轴里查看图形。预设的几种曲线跟 iOS 和 OSX 使用的一样。你可以随时调节预设的曲线：拖动曲线的两个手柄，改变长短和角度，或者在下方直接输入坐标都可以自定义动画曲线。自定义曲线不会抹掉预设曲线，可以大胆使用。弹性曲线&Springs弹性曲线模拟了物理弹性，和固定曲线那种从开始和结束的属性数值做渐变不同。它可以把一个元素的运动变成生动活泼。但也不能滥用，因为它会吸引人的注意力而打断思路。动画曲线的属性会根据持续时间自动的调节，所以只需微调关键帧即可改变动画的强度：越长力度越小，软绵绵；越短力度越大，干脆弹力十足。可选择的属性&Optional Properties动画视图中，图层名字后面有个绿色/红色方块。它可以切换是否允许一个属性在两个页面动画过度后变化。说白了，它把一个属性从上一个画布搬运到目标画布。This is useful when applied to a draggable layer to leave its position unaltered.(暂时没用过这个功能不知道如何解释，以后更新)联动&Drivers想制作带有交互的视差效果？想让一个图层在拖拽的同时旋转？联动功能可以实现。联动用关键帧链接了每个属性。和动画不同，动画发生在页面切换时，联动发生在同一个页面中。在工具栏点击“Drivers”可以展开当前画布的联动视图。联动和典型的动画时间轴工作原理一致，唯一不同在于动画不是基于时间，而是属性的参数变化。联动源&Driver Sources想要创建联动，必须存在一个可改变的属性，这叫做联动源。可拖拽、可翻页的图层还有可选择的属性都可以作为联动源，在联动视图中列表显示。可联动属性&Driven Properties一旦有了联动源，你就可以用它控制其他属性。选择一个你想控制的图层，点蓝色的加号图标，选择一个你想做联动的属性。这时会以当前的属性参数创建一个关键帧。只有一个关键帧不起任何作用。联动关键帧&Driver Keyframes和动画一样，联动需要至少两个关键帧才能有效果。水平拖拽灰色标记，然后再次点击蓝色加号按钮可以在时间轴当前位置创建另一个关键帧。千万别忘了修改第二个关键帧的属性参数。导出&Export一旦完成一个工程，你一定想让全世界都看到你的成果。有以下几种方式可以实现。视频录像和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 positionlayer.position = CGPointMake(newValue, layer.position.y);CABasicAnimation *animation = [CABasicAnimation animation];animation.fillMode = kCAFillModeBanimation.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&#39;sanimation.beginTime = CACurrentMediaTime() + 0.1; // time value of first keyframeanimation.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&#39;s */animation-timing-function: cubic-bezier(0.1,0.1,0.9,0.9) /* these 4 numbers are from the curve selector popup */}快捷键&Shortcuts图层&Layers添加矩形：R(Alt + R作为子图层添加)添加文本：T(Alt + T作为子图层添加)添加画布：A组合：Cmd + G拆分组合：Cmd + Shift + G移到顶层：Shift + Cmd + ]上移一层：Cmd + ]下移一层：Cmd + [移到底层：Shift + Cmd + [编辑&Editing移动部件：方向键快速移动部件：Shift + 方向键旋转部件：Cmd + 拖拽"旋转"把手旋转15°的倍数：Cmd + Shift + 拖拽"旋转"把手原处复制：Cmd + D复制并移动：Alt + 拖拽部件选择器文本框：可以识别简单运算，如"320/2+10"选择器标签：鼠标左右拖动可以快速调节数值画布导航&Canvas Navigation移动画布：空格键 + 拖拽画布放大画布：Z + 点击需要放大的地方放大画布：Cmd + =缩小画布：Cmd + -缩小画布：Alt + Z + 点击需要缩小的地方连续缩放：Alt + 空格键 + 鼠标拖拽完整显示：Cmd + 1选区完整显示：Cmd + 2把选区移至中央：Cmd + 3实际大小：Cmd + 0选择&Selection选择父部件：Esc选择子部件：Enter选择其他子部件：Tab选择全部子部件：Cmd + A预览&Preview重置原型预览：W显示鼠标指针：Cmd(当鼠标在预览框中)录制&Recording录像中隐藏鼠标指针：Alt + 点击录像按钮开始录像：Ctrl + V开始录像(不显示指针)：Ctrl + Alt +V常见问题&FAQPrincile 会有 Windows/Linux/Android 版本吗？Principle 和 Principle Mirror 是利用OSX 和 iOS 独有的核心技术构建构成的，所以很遗憾不会有其他平台的版本。可以导出网页格式原型吗？考虑到网页性能的局限性，我们暂时没有计划开发这个功能。什么时候会在 Mac Appstore 上架？我们不打算在 Appstore 上发行，因为它的审核速度慢又严格，而且还要扣除 30% 的收入。在 Appstore 之外提供下载，我们可以频繁的升级，自由的增加新功能而不用经过漫长严格的审核过程。Principle 以后的发展路线是怎样的？我们不说对未来功能有什么规划。但是如果你有一些很好的想法，可以在应用内的 feedback 功能上提交，说不定以后的版本我们就会增加!
打开微信“扫一扫”，将本文章分享到朋友圈
快给朋友分享吧！
38人已收藏
小U妹文章推荐
Ctrl+Enter
你的打赏就是我的动力！
悄悄说，听说打赏的人收入都比我高，不信你试试。
注: 打赏金额随意，完成后，请手动关闭本窗口。
Ctrl+Enter
您将要删除您的普通推荐大作
Principle文档中文版
在她入驻到UI中国的日子里
总共吸引了6150位设计师的驻足流连
总共收获了32位设计师的由衷赞赏
总共获得了38位设计师的悉心珍藏
总共引起了4位设计师的深入讨论
依然要删除吗？}