Principle是一款非常好用的平面交互动画设计工具。Principle汉化版工具小巧，功能强大，界面简介，操作简单。通过Principle官方版，用户5分钟即可做出一个具有完整交互动画的原型，非常实用！
展示你的设计从未与记录功能简单：出口视频或动画GIF，可以共享在Dribbble，推特，和其他任何你想！
为OS X构建的
原理是由核心动画驱动的，硬件加速的动画引擎是IOS和OS X建立的.它还包括Mac功能你喜欢：全屏模式，视网膜接口，自动保存－所以你会觉得在家里.
分享您的设计
iOS的原理镜像让其他人在他们的设备上查看你的设计.在设计时，可以通过将设备插入计算机立即进行交互.您还可以导出一个独立的Mac应用程序，供其他人查看.
Web、桌面和莫比尔的设计
选择装置设定或输入自定义画板大小为你最喜欢的平台设计.悬停事件和鼠标滚轮滚动使Web和桌面原型更容易成为真正的东西.
此外 Principle 还支持多种尺寸的原型设计，包括 Apple Watch.
如果你临时有一个动画交互想法，比如设计更好的移动APP交互效果成为现实，用Principle可以帮你轻松实现.
Principle的原则使得它易于创建动画和交互式的用户界面设计.
Principle相比pixate更易上手，界面类似Sketch等做图软件，思路有点像用 keynote，更加的可视化.
了解如何使用页面滚动来在设计屏幕之间滑动，并使用驱动程序生成位置指示器.该视频也有提示使用预览窗口和键盘快捷键，使录制更容易.
介绍司机
了解如何使用原理的驱动程序功能，使一个层在拖动过程中旋转.
使用图像
原则上使用图像的最佳实践，包括导入、视网膜资产、从草图拖拽、更新多层资产和裁剪.
看警报
使用长按和自动事件，使苹果手表报警互动
您可以通过选择“原则”菜单并单击“检查更新”来更新原则.如果检查更新是灰色的，更新已经下载并重新安装它的原理.如果您的许可证在最新版本的原则发布之前购买了一年以上，则可以购买新的许可证以使用最新版本.
出口
一旦你创造了完美的互动，你就想向世界展示.有几种方法可以做到这一点.
视频和动画GIF
要导出设计的视频或动画GIF，请单击预览窗口右上方的相机图标.您可以选择使用圆形触摸光标、箭头光标，或者将光标隐藏在记录中.在为光标选择一个选项之后，原则开始预览窗口的屏幕记录.当图标开始闪烁时，录制开始，您可以开始与您的设计交互（可能需要一段时间才能开始录制）.完成录制设计后，再次单击相机图标以停止录制.
视频导出目前不支持音频，所以如果您的设计利用声音，它将不会出现在录制的视频中.
GIF设置
导出GIF时，可以选择下拉列表中的预置或以这种格式输入设置，从而选择自定义导出大小：45％
任何跟着百分之一个符号的数字都会输出一个GIF，它是你记录下来的缩小版，输出将按你输入的百分比来缩放.如果指定百分之一，则将忽略宽度和高度值.
连续的相互作用
原则上有三种常见的交互：拖拽、滚动和页面滚动.可以在层的垂直和水平轴上独立启用这些功能.
拖动
当你想让图层的位置在触摸屏上移动时，允许在图层上拖动.
滚动
可以在组层上滚动.当手指被拖动到滚动层时，子层将用手指移动，但组本身不会改变位置.映射、消息线程或任何大内容都是滚动的好候选者.如果你打开滚动一层上没有任何控制，原理将自动为你创建一个滚动窗口组，多好.打开“夹层”在滚动层隐藏层的孩子当他们滚动外组.
分页
分页就像滚动，但它在滚动结束时自动将其滚动位置锁定为组大小的增量.使用图像传送带分页，带图标的主屏幕，那些卡的UI是如此受欢迎，现在.如果您希望在页面之间添加填充，请使分页组稍微大于一个元素，并将元素空间分隔开.
事件
事件触发转换之间的画板.添加一个事件，在画布中选择一个层，点击闪电按钮似乎是正确的，然后拖拽一个圆圈到目的图板.过渡的箭将被添加到画布上，从源到目的点画板画板.
Step3 更改系统设置
接下来的一步，稍微需要些技巧.在MAC下安装一些软件时提示”来自身份不明开发者”或者“已损坏”，其实这是MAC新系统启用了新的安全机制.默认只信任 Mac App Store 下载的软件和拥有开发者 ID 签名的应用程序.换句话说就是 MAC 系统默认只能安装靠谱渠道（有苹果审核的 Mac App Store）下载的软件或被认可的人开发的软件.
你可能会看到如下图两种提示.
提示一“身份不明的开发者”
此时，更改一下电脑配置就可以.打开系统偏好设置中的安全与隐私.
解锁底部的锁，然后把“允许从以下位置下载的应用程序”中选项改为“任何来源”.
Principle即可流畅运行.
提示二“已损坏”
这是你打开安全与隐私发现没有“任何来源”这一选项（macOS Sierra 10.12以上）.不用担心，需要进行些配置.
打开终端（在Lauchpad中可以搜索到），输入sudo spctl –master－disable按回车（Enter）.此时，终端会要求输入你MAC电脑的设备密码，输入密码即可（密码不会明文显示出来，不用怀疑自己输没输上）.
这个时候，重新打开“安全与隐私”就有“任何来源”的选项了.勾选即可.
再次打开Principle，就可以流畅运行了.
软件打开后，有一个300＊300的Artboard在界面中，使用过Illustrator和Sketch的人应该理解。这是一个画板的概念，我们设计的各种元素都应该在这个画板上。工具栏也没几个按键，刚一开始的话，不容易被理解。即使对于有AE基础的人来说，开始也要先了解Principle的动画制作逻辑的。我们一步一步地讲并配以截图，第一节讲得详细一点，力求打好基础～
初次打开Principle
第一步
选中某元素，在界面的左侧是该元素的属性栏。首先把Artboard的大小设成常规的手机屏幕大小“750＊1334”。接着，我们点击左上角的“Rectangle”，页面中会新建一个方块，我们再点一下“Text”，然后屏幕中又出现一个方块和两个单词。
第二步
在左侧属性栏可以修改方块大小（当然也可以拉方块边缘改变方块大小）。鼠标选中文字，左侧边栏可以修改文字的属性，双击文字可以修改文字内容。如下图：
属性栏↓
第三步
现在来到了我们关键的一步：怎么出现动画效果。
选中Artboard1，它周围出现绿色的框，右侧出现一个？？闪电图标，这个就是动作触发的条件编辑入口。
我们点击这个闪电，出现一个菜单，这些就是动作触发的条件们。
后面会对这个动作触发条件做详细的讲解。
重点来了！我们选中“Tap”并拖动，发现一个蓝色的箭头，将箭头指向Artboard1并松开鼠标。然后如图，工作区又新增了一个画板，自动命名为Artboard2：
然后，我们将Artboard2上的toast（方块和文字）向下拖动一段距离，使其和Artboard1上的toast有位置变化，如图 ：
这个时候，我们的设计就会动了！
查看动画方法：鼠标选回第一个画板，右侧的动效预览窗口会回到初始状态，在预览窗口中，鼠标点击一下（即我们刚刚选择的Tap触发条件），就看到toast动起来了。动效如下：
我们也可以数据线接到手机上，打开装的Principle mirror查看动效。
通过上面这个toast的动效例子，我们可以理解Principle的动画原理。如图：
其中1，2，3步我们已经做到了，第4步并不是必须的。下一节我们会针对动画的形成逻辑有更深入的讲解。
1. Sketch文件的导入
首先，先把要把画好的Sketch文件打开；
再打开Principle，点File – Import From Sketch ，这里会直接显示你刚打开的Sketch文件名.
根据你的Sketch文件的大小选择 放大的倍数（例如：如果你画的是375＊667的就选择2X，750的就选择1X）不选也可以，但是可能导出的画质不清晰.
这样就导入成功了，会了这个功能就可以将之前设计的sketch文件做动画了，Sketch强大的绘图功能 Principle的动画制作，完美！
2. 补间动画逻辑
谈到补间动画我们要先说逐帧动画，逐帧动画是最原始的动画，就是很多连续的图片排成序列，一张一张的播放，形成的“动画”效果.
补间动画是逐帧动画的升级版，不需要我们准备大量的图片形成的图片序列，只要做一些关键画面（一般被叫做关键帧）即可，系统识别关键帧之间的差异，帮助我们补齐关键帧之间的画面，形成动画.
Principle的动画制作逻辑是：每个画板就是关键帧
举例：
左图画板1即关键帧1，右图画板2即关键帧2，关键帧1中的方块在左边，关键帧2的方块在右边，我们添加补间动画的话，按照补间动画的逻辑，系统应该补足方块从左到右移动的所有的画面.
添加补间的方法：点击画板1旁边的闪电按钮，选择触发条件Tap拖到画板2上，补间动画就做好了.如下：
最简单的补间动画就完成了.
所以我们暂且把Principle的画板理解成关键帧.
透明度动画
我们接着上次的Toast动画做，我们把文字和底色框选，按command G成组，调节这个组的Opacity（透明度）属性到“0％”，如图：
ok啦！我们原本的移动吐司效果增加了透明度动画效果，动画如下：
是不是很像现在主流toast的感觉了？～
【案例】淘宝Toast
下面我们来模仿淘宝的成功加入购物车的Toast做一个动画，来强化一下我们学的知识.
淘宝原本效果如下：
首先分析一下动画中构成的元素，界面中一共有4层，从上至下依次
Toast
购物车选择栏
黑色半透明遮罩
内容层
以上的东西我们应该在Sketch中预先画好的（文末会附上源文件链接）.
动画分解
1.初始状态，内容层在最下面一直不动，上面盖着黑色的遮罩，再上面是购物车选择栏；
2.动画开始，购物车选择栏下移至底部消失，黑色半透明遮罩层透明度变成0，Toast出现；
3.接着，Toast停留1秒钟后缩小；
4.最后Toast透明度将为0.
下面我们来实现这个动画
首先把Sketch文件导入Principle.
然后把内容层，遮罩，选择栏，依次叠放如图：
第二步
接下来我们来完成上文提到的：
“购物车选择栏下移至底部消失”
垂直移动画板2的最顶层“选择栏”至画板2外，如图：
然后将黑色遮罩的透明度降低到0，如图：
做到这一步我们就可以看到一半的动画已经完成了.
1但是这里的速度比较快，我们来学习下一个知识点，时间轴的调节.
时间轴在哪里呢？我们选中红框示意的那条线，屏幕下方就会出现一个时间轴.
我们拖动时间轴上的两个蓝色的柱子，可以调节动作什么时候开始，什么时候结束.蓝色柱子前的菱形就是动画启动的时间，尾部的菱形就是结束的时间，两个菱形可以单独调节.
然后按照我动画分解中题要的步骤一步一步做，加工一下Toast层，缩放的动作修改的是它的scale属性.
这是最后的版面.
动画效果如下
1. Principle中对象的四个交互属性
物件的交互属性，包括4个状态，横轴纵轴都可以调节.如图：
Static（静止的，静态的）：这个是所有物件的默认状态，这个物件是不能被移动的.
Drag（拖动）：例如做悬浮窗
Scroll（滚动）：我们看到的大部分页面都是Scroll组件，例如瀑布流的页面，有了scroll才有了我们“刷”手机的的动作.
Page（翻页）：这个概念不是很好理解，暂且理解成翻页吧，有了这个交互的概念，我们可以容易的做到下面的效果：
2. Principle动画触发条件
讲在前面，点击事件的逻辑分析，我们在PC上使用鼠标时，鼠标的一个点击会被分解成多个动作，
①鼠标按下
②鼠标抬起，
这样完成了一次鼠标点击的动作，除此之外还有
③鼠标移动，
④在3Dtouch中还有用力按压，增加了压力感应；
鼠标悬浮在某物体上方，（移动端不存在）
鼠标移出某物体上方，（移动端不存在）
以上，多个动作的组合就形成了多种交互方式，也就是我们要学习的动画触发条件.
Principle将所有的动画触发条件都集合到了？？闪电按钮中：
Principle的强大也表现在这里，这样的设计可以让系统做到：用户在同一个控件上执行不同的操作后，出现不同的动画效果或跳转到不同的页面.
下面我们来讲解一下每个按钮的意思，字面可以理解的我就不解释了.
1. Tap（点击）：①鼠标按下；②鼠标抬起；
2. Long Press（长按）：交互代码：① ① ② ？？能理解把
3. Scroll Begin（滚动开始）：①按下；③移动；
4. Scroll Release（滚动释放）：③移动；②抬起；
5. Scroll End（滚动结束）：这里要区别一下4.滚动释放，这个滚动是物件滚动完毕，不是操作的结束，例如我们快速滚动一个页面，松手后，页面还会继续滑动，页面结束后才会触发的事件.
6. Drag Begin（开始拖拽）：①按下 ③移动，这个跟3.滚动开始是一个交互动作，区别就在于交互动作施加的对象上了.对象是Drag属性就适用Drag，是Scroll就是Scroll.
7. Drag End（拖拽结束）：③移动 ②抬起.同样区别于4.滚动释放
8. Touch Down（按下）：①按下，使用场景：例如按下某个按钮后，按钮的样式变成被按下样式.
9. Touch Up（抬起）：③抬起，使用场景同上，按钮按下后松手，显示一个回弹样式.
10. Hover Inside（鼠标在某图层内）
11. Hover Outside（鼠标在某图层外）
个人觉得上面两个触发条件并不适用移动端的交互，应用的时候大家也可以使用
12. Auto（自动）：这个命令相当于在某个物件（图层）上写了自动执行的脚本，配合时间轴的使用，可以完成倒计时类的功能，是一个常用的触发条件.
3. 动画的分解
我们平时看到的绝大部分动画都是可以分解成一系列简单动画的.
动作包括：
出现
消失
位移（priciple只有两个轴，要三维动画的同学可以借助一些阴影变化去完成自己的创意）
旋转（只有两个轴，要实现三维的旋转很难，可以借助变形效果来实现，但是很难像AE那样天生就带三轴那么容易操作）
变形
缩放
透明度变化
阴影变化
具体实现以上动作我们可以调节以下的参数来完成那些关键动作.
这里补充一下，Principle的补间动画是基于图层名称一样的条件下，两个画板间在跳转时，只有同样名称的图层才会实现补间动画！
A画板向B画板跳转时，A画板中独有的图层会做消失动作，B画板中独有的图层会做出现动作，并且都是瞬时动作.
分享到这里，掌握之前所有的知识点，我们其实可以完成我们所有想要的效果了
模仿实践
今天我们模仿一下饿了么的下拉刷新动画，相信大家对这个动画十分熟悉.
先说一下这个饿了么的动画并不是Principle做的，这个动画是有交互的.我们主要是模仿一下这个效果.巩固一下我们之前学的基础知识.
首先，我们Sketch里先画一个盒子，导入到Principle.
开盖子动作制作
当我们下拉时，动作是两个盖子旋转打开.
我们先处理这个旋转动作，分析一下，盖子看成一个矩形，旋转的基点是盒子的左右上角，并不是矩形的中心.这里要怎么处理呢？
我们来抽象一下问题：
如何让一个物体旋转的时候旋转中心不在自己的中心？
大家可以考虑15秒，然后再接着看下文，自己想出来最好啦.？？
我的方法：我这里采用的是添加辅助矩形的方式实现的，我们先处理一侧，把盖子复制一个出来，把两个盖子（杆子）对接起来成组，其中一个透明度改成0，那么还是一个盖子，然后在这个组上加动画.（解决方法不唯一）下图是处理后的盖子组：
两边添加旋转动画后的效果：
蹦食物动作制作：
动作分解：食物首先叠在盒子的背后，然后进行抛物线的动画，先上升然后下降，食物下降过程中渐隐.
这里面的抛物线的运动速率要符合物理逻辑，
食物的起点
首先上抛的起点速度最大，然后
垂直方向［Y轴］上做匀减速运动，
水平方向［X轴］上做匀速运动，直至到达顶点；
最高点
到达顶点的时候
［Y轴］上的速度为0，然后［Y轴］上做匀加速运动，反向运动；
［X轴］速度仍然匀速；
曲线运动实现说明：其实曲线在principle中是比较难做的，我们只能设置起点和终点，然后在调节两个坐标轴上的速度曲线去调节出想要的路径.
我们在水果到达抛物线最高点的时候做一个关键帧，这样可以处理水果曲线的运动.
下图是水果冲盒子内到达最高点的运动曲线
↑匀速运动
↑减速运动
后面的操作我就不详述了，都是重复的.重在理解，有不理解的地方大家可以公众号里留言.看下面的抛物完整动作：
最后加餐：
想做好微动画，短暂的1－2秒中让人留下好的印象是很难的.
首先：创意好，动画的内容要符合要表现的主旨，不能仅仅博人一笑，动画的表现要与产品形象相统一.
其次：趣味性，要有点意思，让人家记住你的动画
最后：韵律，动作要优美，不能太生硬，就是动画细节上的处理，动画运动的速度要处理的符合客观规律，重点是运动的加速／减速的控制，就是我们这节课的重点.
做动效有以下显而易见的优势和使用场景：
【检测】验证想法效果和可行性:"原来我设想的效果行不通/行得通！"
【沟通】说服相关方采用/放弃某方案:"这样做真的合适/不合适，老板您请看这个Demo"
【直观】提供开发/测试同事参考:"我们想要的效果是这样的"
Principle是什么？
Principle是由Apple前设计工程师DanielHooper开发的动效制作软件，具有轻便，高效和学习曲线平缓等众多优点，一面世便广受设计师好评。
（一款真正由设计师开发，而非工程师开发的设计软件；让广大设计师们感受到了设计同行的善意…咳，『快速上手做动效』的魅力）
业内比拟：如果说sketch是简洁版的PS，那Principle就是简洁版的AE
为什么用Principle做动效？
一个字：快
目前市面上已经有各种原型制作软件和动效制作软件，AE,Framer.js,Form,Oragami,Flinto等等，从每个软件的产出作品来看，似乎每一个都能生成各种拟真的原型。
选择颜色的快捷方式？U Ctrl ＋ C
单击记录允许您隐藏光标，或使用箭头光标
Gif 现在小得多
文件 ＞ 导出查看器？U 修正了一个错误，阻止互动
更新的动画 UI 为冷冻属性6 y＇ P0 U＊ j＂ I（ B 七度苹果电脑软件
新预设为 iPad pro，的电视、 桌面
如果记录将小于设计，添加警报
改进的层分配算法
事件箭头无关当前美工板上将显示为灰色
允许按 tab 键之间曲线弹出向文本框
修复 bug 阻止预览之后删除事件或驱动程序更新
改进的内存在拖动过程中处理
修正了当到 iOS 镜像时触发5 m
【软件介绍】
principle破解版是一款可以帮助你设计APP或者手机原型的工具，本软件在开发的时候，结合动画设计以及平面设计技术，让您在开发原型的过程中可以得到一个更加有效的界面开发效果，内置图形设计、画板、矩形、文本、字体等编辑工具，你可以根据自己的想法将视频、音频、图像加载到创建的界面，对于设计动画原型以及应用程序来说是非常有效的；principle汉化版可以设计的类型非常丰富，支持分页、滚动、拖动、触摸，让您在开发iOS、Mac软件的时候更加方便！【软件功能】
灯.相机.相互作用.展示你的设计从未与记录功能简单：出口视频或动画GIF，可以共享在Dribbble，推特，和其他任何你想！
为OS X构建的
原理是由核心动画驱动的，硬件加速的动画引擎是IOS和OS X建立的.它还包括Mac功能你喜欢：全屏模式，视网膜接口，自动保存－所以你会觉得在家里.
分享您的设计
iOS的原理镜像让其他人在他们的设备上查看你的设计.在设计时，可以通过将设备插入计算机立即进行交互.您还可以导出一个独立的Mac应用程序，供其他人查看.
Web、桌面和莫比尔的设计
选择装置设定或输入自定义画板大小为你最喜欢的平台设计.悬停事件和鼠标滚轮滚动使Web和桌面原型更容易成为真正的东西.
【软件特色】
Principle可以将交互动画生成视频或者Gif分享到Dribbble、Twitter 等社交平台.此外 Principle 还支持多种尺寸的原型设计，包括 Apple Watch.
如果你临时有一个动画交互想法，比如设计更好的移动APP交互效果成为现实，用Principle可以帮你轻松实现.
Principle的原则使得它易于创建动画和交互式的用户界面设计.
Principle相比pixate更易上手，界面类似Sketch等做图软件，思路有点像用 keynote，更加的可视化.
【使用方法】
页面滚动了解如何使用页面滚动来在设计屏幕之间滑动，并使用驱动程序生成位置指示器.该视频也有提示使用预览窗口和键盘快捷键，使录制更容易.
介绍司机
了解如何使用原理的驱动程序功能，使一个层在拖动过程中旋转.
使用图像
原则上使用图像的最佳实践，包括导入、视网膜资产、从草图拖拽、更新多层资产和裁剪.
看警报
使用长按和自动事件，使苹果手表报警互动
您可以通过选择“原则”菜单并单击“检查更新”来更新原则.如果检查更新是灰色的，更新已经下载并重新安装它的原理.如果您的许可证在最新版本的原则发布之前购买了一年以上，则可以购买新的许可证以使用最新版本.
出口
一旦你创造了完美的互动，你就想向世界展示.有几种方法可以做到这一点.
视频和动画GIF
要导出设计的视频或动画GIF，请单击预览窗口右上方的相机图标.您可以选择使用圆形触摸光标、箭头光标，或者将光标隐藏在记录中.在为光标选择一个选项之后，原则开始预览窗口的屏幕记录.当图标开始闪烁时，录制开始，您可以开始与您的设计交互（可能需要一段时间才能开始录制）.完成录制设计后，再次单击相机图标以停止录制.
视频导出目前不支持音频，所以如果您的设计利用声音，它将不会出现在录制的视频中.
GIF设置
导出GIF时，可以选择下拉列表中的预置或以这种格式输入设置，从而选择自定义导出大小：45％
任何跟着百分之一个符号的数字都会输出一个GIF，它是你记录下来的缩小版，输出将按你输入的百分比来缩放.如果指定百分之一，则将忽略宽度和高度值.
连续的相互作用
原则上有三种常见的交互：拖拽、滚动和页面滚动.可以在层的垂直和水平轴上独立启用这些功能.
拖动
当你想让图层的位置在触摸屏上移动时，允许在图层上拖动.
滚动
可以在组层上滚动.当手指被拖动到滚动层时，子层将用手指移动，但组本身不会改变位置.映射、消息线程或任何大内容都是滚动的好候选者.如果你打开滚动一层上没有任何控制，原理将自动为你创建一个滚动窗口组，多好.打开“夹层”在滚动层隐藏层的孩子当他们滚动外组.
分页
分页就像滚动，但它在滚动结束时自动将其滚动位置锁定为组大小的增量.使用图像传送带分页，带图标的主屏幕，那些卡的UI是如此受欢迎，现在.如果您希望在页面之间添加填充，请使分页组稍微大于一个元素，并将元素空间分隔开.
事件
事件触发转换之间的画板.添加一个事件，在画布中选择一个层，点击闪电按钮似乎是正确的，然后拖拽一个圆圈到目的图板.过渡的箭将被添加到画布上，从源到目的点画板画板.
【安装教程】
双击安装，打开密码是xclient.info.Step3 更改系统设置
接下来的一步，稍微需要些技巧.在MAC下安装一些软件时提示”来自身份不明开发者”或者“已损坏”，其实这是MAC新系统启用了新的安全机制.默认只信任 Mac App Store 下载的软件和拥有开发者 ID 签名的应用程序.换句话说就是 MAC 系统默认只能安装靠谱渠道（有苹果审核的 Mac App Store）下载的软件或被认可的人开发的软件.
你可能会看到如下图两种提示.
提示一“身份不明的开发者”
此时，更改一下电脑配置就可以.打开系统偏好设置中的安全与隐私.
解锁底部的锁，然后把“允许从以下位置下载的应用程序”中选项改为“任何来源”.
Principle即可流畅运行.
提示二“已损坏”
这是你打开安全与隐私发现没有“任何来源”这一选项（macOS Sierra 10.12以上）.不用担心，需要进行些配置.
打开终端（在Lauchpad中可以搜索到），输入sudo spctl –master－disable按回车（Enter）.此时，终端会要求输入你MAC电脑的设备密码，输入密码即可（密码不会明文显示出来，不用怀疑自己输没输上）.
这个时候，重新打开“安全与隐私”就有“任何来源”的选项了.勾选即可.
再次打开Principle，就可以流畅运行了.
【使用教程】
principle从入门到精通
使用principle制作简单的Toast动画软件打开后，有一个300＊300的Artboard在界面中，使用过Illustrator和Sketch的人应该理解。这是一个画板的概念，我们设计的各种元素都应该在这个画板上。工具栏也没几个按键，刚一开始的话，不容易被理解。即使对于有AE基础的人来说，开始也要先了解Principle的动画制作逻辑的。我们一步一步地讲并配以截图，第一节讲得详细一点，力求打好基础～
初次打开Principle
第一步
选中某元素，在界面的左侧是该元素的属性栏。首先把Artboard的大小设成常规的手机屏幕大小“750＊1334”。接着，我们点击左上角的“Rectangle”，页面中会新建一个方块，我们再点一下“Text”，然后屏幕中又出现一个方块和两个单词。
第二步
在左侧属性栏可以修改方块大小（当然也可以拉方块边缘改变方块大小）。鼠标选中文字，左侧边栏可以修改文字的属性，双击文字可以修改文字内容。如下图：
属性栏↓
第三步
现在来到了我们关键的一步：怎么出现动画效果。
选中Artboard1，它周围出现绿色的框，右侧出现一个？？闪电图标，这个就是动作触发的条件编辑入口。
我们点击这个闪电，出现一个菜单，这些就是动作触发的条件们。
后面会对这个动作触发条件做详细的讲解。
重点来了！我们选中“Tap”并拖动，发现一个蓝色的箭头，将箭头指向Artboard1并松开鼠标。然后如图，工作区又新增了一个画板，自动命名为Artboard2：
然后，我们将Artboard2上的toast（方块和文字）向下拖动一段距离，使其和Artboard1上的toast有位置变化，如图 ：
这个时候，我们的设计就会动了！
查看动画方法：鼠标选回第一个画板，右侧的动效预览窗口会回到初始状态，在预览窗口中，鼠标点击一下（即我们刚刚选择的Tap触发条件），就看到toast动起来了。动效如下：
我们也可以数据线接到手机上，打开装的Principle mirror查看动效。
通过上面这个toast的动效例子，我们可以理解Principle的动画原理。如图：
其中1，2，3步我们已经做到了，第4步并不是必须的。下一节我们会针对动画的形成逻辑有更深入的讲解。
1. Sketch文件的导入
首先，先把要把画好的Sketch文件打开；
再打开Principle，点File – Import From Sketch ，这里会直接显示你刚打开的Sketch文件名.
根据你的Sketch文件的大小选择 放大的倍数（例如：如果你画的是375＊667的就选择2X，750的就选择1X）不选也可以，但是可能导出的画质不清晰.
这样就导入成功了，会了这个功能就可以将之前设计的sketch文件做动画了，Sketch强大的绘图功能 Principle的动画制作，完美！
2. 补间动画逻辑
谈到补间动画我们要先说逐帧动画，逐帧动画是最原始的动画，就是很多连续的图片排成序列，一张一张的播放，形成的“动画”效果.
补间动画是逐帧动画的升级版，不需要我们准备大量的图片形成的图片序列，只要做一些关键画面（一般被叫做关键帧）即可，系统识别关键帧之间的差异，帮助我们补齐关键帧之间的画面，形成动画.
Principle的动画制作逻辑是：每个画板就是关键帧
举例：
左图画板1即关键帧1，右图画板2即关键帧2，关键帧1中的方块在左边，关键帧2的方块在右边，我们添加补间动画的话，按照补间动画的逻辑，系统应该补足方块从左到右移动的所有的画面.
添加补间的方法：点击画板1旁边的闪电按钮，选择触发条件Tap拖到画板2上，补间动画就做好了.如下：
最简单的补间动画就完成了.
所以我们暂且把Principle的画板理解成关键帧.
透明度动画
我们接着上次的Toast动画做，我们把文字和底色框选，按command G成组，调节这个组的Opacity（透明度）属性到“0％”，如图：
ok啦！我们原本的移动吐司效果增加了透明度动画效果，动画如下：
是不是很像现在主流toast的感觉了？～
【案例】淘宝Toast
下面我们来模仿淘宝的成功加入购物车的Toast做一个动画，来强化一下我们学的知识.
淘宝原本效果如下：
首先分析一下动画中构成的元素，界面中一共有4层，从上至下依次
Toast
购物车选择栏
黑色半透明遮罩
内容层
以上的东西我们应该在Sketch中预先画好的（文末会附上源文件链接）.
动画分解
1.初始状态，内容层在最下面一直不动，上面盖着黑色的遮罩，再上面是购物车选择栏；
2.动画开始，购物车选择栏下移至底部消失，黑色半透明遮罩层透明度变成0，Toast出现；
3.接着，Toast停留1秒钟后缩小；
4.最后Toast透明度将为0.
下面我们来实现这个动画
首先把Sketch文件导入Principle.
然后把内容层，遮罩，选择栏，依次叠放如图：
第二步
接下来我们来完成上文提到的：
“购物车选择栏下移至底部消失”
垂直移动画板2的最顶层“选择栏”至画板2外，如图：
然后将黑色遮罩的透明度降低到0，如图：
做到这一步我们就可以看到一半的动画已经完成了.
1但是这里的速度比较快，我们来学习下一个知识点，时间轴的调节.
时间轴在哪里呢？我们选中红框示意的那条线，屏幕下方就会出现一个时间轴.
我们拖动时间轴上的两个蓝色的柱子，可以调节动作什么时候开始，什么时候结束.蓝色柱子前的菱形就是动画启动的时间，尾部的菱形就是结束的时间，两个菱形可以单独调节.
然后按照我动画分解中题要的步骤一步一步做，加工一下Toast层，缩放的动作修改的是它的scale属性.
这是最后的版面.
动画效果如下
1. Principle中对象的四个交互属性
物件的交互属性，包括4个状态，横轴纵轴都可以调节.如图：
Static（静止的，静态的）：这个是所有物件的默认状态，这个物件是不能被移动的.
Drag（拖动）：例如做悬浮窗
Scroll（滚动）：我们看到的大部分页面都是Scroll组件，例如瀑布流的页面，有了scroll才有了我们“刷”手机的的动作.
Page（翻页）：这个概念不是很好理解，暂且理解成翻页吧，有了这个交互的概念，我们可以容易的做到下面的效果：
2. Principle动画触发条件
讲在前面，点击事件的逻辑分析，我们在PC上使用鼠标时，鼠标的一个点击会被分解成多个动作，
①鼠标按下
②鼠标抬起，
这样完成了一次鼠标点击的动作，除此之外还有
③鼠标移动，
④在3Dtouch中还有用力按压，增加了压力感应；
鼠标悬浮在某物体上方，（移动端不存在）
鼠标移出某物体上方，（移动端不存在）
以上，多个动作的组合就形成了多种交互方式，也就是我们要学习的动画触发条件.
Principle将所有的动画触发条件都集合到了？？闪电按钮中：
Principle的强大也表现在这里，这样的设计可以让系统做到：用户在同一个控件上执行不同的操作后，出现不同的动画效果或跳转到不同的页面.
下面我们来讲解一下每个按钮的意思，字面可以理解的我就不解释了.
1. Tap（点击）：①鼠标按下；②鼠标抬起；
2. Long Press（长按）：交互代码：① ① ② ？？能理解把
3. Scroll Begin（滚动开始）：①按下；③移动；
4. Scroll Release（滚动释放）：③移动；②抬起；
5. Scroll End（滚动结束）：这里要区别一下4.滚动释放，这个滚动是物件滚动完毕，不是操作的结束，例如我们快速滚动一个页面，松手后，页面还会继续滑动，页面结束后才会触发的事件.
6. Drag Begin（开始拖拽）：①按下 ③移动，这个跟3.滚动开始是一个交互动作，区别就在于交互动作施加的对象上了.对象是Drag属性就适用Drag，是Scroll就是Scroll.
7. Drag End（拖拽结束）：③移动 ②抬起.同样区别于4.滚动释放
8. Touch Down（按下）：①按下，使用场景：例如按下某个按钮后，按钮的样式变成被按下样式.
9. Touch Up（抬起）：③抬起，使用场景同上，按钮按下后松手，显示一个回弹样式.
10. Hover Inside（鼠标在某图层内）
11. Hover Outside（鼠标在某图层外）
个人觉得上面两个触发条件并不适用移动端的交互，应用的时候大家也可以使用
12. Auto（自动）：这个命令相当于在某个物件（图层）上写了自动执行的脚本，配合时间轴的使用，可以完成倒计时类的功能，是一个常用的触发条件.
3. 动画的分解
我们平时看到的绝大部分动画都是可以分解成一系列简单动画的.
动作包括：
出现
消失
位移（priciple只有两个轴，要三维动画的同学可以借助一些阴影变化去完成自己的创意）
旋转（只有两个轴，要实现三维的旋转很难，可以借助变形效果来实现，但是很难像AE那样天生就带三轴那么容易操作）
变形
缩放
透明度变化
阴影变化
具体实现以上动作我们可以调节以下的参数来完成那些关键动作.
这里补充一下，Principle的补间动画是基于图层名称一样的条件下，两个画板间在跳转时，只有同样名称的图层才会实现补间动画！
A画板向B画板跳转时，A画板中独有的图层会做消失动作，B画板中独有的图层会做出现动作，并且都是瞬时动作.
分享到这里，掌握之前所有的知识点，我们其实可以完成我们所有想要的效果了
模仿实践
今天我们模仿一下饿了么的下拉刷新动画，相信大家对这个动画十分熟悉.
先说一下这个饿了么的动画并不是Principle做的，这个动画是有交互的.我们主要是模仿一下这个效果.巩固一下我们之前学的基础知识.
首先，我们Sketch里先画一个盒子，导入到Principle.
开盖子动作制作
当我们下拉时，动作是两个盖子旋转打开.
我们先处理这个旋转动作，分析一下，盖子看成一个矩形，旋转的基点是盒子的左右上角，并不是矩形的中心.这里要怎么处理呢？
我们来抽象一下问题：
如何让一个物体旋转的时候旋转中心不在自己的中心？
大家可以考虑15秒，然后再接着看下文，自己想出来最好啦.？？
我的方法：我这里采用的是添加辅助矩形的方式实现的，我们先处理一侧，把盖子复制一个出来，把两个盖子（杆子）对接起来成组，其中一个透明度改成0，那么还是一个盖子，然后在这个组上加动画.（解决方法不唯一）下图是处理后的盖子组：
两边添加旋转动画后的效果：
蹦食物动作制作：
动作分解：食物首先叠在盒子的背后，然后进行抛物线的动画，先上升然后下降，食物下降过程中渐隐.
这里面的抛物线的运动速率要符合物理逻辑，
食物的起点
首先上抛的起点速度最大，然后
垂直方向［Y轴］上做匀减速运动，
水平方向［X轴］上做匀速运动，直至到达顶点；
最高点
到达顶点的时候
［Y轴］上的速度为0，然后［Y轴］上做匀加速运动，反向运动；
［X轴］速度仍然匀速；
曲线运动实现说明：其实曲线在principle中是比较难做的，我们只能设置起点和终点，然后在调节两个坐标轴上的速度曲线去调节出想要的路径.
我们在水果到达抛物线最高点的时候做一个关键帧，这样可以处理水果曲线的运动.
下图是水果冲盒子内到达最高点的运动曲线
↑匀速运动
↑减速运动
后面的操作我就不详述了，都是重复的.重在理解，有不理解的地方大家可以公众号里留言.看下面的抛物完整动作：
最后加餐：
想做好微动画，短暂的1－2秒中让人留下好的印象是很难的.
首先：创意好，动画的内容要符合要表现的主旨，不能仅仅博人一笑，动画的表现要与产品形象相统一.
其次：趣味性，要有点意思，让人家记住你的动画
最后：韵律，动作要优美，不能太生硬，就是动画细节上的处理，动画运动的速度要处理的符合客观规律，重点是运动的加速／减速的控制，就是我们这节课的重点.
【常见问题】
为什么要做动效？做动效有以下显而易见的优势和使用场景：
【检测】验证想法效果和可行性:"原来我设想的效果行不通/行得通！"
【沟通】说服相关方采用/放弃某方案:"这样做真的合适/不合适，老板您请看这个Demo"
【直观】提供开发/测试同事参考:"我们想要的效果是这样的"
Principle是什么？
Principle是由Apple前设计工程师DanielHooper开发的动效制作软件，具有轻便，高效和学习曲线平缓等众多优点，一面世便广受设计师好评。
（一款真正由设计师开发，而非工程师开发的设计软件；让广大设计师们感受到了设计同行的善意…咳，『快速上手做动效』的魅力）
业内比拟：如果说sketch是简洁版的PS，那Principle就是简洁版的AE
为什么用Principle做动效？
一个字：快
目前市面上已经有各种原型制作软件和动效制作软件，AE,Framer.js,Form,Oragami,Flinto等等，从每个软件的产出作品来看，似乎每一个都能生成各种拟真的原型。
【更新日志】
新颜色选取器选择颜色的快捷方式？U Ctrl ＋ C
单击记录允许您隐藏光标，或使用箭头光标
Gif 现在小得多
文件 ＞ 导出查看器？U 修正了一个错误，阻止互动
更新的动画 UI 为冷冻属性6 y＇ P0 U＊ j＂ I（ B 七度苹果电脑软件
新预设为 iPad pro，的电视、 桌面
如果记录将小于设计，添加警报
改进的层分配算法
事件箭头无关当前美工板上将显示为灰色
允许按 tab 键之间曲线弹出向文本框
修复 bug 阻止预览之后删除事件或驱动程序更新
改进的内存在拖动过程中处理
修正了当到 iOS 镜像时触发5 m