在 Principle 面世之初（v1.0.1）便开始接触，因有感于其上手快速和效果精巧，遂运用到工作中。一年来，见证了它的版本迭代（v2.1），各版本新增的特性（视频，组件等）无一不是设计师们呼声极高的功能（见进阶部分）。在此分享一路以来的学习心得，与大家共同探讨。

章节概要： 背景（2min） /  上手（5 min）/  进阶（3 min）

准备工具：Principle for mac v2.1，可自行百度下载。 Windows 死忠请无视...

基础知识：对 Sketch 有一定了解为佳，参考   《ARTS 四步上手设计神器 Sketch》

1.背景

1.1 为什么要做动效？

做动效有以下显而易见的优势和使用场景：

【检测】验证想法效果和可行性:“原来我设想的效果行不通/行得通！”

【沟通】说服相关方采用/放弃某方案:“这样做真的合适/不合适，老板您请看这个Demo”

【直观】提供开发/测试同事参考:“我们想要的效果是这样的”

1.2 Principle 是什么？

Principle  是由 Apple 前设计工程师 Daniel Hooper 开发的动效制作软件，具有轻便，高效和学习曲线平缓等众多优点，一面世便广受设计师好评。

（一款真正由设计师开发，而非工程师开发的设计软件；让广大设计师们感受到了设计同行的善意… 咳，『快速上手做动效』的魅力）

业内比拟：如果说 sketch 是简洁版的PS，那 Principle 就是简洁版的AE

1.3 为什么用 Principle 做动效？

一个字：快

目前市面上已经有各种原型制作软件和动效制作软件，AE, Framer.js, Form, Oragami, Flinto等等，从每个软件的产出作品来看，似乎每一个都能生成各种拟真的原型。

然而，做动效一般具有『耗时』，『方案修改慢』，『开发无法复用』，『分享不方便』等缺点，与当下敏捷迭代的观念相抵触。因此除非特殊需求，很少设计师会主动做动效。Principle 的出现，改变了这个现状。

优势关键词：快速搭建，sketch 联动，实时预览，可互动

2.上手

2.1 初识 Principle

问：『 平时项目都忙不过来，哪有心情和时间从头学一款软件？』

解：『以 Principle 贴地的学习曲线，完全可以找一个做动效的需求，边做边学 』

默认界面里，Principle 有『主菜单』，『元素属性』，『实时预览』『图层』和『操作区』五个部分。实际操作中，还会视实际情况打开底部的『时间轴』面板和顶部『传动器（drivers）』面板。

从布局来看，sketch老枪们应该发现，他的界面和布局和sketch具有极高的相似度，甚至连快捷键都高度重合

（来来来，让我们 A 一个画板，R 一个矩形，T 一段文字…）

Principle 支持各种导入姿势： 从 Finder 拖拽导入， sketch 工程文件导入，甚至支持『sketch内复制』，『在principle内粘贴』的逆天联动，直接省去了『导出切图』的繁琐过程。

2.2 多页动效

Principle 基本原理（敲黑板）：『多页面+触发节点』实现动效。

1、『开始页』：绘制动画开始前的状态

2、『结束页』：绘制动画结束时的状态

3、『触发连接』：通过选中元素旁边的“动作”按钮，选择触发动画的操作，连接开始页和结束页。

和flash的补间动画的概念有一定的相似，在Principle中，画板（artboard）就是页面的不同状态，软件会识别画板间元素的差异，生成过场动画。而设计师要做的，就是画好这些状态，并通过触发效果来连接它们。

注：同一个元素在两个画板的图层命名要相同，软件才会实现动画。

一个简单例子：

 在画板一预览窗点击『Layer』，即可看到图层放大的过程。反向连接原理同上。

除了动效时长和顺序外，Timeline窗口还支持运动速度曲线的设置，同时有方便的预置曲线可供选择。如果前端开发GG对实现速度变化的贝塞尔函数有疑问的话，可以尝试提供缓动函数速查表 http://easings.net/zh-cn  并附实现原理，以帮助实现Demo效果。

进一步复杂的效果，则可以由多个开始页和结束页，以及他们之间的触发而逐步连接而成。

2.3 单页动效

单页动效，即在单页内发生的动效，如页面可滚动，或元素可拖拽等。需要实现这类动效时，可选中元素，并在左侧选择『水平方向』(Horizontal)或『垂直方向』（Vertical）的下拉窗，并选择『静止/拖拽/滚动/分页滚动』四种效果的一个。

以下是实战中最常见的，列表区域可纵向滚动的实现案例。

