Principle交互动效制作基础-principle初识篇

principle优点：

1.上手快，易学，综合体验棒。

2.界面和sketch如出一辙，支持sketch文件导入，如果说photoshop的原配是AE,那么sketch的最佳搭档就是principle

支持平台：

开发者基于mac开发，目前只支持mac端应用。

学习网址分享：

http://principletemplates.com

dribbble优秀设计师推荐：

https://dribbble.com/johnyvino

第一步，建立画布

第二步，选择矩形工具在画布中画一个长宽为150x20px的图形，圆角大小为88px，填充颜色

第三步，复制两个，复制“shift+option+鼠标左键”，水平居中，将三个图形选中居中画布

检查器翻译如下

第四步，选中画布1，注意当选中画布时，右边会出现一个带闪电的小icon

第五步，鼠标单击闪电icon，会弹出属性面板，这里需要点击tap

动效视图各事件翻译如下

第六步，点击tap指向当前画布，这样就复制了一个画布，两个画布图层列表命名是一模一样，这样就会自动形成补间动画

第七步，对画布2进行设置，将图层“Layer 3”角度改为-45°，将图层“Layer”角度改为45°，然后选中两个图层水平居中，将图层“Layer 2”透明度改为0，比例改为0

第八步，选中画布2，点击闪电icon，tap指向画布1

第九步，预览，导出，导出格式可以是mov,gif，也可以在手机安装principle,随时随地浏览动效成果

最终展示效果如下（重点知识：动效视图“tap”的运用）