principle动效理论实践

本文主要通过概述principle基本操作、镜头语言中的转场思路以及实战例子来整理；

目录

01 principle的基操

1.1 兼容的程序与支持的格式
1.2 画板的能力
1.3 时间轴的用法
1.4 文件夹（编组）的用法
1.5 组件的概念

02 镜头语言

2.1 推、拉、摇、移
2.2 转场频率

03 实战剖析

3.1 人机交互动效模拟案例
3.2 文件夹的多种用法
3.3 转场细节

04 总结

01 principle的基操

1.1 兼容的程序与支持的格式

principle可以和figma与sketch无缝衔接，通过figma与sketch中选中的画板或元素一键导入principle中；另一方面，principle支持的资源格式有：jpg，png，eps，MP4，mov等几种常用资源格式；

1.2 画板的能力

画板主要承载了动画的表现区域，以及交互模式的设定；
principle目前支持的动画表现形式有：X、Y轴移动，旋转，宽、高、缩放大小变化，透明度、颜色的过度，描边、投影的变化以及圆角数值的变化等。

交互模式有：点击、滚动、拖动、触摸、悬浮、自动，5大类的交互触发模式。

1.3 时间轴的用法

时间轴在principle中占有很重要的席位，时间轴调节动画的过度时长外，还有两个重要的功能动画缓动曲线的选择和动画形式表现的时间维度调节；

1.4 文件夹（编组）的用法

principle中文件夹除了打组归纳整合素材的作用外，还具有蒙版（裁剪）以及更改原点的能力；需要注意的是，文件夹的大小变化不会对文件夹内的素材产生影响，灵活妙用文件夹能力可以丰富在principle中的实现的落地多样性；

1.5 组件的概念

principle中组件的功能可对标AE中的合成，原理基本相似，组件作为一个独立的存在，不受外部因素影响其内部结构；同时它与其他软件的组件相同，当改变其内部结构后，外部的嵌套组件也同样产生变化；

02 镜头语言

2.1 推、拉、摇、移

推：推镜头一方面把主体从环境中分离出来，另一方面提醒观者对主体或主体的某个细节特别注意。

拉：被摄主体在画面由近至远由局部到全体地展示出来，使得主体或主体的细节渐渐变小。拉镜头强调是主体与环境的关系。

摇：摄像机的位置不动，只作角度的变化，其方向可以是左右摇或上下摇，也可以是斜摇或旋转摇。其目的是对被摄主体的各部位逐一展示，或展示规模，或巡视环境等；
*ps：principle暂时做不到摇镜头的效果，因为会涉及到透视的情况，这里提出”摇“只为做一个引申；

移：摄像机沿水平作各方向移动并同时进行拍摄。移动拍摄要求较高，在实际拍摄中需要专用设备配合。移动拍摄可产生巡视或展示的视觉效果。

2.2 转场频率

转场频率有两种：有连贯性（同向频率），服务一个目标或者达到相辅相成的作用；无连贯性（异向频率），一个以上的目标，比如做对比、对立手法等；

同向频率

异向频率

03 实战剖析

3.1 人机交互动效模拟案例

3.2 文件夹的多种用法

这里只解析知识点，不做完整教程
首先把卡片单独创建文件夹，然后利用文件夹调整原点的能力定义卡片合适的原点（由于要做扇面的动效，所以把原点放在了下方远离卡片的位置）；
然后我们重复复制4份卡片，分别让每个卡片的相隔20°，此时得出扇形结构了；
由于当前扇形结构在手机框架中有溢出的部分，我们把5个扇面放在新建的文件夹内，使用文件夹功能中的“Clip Sublayers”隐藏掉溢出的部分，为后面的滚动做基础；
然后设置对应的交互模式以及触发的旋转角度，即可轻松实现扇形弧度的运用。

3.3 转场细节

衔接要流畅，比如点击卡片逆时针放大效果，其中点击下去的动作要模拟物理属性，告诉用户这个卡片是被按下去激活的；同时可以让用户感受到流畅的感觉。

04 总结

这里以principle做文章主要是其上手快，可以快速的产出一些交互上的动画、demo等，在一定程度上为工作提效；
通过利用Principle的特性和功能，设计师可以创建出新颖具有交互性的设计作品，提升工作质量和独特创意表现。
最后，Principle只是一款工具，重要的是设计师本身的创意与思路。