注：1、需要通过改变文件夹区域来定义滚动区域的大小；2、必要时，可选中 “clip sublayers” 来隐藏滚动区域外的内容

2.4 传动动效

传动动效是基于单页动效的页面效果，可初步理解为某『元素』随着『单页动效』运动而发生运动。当页面内有单页动效时，我们可以通过 传动器（drivers）来产生传动动效。

打开drivers面板，拖动传动针，即可看到『单页动效』的不同状态。此时我们可以选中任一元素，添加属性到关键帧里，来设定该元素在不同动态下状态。

接上一个案例，当完成页面的滚动效果后，若我们想做一个『滚动指示条』，可以跟随页面滚动而进行相应滑动，即可运用到传动动效。 

2.5 实时预览和分享

同步：Principle 有可以实时预览的 ios 应用，且操作非常便捷，只需在手机上下载并打开 Principle，用usb连接mac，电脑中当前打开的principle项目即立即同步到手机中，且可以实时交互。

分享：除此之外，mac 上保存的 .prd 工程文件也可以通过qq或微信传送到手机，手机端即可打开并交互。

录制：如果仅仅用于展示或分享，Principle支持快捷录制视频或gif，满足基本的分享操作；甚至可以导出为专门用于在mac上展示的『应用程序』文件，可在mac 操作系统内实现可交互的演示。

3. 进阶

3.1 视频层（Video Layer）的引入

在Principle 1.2 版本中，Daniel 让软件支持了『视频』图层和『音频』图层，让原型的制作增加了更多可能。设计师们可以将原有在AE中实现的动效视频导入到 Principle工程文件中，作为其中之一的元素，也增加了principle 效果的想象空间。

该工程项目的是为了实验弹幕的不同效果。看似包含了很多动效，其实背景为录制的某直播app的视频，节省了用软件做动效的时间，也极大地增加了Demo的仿真度（fidelity）。

3.2 组件（Components）的引入

在Principle 2.0 版本中，原型支持了『组件』的功能，即工程文件中的一部分动效可以生成『组件』，复用到该工程的其他地方。对该『组件』的修改，会影响到同一个工程文件内所有相同的组件。

Sketch老枪们应该又双叒叕发现了，Principle组件对齐的是sketch 的元件（symbols）功能。有了这个功能，便可以将某些复杂的动效做成组件，复用到工程的其他地方，甚至备用到将来的项目中。

建立组件的方法很简单，选中元素后，点击顶部主菜单面板中的『创建组件』(create component)即可。你将在一个新的 principle 面板中编辑元素和效果，并可以随时通过顶部的『返回上一级』（back to parent）返回。

请无视本案例试验的伪3D动效，聚焦在宇航员身上。在loading页面的宇航员和在动效结束页的宇航员，运用了同一个组件。当对任一一个进行修改后，另一个宇航员也会进行相应调整。

除此之外，2.0的这次重要升级，还允许 prd文件多层嵌套prd文件，让『协同设计动效』和积累『动效控件库』成为了可能。 

动效模块化设计：要实现一个较繁琐的动效项目时，主设计师可以将动效工作拆分给多个设计师完成，在完成后负责整合所有动效。Daniel 在他的component  教学视频  中也对这种工作模式进行了初步的构想。

3.3 其他在实践中的一些tips

- 可以设置透明度为1的方块来作为触发热区（透明度为0的元素不可交互）

- 需要设计以本身为轴心的旋转时，可利用和隐藏物体建组，改变整组的 angle 来实现。

- 希望改变某图片内容时，可以选中该元素，点击左侧的media来更换。Principle会自动识别相似元素，并询问是否批量更换。

- 设置auto转场时，若想在页面内停留一段时间，可设置透明度为0的物体，并在两个页面产生位移。通过控制位移的时间，来自定义某页面停留时间。

- 目前还不能实现跨组件的动效关联

- 目前还不支持画曲线的路径动画

总结

Principle旨在让设计师能更轻松，高效地设计可互动的界面，从而产出超越静态界面、可表达一定情感的动态界面。辩证地来看，做 Demo 快的另一个好处是，你不会过度地眷恋某一个Demo。当你意识到这并不是你想要的结果时，你可以更容易地放下她，去尝试更好的方案。

参考阅读

1、Principle 官方教程，习惯看教程的同学能对 Principle 的基本功能初步上手

http://principleformac.com/tutorial.html

2、爱好者制作的 Principle 中文文档，这份的质量比较高

http://principleux.com/principle-chinese-document/

3、Principle 的推特官号，可以下载爱好者上传的作品来学习（一定要看超萌PolarBear的案例！）

https://twitter.com/principleapp