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

制作Group组的下滑跳动效果。在动效视图里选择Group组，然后点击蓝色条内的Default，出现选项，选择Spring模式。这个时候大家可以通过预览窗口看看大致的效果。

01f53b585fe599a8012060c8513e86.png

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

0157d0585fe469a801219c77f15d89.png

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

010f41585fe5aea801219c77e6deb8.png

激活动效视图。打开工具栏的Animate,下方出现动效视图窗口，此时的窗口是空的，这时点击两个画板上方的箭头图标，激活视图。

011708585fe4afa801219c772395aa.png

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

019fd7585fe4d2a8012060c888983d.png

011c215822970ca84a0d304f5e4b86.png

Principle练习

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

01fc4c585fe56da801219c77533e29.gif

01d8265a155082a801205187fc1362.png

Driving recorders

没有分组的概念<br>真是一点都不乱呢

0147275922ee1ca801216a3e304f07.png

四十天交互训练

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

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

01fab758568acca8012060c868f959.gif

站酷推荐设计师

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

01403a5db7d1c6a801209e1fad1a8f.gif

Principle障眼法揭秘

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

01e72258568ae3a8012060c86cc7bf.gif

0161af569ba12332f87574bee8752c.png

My home page

0177ce5cfbada7a801213ec205734d.jpg

动效练习-嗜睡小精灵

01abb15bdc0537a80121ab5d227e8f.png

APP动效展示

时间节点在“340”的位置时，选择蓝色形状图层，然后在联动视图里选择先前蓝色图层的“Opacity”（透明度）时间线，把检查器里的透明度改为“0”，最终的预览效果是，当绿色卡片在中间时，左边的蓝色卡片消失，向右边移动时，蓝色卡片会渐变出现。<br>到这里就结束了，通过预览窗口可以查看实现效果是否正确。有不对的位置可以细心查看反复琢磨其中的原理。

0182de58568be6a801219c77e78712.gif

200多张 APP 【icon】 原创-设计元素及理念

01f1be58d11e71a801219c77d79ebe.png

（图16 调整动画属性为线性匀速 -- 调整动画时长）

01a0225db7cbf2a801209e1fd37e0f.gif

012f0757b3c7c80000018c1b193a6f.png

Sketch 汉化插件

01074b5cfbada4a801205e4ba28595.jpg

01bf1658d69c94a801219c778a9762.png

某星级酒店智控ui

01fc8e5f094271a80120662131733f.gif

设计系统的建立

013b0a5c486195a801203d22fce6f5.png

Touch bar 美化

01650059a41374a801211d25bc0403.png

ETL产品设计

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

用事件触发器里的Tap来进行转场效果。

01bc04584d81d3a8012060c8a77427.gif

（图24 给投影等图层增加动效细节「旋转-360度」 调整动画曲线与时长）

0146645db7cec8a801209e1f08df72.gif

01d84f5925865ea801216a3ee7e3b4.png

第三天@交互40天#设置2级

0150ff5a3a71f6a80121db805c5adf.png

闲暇作品

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

01f09f584d7d84a801219c77f05bde.gif

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