Principle交互动效制作基础- Tab的运用

分解以上动画构成，需要做动效的图单独一个图层，不需要做动效的图层合并，如果设计稿在sketch里面设计，可以通过principle直接导入

这里直接用的切图，在ps导出切图也是@2x图

第一步建立画板

第二步把页面元素在principle里面按照设计图样式排列好

选中“Group”文件夹，这个文件夹对应的就是我们需要点击的位置，当选择文件时，旁

边会出现一个带闪电的小icon，点击它会出现旁边的属性栏

由于我们的动画效果是点击“+”弹出三个小icon的效果，所以在这里选择“tap”指向当前画布（Artboard）

这样就复制了一个画布，并且这两个画布的名称是保持一致的（注：两个页面中的同一交互元素，必须保持命名一致！否则软件无法识别为同一元素）

这里我们要对第一个画布进行设置，将命名为“Layer”的文件透明度改为0%，将需要弹出的三个小icon透明度和比例改成0%，同时将位置放到“+”icon的正中间

对第二个画布进行设置，将命名为“Layer”的文件透明度改为50%，将需要弹出的三个小icon透明度和比例改成100%，同时将位置放到外面，这样点击“+”icon弹出三个icon，背景有过度的感觉。

同时需要对第二个画布“+”进行设置，“+”号是两个图层构成，这里只需要对两个图层分别旋转45°，最终出来的效果“x”，这样两个画布之间自动形成补间动画

初步效果已经有了，但是这样出来的动画很生硬，需要做细节优化，点击红色位置那根线，会弹出动效视图

首先将时间变慢一点，将0.3秒调成0.5秒，用鼠标选中时间轴的尾端拖动时间轴位置

我们要给“+”号和三个小icon加上Q弹的动效，鼠标单击时间抽，会出来相应属性，这里点击“spring”，把“+”号和三个小icon都加上“spring”最终出来的动效就有跳跃的感觉

本文重点知识：复习动效视图“tap”的运用，时间轴的运用

最后，选择第二个画布“Group”添加tap属性指向第一个画画布，最终效果完成

希望对喜欢动效又是初学者的你有所帮助！