动效设计Principle：动画介绍

Posted 2023-04-27

参考技术A 当两个画板之间的事件被成功触发时，Principle会为名称相同的图层自动补全过渡动画效果，这个点非常关键，如果制作成功后，看不到对应的动画效果，务必检查两个画板之间的图层名称是否相同。看下图中的例子，画板1和2的矩形图层名称相同，都是“Layer”，第二个矩形透明度设置为30%，目的是矩形触发事件时颜色变淡，我们拉一个点击事件，当点击事件触发时，Principle会自动为两者补全一个变淡过程的动画。

另外，这个默认的动画参数是可以被修改的，这里就会涉及到关键帧和动画曲线两个概念。

在动画中，一帧就是一幅停止的画面，连续播放帧就形成了动画，在Principle中，我们可以控制帧的播放时间，这就是所谓的关键帧。点击事件的带箭头直线，在工作区下方就会出现一个动画面板，右侧时间轴有一个蓝色的条，就是我们所说的关键帧，蓝色条左侧的菱形代表关键帧的开始时间，右侧的菱形代表关键帧的结束时间，系统默认的动画效果持续时间是0.3S，我们可以拉长关键帧的长度，来增加动画效果的持续时间。

另外，在时间轴上向右拖动关键帧，可以延迟动画发生的时间，左侧对应的Opacity（透明度）就是动画要实现的效果，点击雪花图标，可以冻结当前的动画效果，这个图标还是挺形象的。

当汽车从A点驾驶到B点时，司机可以选择平稳驾驶，也可以选择先加速后减速，也可以选择高速起步临近终点再慢下来，这个驾驶过程就好比动画曲线。在动画中，控制“驾驶”过程的背后，就是动画曲线在起作用。关键帧中间有一个“Default（默认）”的英文单词，点击它，就会出现一个包含所有动画曲线的弹层，Default默认被选中，拖动曲线的小蓝点，可以调整曲线的弧度，也可以在下方XY的输入框中输入参数，这些参数是需要给到前端实现的，我们后面会讲述。

每种动画曲线的效果都不同，简单的Default（默认）曲线，是一条平稳过渡的曲线；复杂的Springs（弹性）曲线，模拟了弹簧的震动和阻尼效果，还提供摩擦力系数的选项；Linear（直线）曲线是直线变化的效果，后面标记的表情也告诫我们不要用。

推荐阅读：

Principle中文手册： Principle中文手册（2019）

principle 怎么打开psd文件

《principle基础视频》百度网盘资源免费下载

链接:https://pan.baidu.com/s/1UXMkxRfjBW2KwC8LRlVu8A

提取码:8wqc
principle基础视频|资料|第04课·Principle交互综合实例|第03课·常用页面内动画（联动Drivers）|第02课·常用页面间动画|第01课·Principle初识及关键概念|课时2 - 基本操作流程展示.mp4|课时1 - Principle软件界面初识.mp4|课时6 - 组件动画（Component）.mp4|课时5 - 自动加载动画（Auto）.mp4|课时4 - 划入划出动画（Hover）.mp4|课时3 - 触摸动画（Touch）.mp4|课时2 - 3D 触控动画（Longpress）.mp4|课时1 - 标签切换动画（Tap）.mp4|课时3 - 连续交互拖拽（Drag）.mp4    

