玩转Principle，先了解这些 (含资源素材)

全篇1400字左右，预计阅读时间为3分钟

为什么要学习动效？

UI的岗位需求需要复合型人才，UI岗位除了本职岗位的视觉部分，上面承接交互设计，下面承接开发。承上启下，都很有必要将高保真动起来。且动效的引入会提高提案通过率。

交互岗位特有的“讲故事”陈述特点，用动画把各个页面逻辑串联起来，可进行最小产品开发测试以及小范围的可用性测试等。最后，基于情感化设计，在交互设计中运用动效，达到优化用户体验的目的。

最后可以预防老年痴呆和增加逻辑思维，作用和打麻雀是一样的效果。毕竟据研究表明，人的脑细胞是死一个少一个，如果不用尽岂不是浪费。

先看看Principle可以做什么

Principle的好在哪？

首先，Principle和keynote和AE的思路很像，全程区域可视化的操作，而不是背后一堆代码来实现。

其次，操作界面和sketch很像，且支持OG和Sketch素材的复制粘贴。

再次，Principle基于苹果的Core Animation，也就是说做出的动画，动画参数开发可以很容易调出来。

再再次，可以在PC、Phone上面实时预览，动画可以直接输出视频、gif

哪些人适合学习？

1. 不会Javas cript/Coffees cript的人 所以可以忽略掉学习Framer Studio

2. 会些AE的人，但是又觉得炫技不能进行动画交互

3. 觉得flinto不够用的人

4. 觉得Proto pie太复杂的人

5. 。。。

Principle的核心要素有哪些？

要素就四点：

1.事件Events

2.动画Animation

3.连续的交互Continued Interactions

4.联动Drivers

事件

事件触发器是用于不同画板之间的转场，有点击、长按、滚动开始、滚动释放、滚动结束、拖拽开始结束、按下、抬起、鼠标划入画出、自动几种形式。

动画

当触发事件发生时 (必须是两个画板图层之间)，Principle会自动创建两个画布之间都用的图层之间的逐帧的补间动画，逐帧的实现属性间的变化。时间轴面板可以调节属性的快慢、错帧等。(点击画板上方的箭头可以调出动画面板)

连续的交互

是指单个画板内的三种交互形式，拖拽(drag)、滚动(scroll)、翻页(pages)，可用范围都有X轴、Y轴选择

联动

联动是在一个类似时间轴(是以距离为计量单位的轴，和时间轴以时间为计量单位类似)上面用关键帧来链接不同的图层之间的属性变化，可以联动控制角度、透明度、倒角、长、宽、位置、边、阴影等

联动必须需要联动源，连续的交互里面的三种交互形式作为联动源，才可以触发联动

有什么技巧吗?

  1. 从Sketch导入的图层如果是用了Mask是会被合并成位图的，可以用群组的方式解决

  2. 复用的组件可以在图层后面加 * ，这样导入到Principle里面会自动转为位图

    

3. 导入到Principle时选择的x1、x2、x3做动画的时候没有影响，但是在手机里面预览如果倍率不对会出现模糊

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

5. 添加触发事件时(闪电标志，然后拖出的箭头)，指向自己所在的Artboard，将快速复制一个自己所在的Artboard

6. 按住Command，出现旋转标志就可以旋转图层

7. 调节左侧面变的属性的时候，下面的输入框可以拖动改变数值

8. 联动和动画的区别是，一个调节位置然后属性变化，一个是调节时间的先后顺序以及快慢，以及动画曲线

9. 联动调节的时候，时间轴一定要复原，不然预览的时候回出错

10. 输出的动画可以放在ps里面加到UI样机输出预览图

有些什么学习资源？

1. 中文版Principle学习文档 、

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

2. Dribbble 上面的案例

https://dribbble.com/search?q=Principle

3.官方模板库

http://principletemplates.com/

4.源文件资源包(超过200个源文件)

链接：https://pan.baidu.com/s/1URh7qV9xW7AHWA_7cVseEw

密码：464n

5. B站视频教学

https://search.bilibili.com/all?keyword=Principle&from_source=banner_search

学习还需要什么工具条件？

1.最好安装Sketch，并尽可能的了解，因为Principle直接导入Sketch素材，甚至可以直接粘贴复制

2. Mac系统的Preview，可以将Gif分拆成每帧页面，这样学习别人动画的时候可以用到，细致到每一帧，才能体会动画的精妙。Dribbble上很多大人甚至会花半天来调整动画。Windows系统推荐使用 爱奇艺的图片查看器，也可以分拆

3. 需要Mac系统的机子，或者系统(黑苹果，可以在win下用虚拟机安装，或者直接安装(有需要的同学可以私信))

4. 没有软件的同学可以到 xclient.info 这个网站很多好软件下载。

下期通过分拆步骤讲解如何用Principle做下面这个动画

附件包含 Sketch文件以及Principle源文件，可下载研究，谢谢！