站酷推荐设计师

（图9 组件2 中 动画起始时间向后拖动，使得晚与 组件1 出现）

01fc425db7c99fa801209e1fac4f2a.gif

Principle障眼法揭秘

（图10 组件3 中 动画起始时间向后拖动，使得晚与 组件2 出现，返回实例预览效果）

01e9135db7c9e7a8012163bab8a23a.gif

Principle教程（四）：动效视图的运用（附源文件）

调整Artboard 2里命名为icon的图标组，调整为想要的最后样子。在Artboard 2里，首先选择icon组里的Layer 2,把透明度调整为0，然后选择Layer 1，把角度调整为45度，再选择Layer 3，角度调整为135度。最后调整下Layer 1和Layer 3的位置。

019fd7585fe4d2a8012060c888983d.png

（图36 给需添加拖动图层上层新建一个色块 -- 给色块增加拖拽属性）

01403a5db7d1c6a801209e1fad1a8f.gif

制作动画的转场效果。选择Artboard 1,点击事件触发器（闪电图标）选择Auto，拖到Artboard 2上。

0157d0585fe469a801219c77f15d89.png

（图8 自动跳转得到画板3 -- 调整透明 -- 调整时长）

01d04d5db7c982a8012163ba0c4308.gif

0155c960d0735e11013f47200adf68.jpg

手机界面UI | 设计规范

01ae425c50015da801203d22e61494.png

principle动画演示

(图34 添加自动调整 -- 移动位置 -- 调整动画属性及时长)

01c0065db7d1c6a801209e1f6a8273.gif

Principle教程（三）：联动视图的运用

时间节点在-340的位置时，选择蓝色形状图层，然后在联动视图里点击X轴栏下的“+”号图标，选择“Opacity”（透明度），把检查器里的透明度改为“0”，然后拖动时间线到节点“0”的位置时，检查器里的透明度改为“100”，最终的预览效果是，当青色卡片在中间时，右边的蓝色卡片消失，向左边移动时，蓝色卡片会渐变出现。

01fab758568acca8012060c868f959.gif

0165e057f8a9eaa84a0d304fd68dc1.png

动效小练习(附Principle源文件)

准时下班？小白看了都会的figma高精尖教程！

66c86443c420el2mlzy9ep2288.gif

（图11 分别调整组件内 画板3 跳转回 画板1 后，无动画触发时间）

01834b5db7ca4ba801209e1fad4a9e.gif

01txphkemrmqvmult9ukxe3531.png

电动汽车showreel(blender)

Principle教程（二）：静态、拖拽、滚动、翻页（附源文件）

点击Import(右上角钻石形状的图标)，选择x1，然后点击Import。

01170e584d7a24a801219c7727e392.png

（图20 新建色块 -- 调整图层为子集 -- 降低色块颜色透明度）

01289a5db7cd84a8012163ba783011.gif

制作文字的依次出现效果。依次选择和调整动效视图里的Text4、3、2、Text,把整个蓝色条拖动到上图中对应的时间点上。这个时候已经完成整个效果的制作，可以通过游览窗口查看整个动画。

010f41585fe5aea801219c77e6deb8.png

（图30 Sketch中提前对异形底板做长度处理）

01de2c5db7d084a801209e1f41963a.jpg

（图35 通过自动跳转加色块位移实现数字递增）

017c1d5db7d1c6a8012163ba365017.gif

选择青色形状图层，打开联动视图，点击X轴栏下的“+”号图标，选择“Opacity”（透明度），在时间节点“0”的时候，检查器里的透明度改为“0”，鼠标拖动时间节点到-340的位置将检查器里的透明度改为“100”，最终的预览效果是，当蓝色卡片在中间时，左边的青色卡片消失，向右边移动时，青色卡片会渐变出现。备注：鼠标移到时间节点区域上，按住键盘空格键+鼠标点击可以左右拖动时间线区域。

01844258568a05a8012060c8125a33.gif

（图15 按住⌥拖动复制出画板3 -- 调整图层顺序 -- 添加自动跳转）

01e6a55db7cbe0a8012163baec4e53.gif

66c867f173487dzahtzj135556.gif

01a1ef5acd8158a801204029c82311.gif

安卓.9切图教程

01a7db59ae753ba801211d25fc78cb.png

YoMail client UE/UX

015b495db7d0fda8012163bab56285.gif

在动效视图里调整icon组内元素的过渡时间曲线和曲线模式，让icon组的形状在两个画板之间过渡快一些。

01fc4c585fe56da801219c77533e29.gif

（图21 自动跳转 -- 旋转矩形360度 -- 跳转动画曲线/时长）

017be45db7cdb8a8012163badcd560.gif

（图12 简易方法 不用计算时长、不用单独使组件循环）

01f4315db7cac6a801209e1fd8837b.gif

调整好“QuickTime影片”的参数和质量

016ba255dab9cd6ac7251df8521b5a.png

Motion graphic Dots

选中文字组，选用检查器里的Scroll(滚动)功能，然后对Clip Sublayers打钩，再进行编辑。