参考技术A 界面 Interface
绘图 Canvas
屏幕中心区域是绘图空间，绝大部分工作将会在这里完成。它包括所有画布和画布间的跳转关系。被选中的画布将会以绿色边框高亮显示。
预览 Preview
预览功能可以随时操作预览你的设计草稿，它默认锁定在屏幕右上。当然你可以拖拽预览窗口到软件窗口外解锁。点击关闭按钮即可重置预览窗口到工作区右上角。拖拽预览窗口四角可以改变窗口大小，窗口大于画布时，画布不会放大，但窗口小于画布时会等比缩小。
图层列表 Layer List
图层列表在软件的左下，它显示了全部画布、子图层、图层间的层级关系。在图层列表中拖拽图层可以可以成组或解组。拖拽画布排序即改变画布在屏幕中的显示位置顺序。点击眼睛可以切换隐藏显示图层以便编辑，但不影响在预览窗口中的可见性。
检查器 Inspector
工作区左侧，图层列表上方是检查器，在这显示了选中图层的各种属性，包括：对齐操作、X/Y坐标、长/宽、角度、缩放、透明度、圆角率、关联的图片、颜色填充、组合裁剪、水平/竖直操作。
动效视图 Animate View
点击顶部“Animate”工具按钮或点击画布间的跳转箭头即可打开动效视图。它通常用来调节切换动画的时间和动画曲线。
联动视图 Drivers View
点击顶部“Drivers”工具按钮打开动效视图。它通常用来创建逐帧的补间交互动画。
画图 Drawing
初见 Principle，可能会觉得它像一个绘图工具。基本元素可以在 Principle中绘制，复杂的图形可以通过图片形式导入。新图层会默认归入当前的画布中。
画布 Artboards
Principle 的画布和其他画图软件类似：每个画布相当于一个独立的页面。画布的尺寸可以设置成各种设备的大小或任意你喜欢的尺寸。多个画布可能代表同一个页面，页面间只有细微的差别。例如：设计播放器的播放和暂停状态使用两个画布，两个画布只有播放和暂停的按钮不同。
矩形 Rectangles
点击左上角“矩形”图标或使用快捷键“R”来画一个新的矩形。如果想画一个圆，只需把圆角率调成一个非常大的数值。把图片拖到检查器的图片区中可以给图形设置图片背景。新矩形默认尺寸为44x44像素，这是因为在iOS中至少44x44的区域才方便点击。
文本 Text
文本和矩形的属性参数类似，只多了字体、对齐方式、字体大小。字体和对齐方式两个属性不能动态变化。
Principle 中使用的字体可能在iOS设备中不存在，所以这可能导致在设备连接“镜像”时不显示文字。使用常规字体或安装所需字体来解决这个问题。
图片 Images
在 Finder 中可以拖拽图片到 Principle 里 ，也可以直接粘贴 PNG 和 JPEG 到 Principle 中。如果你是 Sketch 用户 ， 合并选区为一张 PNG 图片，粘贴到 Principle 即可。
当图片很多层级结构错综复杂时，会让人很烦恼。我们深知这一情况，正在着手解决。图片的长宽比默认是锁定的，你可以点击长/宽属性框中间的小锁头图标解锁。拖拽图片到一个矩形的图片容器中可以把图片变成一个矩形，点击图形容器并按DELETE键可以删除矩形的图片背景。
高分辨率图片
如果拖入的图片名以“@2x”或“@3x”结尾（例如[e-mail]、[e-mail]），那么导入的图片将会自动缩放为1/2和1/3大小。如果你已经导入了一个高分辨率的图片，也可以通过设置图片的长宽数值为1/2达到同样的效果。(进阶提示：检查器的属性输入框支持简单的数学运算，输入“320/2”可以方便的调节图片大小。)
从 Sketch 和其他软件中复制粘贴图片到 Princile 中默认是1倍大小。所以在导入 Principle 前，图片最好导出为高清分辨率来保证显示正常。
组合 Groups
组合在 Principle 里只是一个有确定填充的矩形图层。因此，组合将会有自己独立的位置和大小，不管是否小于子部件的边界。UIKit，Android，DOM 也是这样去绘图和运动的，如果你按使用 Photoshop 或 Sketch 的方式来使用图层可能会有意外情况发生。组合在制作更大的图层交互、旋转不同原点的图层、在每个图层的基础上实现连环动画是非常实用的。
裁剪/遮罩/剪辑 Cropping / Masking / Clipping
当你勾选“Clip Children”后，组合功能可以裁剪图层。如果想要圆形的遮罩，可以调节圆角率参数。
连续的交互 Continuous Interactions
Principle 内建了三种通用的交互：拖拽、滚动、翻页。并可以单独的只在图层的X轴或Y轴开启。
拖拽 Dragging
开启拖拽后就能用鼠标点击按住移动图层来改变位置。轮播图、悬浮窗、探探，都是典型的拖拽案例。
滚动 Scrolling
当一个图层有子图层时，可以开启滚动。当手指拖动滚动图层时，子图层会随手指移动，但父图层整体不会移动。地图、新闻列表、长文章都可以利用滚动实现。如果没有子图层时开启了滚动，那么系统会自动创建一个滚动图层组，很棒吧。打开“Clip children”选项后滚动到边界之外的部分会不可见。
翻页 Paging
翻页和滚动很像，只不过翻页可以每次滚动固定的距离，这个距离和组合的大小一致。翻页可以用于图片切换、手机主页的图标翻页、或者任何卡片式翻页设计，最近这种设计非常流行。如果你想在页面间添加内边距，让翻页组稍稍比你需要的大一些，留空页面内容的边距。
事件 Events
事件触发器用于在不同画布之间页面切换。点击图层或画布，你会在右侧发现“闪电”图标，点击图标会出现支持的事件列表。点击按住事件前面的空心圆，拖拽指针到想要跳转的画布就创建了页面跳转的一种交互。这时你会发现两个画布上面会出现一条箭头，从出发页面指向目标页面。
拖拽时如果指向当前的画布，会在右侧复制一份当前画布。值得注意的是如果把图层的透明度设置为0，那么这个图层就不能触发点击事件，是真的“透明”。
下面是事件的几个类型
点击 Tap
点击是最常见的事件，多数用于可点击的按钮。触发非常简单：按下，松开，发射！
拖拽开始 Drag Begin
当按住部件，开始移动时，就会触发这个事件。使用这个事件的前提是要打开部件的可移动属性(draggable)，如果在目标画布有同样名称的图层部件，不出意外完成拖拽事件后部件的位置就确定了。
拖拽结束 Drag End
拖拽图层部件之后松开鼠标会触发事件。同样在使用之前需要打开可移动属性。
滚动开始 Scrollhttp://www.yingtaow.com/sitemap.html?Begins
当一个部件图层开始滚动时触发事件。使用前需要打开可滚动属性。
滚动释放 Scroll Released
当部件图层滚动并抬起鼠标时触发事件。注：此时滚动可能还没停止，只是鼠标松开了。这个事件同时对滚动和翻页起作用。使用前需要打开可滚动属性。
滚动结束 Scroll Ended
当滚动完全停止时触发事件。这个事件同时对滚动和翻页起作用。由于必须完全停止后才触发事件，所以整个动画可能有很长时间的延迟等待动画完全结束。使用前需要打开可滚动属性。
按下 Touch Down
当鼠标按下时触发事件。可以用于制作按钮的按下效果。
释放 Touch Up
当鼠标抬起时触发事件。注：鼠标从外部按下，移入有事件的部件图层，这样是不能触发事件的。必须在带有事件的部件图层按下才可以触发事件。
长按 Long Press
按住0.5秒后触发事件。
自动跳转 Auto
当进入设置此属性的画布时，自动触发。多用于循环原型或复杂的多步骤动效。注意：只有当鼠标进入预览区域时才会触发事件。这一举措是为了节省电池寿命，和你的精神。
动画 Animation
当触发事件时，Principle 会自动创建两个画布之间的补间动画。
动画地图 Animation Mappings
如果一个图层部件在两个画布中名称一样，Principle 就认为这两个部件是同一个，继而根据这个部件的位移等属性变化创建补间动画。反之，如果在两个画布间没有图层部件名称相同，画布切换时部件就会突然消失或显示。
预设动画曲线 Custom Animations
动画的默认持续时间是 0.3秒，默认曲线是 iOS 和 OSX 中使用的曲线。在动画视图(Animate)中可以调节设置。点击两个画布顶部的箭头显示该转换的动画视图，可以生成动画的图层部件及其属性以列表显示，在这个时间轴可以调节动画持续时长、出现时机和动画曲线。
关键帧 Keyframes
在动画视图中，每条时间轴有两个关键帧，一个代表动画开始时刻，另一个是结束时刻。拖拽关键帧可以改变动画持续时间，拖动选区或用 Shift 可以批量修改。
缓和曲线 Easing Curves
缓和曲线决定了以下动画相关属性的速率：移动会不会从慢逐渐变得越来越快？或是开始非常快，但接近终点时突然又变慢了？以上现象就是由缓和曲线去控制的。
在动画视图中点击时间轴右侧的下拉菜单，菜单中显示了预设的几种曲线，点击曲线名称可以在坐标轴里查看图形。
预设的几种曲线跟 iOS 和 OSX 使用的一样。你可以随时调节预设的曲线：拖动曲线的两个手柄，改变长短和角度，或者在下方直接输入坐标都可以自定义动画曲线。自定义曲线不会抹掉预设曲线，可以大胆使用。
弹性曲线 Springs
弹性曲线模拟了物理弹性，和固定曲线那种从开始和结束的属性数值做渐变不同。它可以把一个元素的运动变成生动活泼。但也不能滥用，因为它会吸引人的注意力而打断思路。动画曲线的属性会根据持续时间自动的调节，所以只需微调关键帧即可改变动画的强度：越长力度越小，软绵绵；越短力度越大，干脆弹力十足。
可选择的属性 Optional Properties
动画视图中，图层名字后面有个绿色/红色方块。它可以切换是否允许一个属性在两个页面动画过度后变化。说白了，它把一个属性从上一个画布搬运到目标画布。This is useful when applied to a draggable layer to leave its position unaltered.(暂时没用过这个功能不知道如何解释，以后更新)
联动 Drivers
想制作带有交互的视差效果？想让一个图层在拖拽的同时旋转？联动功能可以实现。联动用关键帧链接了每个属性。和动画不同，动画发生在页面切换时，联动发生在同一个页面中。在工具栏点击“Drivers”可以展开当前画布的联动视图。
联动和典型的动画时间轴工作原理一致，唯一不同在于动画不是基于时间，而是属性的参数变化。
联动源 Driver Sources
想要创建联动，必须存在一个可改变的属性，这叫做联动源。可拖拽、可翻页的图层还有可选择的属性都可以作为联动源，在联动视图中列表显示。
可联动属性 Driven Properties
一旦有了联动源，你就可以用它控制其他属性。选择一个你想控制的图层，点蓝色的加号图标，选择一个你想做联动的属性。这时会以当前的属性参数创建一个关键帧。只有一个关键帧不起任何作用。
联动关键帧 Driver Keyframes
和动画一样，联动需要至少两个关键帧才能有效果。水平拖拽灰色标记，然后再次点击蓝色加号按钮可以在时间轴当前位置创建另一个关键帧。千万别忘了修改第二个关键帧的属性参数。
导出 Export
一旦完成一个工程，你一定想让全世界都看到你的成果。有以下几种方式可以实现。
视频录像和Gif动图 Videos and Animated Gifs
通过预览视图上的录制工具可以导出视频或Gif。当你点击右上角的录制按钮就开始录制预览视图中的全部操作(按住 Alt 键再点击可以在导出的视频中隐藏鼠标指针；按 Cmd 键可以切换显示鼠标箭头形状还是手指形状，在设计桌面应用时可能会用到)。开始录制后，再次点击录像按钮停止录制。
Gif 设置
当你导出 Gif 时，你可以在下拉菜单选择或键入参数来设置下面几个预设格式：
·45%
输入一个百分数可以生成按百分比缩小的版本。并且这个设置会覆盖下面的设置。
·134h
导出一个确定高度的 Gif ，是等比缩放的。
·320w
导出一个确定宽度的 Gif ，是等比缩放的。
·400w 300h
导出一个固定大小的 Gif，此时会缩放画布至合适的大小，并且会自动增加内边距和投影，还可以在右侧设置图片背景的颜色。
在设备上运行 Running on Device
在手上把玩你的设计稿是最好的体验方法，它提供的体验和使用鼠标点按完全不同。下载 Principle Mirror 在你的 iOS 设备上然后用数据线连接电脑。Principle Mac 版会自动发现已连接的设备，并立即发送当前的设计稿到设备上。使用快捷键 Cmd + ~ 可以快速切换两个设计稿。
iOS 设备上的设计稿在断开数据线后可以继续运行。这可以让你更容易的把设计展示给团队成员。
Principle 文件可以在 iOS 设备上直接打开。所以你可把文件发送给他人，或者让别人把设计稿发给你，一切就是这样简单。
动画参数 Animation Values
动画参数可以用在代码中。工程师可以非常简单的获取动画参数。
核心动画(iOS,Mac)
在这个例子中，我们给图层的x属性做了动画
float newValue = 320.0f;
float oldValue = layer.position.x;
// Move layer to new position
layer.position = CGPointMake(newValue, layer.position.y);
CABasicAnimation *animation = [CABasicAnimation animation];
animation.fillMode = kCAFillModeBackwards;
animation.additive = YES;
animation.toValue = @0;
animation.keyPath = "position.x";
animation.fromValue = @(oldValue-newValue);
animation.duration = 0.3; // time value of second keyframe minus the first keyframe's
animation.beginTime = CACurrentMediaTime() + 0.1; // time value of first keyframe
animation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.1 :0.1 :0.9 :0.9]; // these 4 numbers are from the curve selector popup
[layerToAnimate addAnimation:animation forKey:nil];
CSS3动画
div
animation-duration: 4s; /* time value of first keyframe */
animation-delay: 2s; /* time value of second keyframe minus the first keyframe's */
animation-timing-function: cubic-bezier(0.1,0.1,0.9,0.9) /* these 4 numbers are from the curve selector popup */

