principle导出html5,Principle使用小技巧分享

Principle官方文档和国内现有翻译过来的内容有限，分享几条我在用Principle过程中总结的小技巧吧，也欢迎大家补充。

政策原因资源已无法在简书提供下载，请移步PrincipleChina，谢谢大家的支持！

1、大家都知道，如果直接将矩形图层的Opacity透明度设置为“0”，图层是不可以添加触发事件(闪电⚡️)的，正确利用矩形仿“热点”选区的方法是将图中Fill滑块移动到最左侧，看起来是透明的却可以添加触发事件；

QQ20170704-114950.png

2、刚上手时，对Driver(联动)和Animate(补间动画)往往容易混淆，我用自己的理解说说区别，不准确的地方，求指正；

Driver 空间位置变化时，同一个Artboard页面，前提是发生了Drag/Scroll/Page

Animate 时间早晚/长短变化时，不同Artboard页面切换，前提是不同Artboard种的Layer图层名字要相同(有很多人遇到切换页面时，系统自动添加动画造成页面里面乱糟糟的情况，就是因为名字问题)；

3、如果你想在同一屏，即垂直又水平滚动页面元素，就需要用到“Create Component”，相当于创建了父子页面，在父页面设置垂直，子页面设置水平；

QQ20170704-120918.png

QQ20170704-121015.png

4、Sketch导入Principle要求两个软件都是打开状态，默认导入Sketch打开置于最顶层的文件；

5、添加触发事件时，Tap指向自己所在的Artboard，将快速复制一个自己所在的Artboard；

6、按住CMD，同时鼠标点击矩形或者文本的边框上，可以实现旋转；

7、在左侧检查器面板中，用鼠标在数值输入框下面左右滑动，可以直接调整数值，鼠标实际上会变成水平箭头，因为gif是截屏录制的，造成鼠标样式不同；

QQ20170704-124052.gif

8、在底部Animate面板中，关键帧(Keyframes)是可以用鼠标实现多选的；

QQ20170704-124956.gif

9、在底部Animate面板中，点击雪花，可以Frozen冻结某个动画属性发生变化；

QQ20170704-125742.gif

10、最后说说“Clip Sublayers”，如图，倒叙展现勾选与否的对比效果，正序的话，是通过“Group”三个图层形成了选区，选区的属性是可以在检查器面板调整的，图中是将选区设置成圆形，这样勾选“Clip Sublayers”后，实现了圆形遮罩效果。

QQ20170704-130844.gif

还有什么小技巧，边发现边更新吧。