Principle 学习心得

最近的项目中有一个需要展示交互 Demo 给领导做展示，这个时候我想到了 principle ，距离上一次使用这款软件，大概快一年了吧，当时也是紧急要展示 Demo 才去学习，并做了一个效果还不错的案例。

我发现软件不常用，真的不记得了，我甚至都看不懂源文件了，于是又去某学习网站搜了一下教程，还好还好能唤醒我的记忆力。当我打开软件的时候吧，发现软件竟然崩了打不开，因为我英文太烂所以我装了中文破解版，可能是版本出问题了。建议大家英文再烂也不要装中文破解，什么时候软件崩了又急用的时候真是想哭。

安装完软件后看到满屏的字母也是慌到不行，只能硬着头皮上，这里分享一下我翻译过来的一些主要功能吧

Artboard 画板

当前的画板会以绿色边框高亮显示。Principle会自动将你的画板从左到右摆放。你可以在图层列表中拖动它们的行来进行画板排序，否则无法重新配置。

Preview 预览

预览框可以随时查看设计交互效果，在画布的右角上，可以随意拖动。点击 show preview 按钮可设置导出参数，也可改变预览光标是圆圈还是箭头或者不显示。

Inspector 检查器

窗口左侧，图层列表上方是检查器，检查器面板中显示选中图层的各种属性。包括：对齐方式、X/Y坐标、宽/高、角度、缩放、透明度、圆角、填充、媒体、描边、阴影、模糊、水平/竖直设置等。

Animate Panel 动画面板

显示时位于窗口底部，用于设置画板之间的动画效果。你可以点击工具栏上的“Animate”按钮，或点击画布上画板之间的触发事件连接箭头，都可以打开动画面板。

如果不同的画板中有两个相同名字的图层，Principle 会自动为它们添加补间动画效果。时间等动画属性以及相关的动画参数，在动画面板中都可以进行调整。

Drivers Panel 联动面板

显示时位于窗口顶部，用于同一个画板中图层的空间位置变化，发生的联动关系，可以创建复杂的、持续的交互效果。你可以点击工具栏上的“Drivers”按钮打开联动面板。

Continuous Interactions 连续的交互

Principle中有三种通用的交互形式：拖动（Dragging）、滚动（Scrolling）和翻页（Paged Scrolling）。这些交互形式可以单独在图层的垂直轴和水平轴上使用。

拖动（Dragging）

当在图层上移动的手指被抬起时触发。将此事件添加到图层会将其垂直和水平属性设置为拖动。

滚动（Scrolling）

当可滚动图层开始滚动时触发。将此事件添加到图层会将其垂直和水平属性设置为Scroll。

翻页（Paging）

翻页和滚动类似，只不过在滚动结束时翻页可以自动弹回到滚动距离增量的位置。翻页适用于图片轮播、手机主屏幕图标、任何卡片式UI，这些时下流行的设计。如果你想增加页面间的内边距，让翻页组比页面元素略大一点，并且留出空白。

Events 事件

触发事件的转换发生在不同的画板（Artboards）之间。选中图层的同时右边显示的“闪电”按钮，点击“⚡️”会出现事件列表，点击并拖动代表某一事件的小圆圈到目标画板，即可完成添加触发事件，这时源画板和目标画板通过一根转换箭头线连接。拖动触发事件箭头指向所选中的图层画板将复制出一个画板。

触发事件的类型：

1、Tap

点击，当图层被点击、轻触时，常用的按钮。

2、Drag Begins

拖动开始，当手指按住图层开始移动时，添加此事件要确保图层已设置可拖动，如果目标画板有相同名字的图层，拖动交互在事件发生之后，拖动状态将被结束。

3、Drag Ends

拖动结束，当手指在图层上移动并抬起时，添加此事件要确保图层的垂直和水平属性已设置可拖动。

4、Scroll Begins

滚动开始，当图层开始滚动时，添加此事件要确保图层的垂直和水平属性已设置可滚动。

5、Scroll Released

滚动释放，当手指在图层上滚动并抬起时，此事件同事对滚动和翻页起作用。在事件发生之后，页面内容可能继续滚动。添加此事件要确保图层的垂直和水平属性已设置可滚动。

6、Scroll Ends

滚动结束，当滚动完全停止时，此事件同事对滚动和翻页起作用。由于从减速到完全停止需要一点时间，所以此事件可能需要较长时间的延迟才发生。添加此事件要确保图层的垂直和水平属性已设置可滚动。

7、Touch Begins

按下，当手指接触到图层时，可用于制作高亮状态的转换效果按钮。

8、Touch Ends

抬起，当手指从图层抬起时，可用于制作非高光按钮。如果是没有添加触发事件的图层则不会生效。

9、Long Press

长按，当手指按住图层0.5秒后。

10、Hover Inside

鼠标移入，当鼠标移进一个图层时。

11、Hover Outside

鼠标移出，当鼠标移出一个图层时。

12、Auto

自动跳转，当页面打开时自动触发，适用于循环动效，只有当鼠标进入预览框时才触发事件，目的是节省电池寿命，也让你更理智的进行设计。

基本上这些可以完成简单的动画效果了，下面展示一个简单的学习临摹案例

Powered by Froala Editor