快捷键 Shortcuts
图层 Layers
添加矩形：R(Alt + R作为子图层添加)
添加文本：T(Alt + T作为子图层添加)
添加画布：A
组合：Cmd + G
拆分组合：Cmd + Shift + G
移到顶层：Shift + Cmd + ]
上移一层：Cmd + ]
下移一层：Cmd + [
移到底层：Shift + Cmd + [
编辑 Editing
移动部件：方向键
快速移动部件：Shift + 方向键
旋转部件：Cmd + 拖拽"旋转"把手
旋转15°的倍数：Cmd + Shift + 拖拽"旋转"把手
原处复制：Cmd + D
复制并移动：Alt + 拖拽部件
选择器文本框：可以识别简单运算，如"320/2+10"
选择器标签：鼠标左右拖动可以快速调节数值
画布导航 Canvas Navigation
移动画布：空格键 + 拖拽画布
放大画布：Z + 点击需要放大的地方
放大画布：Cmd + =
缩小画布：Cmd + -
缩小画布：Alt + Z + 点击需要缩小的地方
连续缩放：Alt + 空格键 + 鼠标拖拽
完整显示：Cmd + 1
选区完整显示：Cmd + 2
把选区移至中央：Cmd + 3
实际大小：Cmd + 0
选择 Selection
选择父部件：Esc
选择子部件：Enter
选择其他子部件：Tab
选择全部子部件：Cmd + A
预览 Preview
重置原型预览：W
显示鼠标指针：Cmd(当鼠标在预览框中)
录制 Recording
录像中隐藏鼠标指针：Alt + 点击录像按钮
开始录像：Ctrl + V
开始录像(不显示指针)：Ctrl + Alt +V
常见问题 FAQ
Princile 会有 Windows/Linux/Android 版本吗？
Principle 和 Principle Mirror 是利用OSX 和 iOS 独有的核心技术构建构成的，所以很遗憾不会有其他平台的版本。
可以导出网页格式原型吗？
考虑到网页性能的局限性，我们暂时没有计划开发这个功能。
什么时候会在 Mac Appstore 上架？
我们不打算在 Appstore 上发行，因为它的审核速度慢又严格，而且还要扣除 30% 的收入。在 Appstore 之外提供下载，我们可以频繁的升级，自由的增加新功能而不用经过漫长严格的审核过程。
Principle 以后的发展路线是怎样的？
我们不说对未来功能有什么规划。但是如果你有一些很好的想法，可以在应用内的 feedback 功能上提交，说不定以后的版本我们就会增加!本回答被提问者采纳