Principle交互动效制作基础- 选项卡交互动效

首先打开sketch文件，我们把多余的文件打组创建组件，在组件命名后面加上“*”这样导入principle里，这个文件夹就合并为一张图片

打开principle，点击“import”导入sketch文件

这里我们可以看到刚才在sketch文件加“*”的组件在principle里面已经合并为一个图片，这样图层少了就能更清晰的做动效了

选中“Discover”图层，点击旁边的闪电icon指向当前画布，这样就复制了一个画布

对画布2进行设置，将图层“Discover”透明度改成100%，图层“Home”透明度改成40%，导航下面的线移动到画布中间，相对于“Discover”是居中对齐，给背景改一个颜色

同样的方法复制第三个画布，修改属性，那么现在由左往右点的动效就完成了

现在需要从右往左点击回来，选中画布3“Discover”指向第二个画布，选中画布2“Home”指向画布1，这样顶部的一个动效就执行完毕

但是这个动效，只能从第一个到第二个到第三个再到第二个第一个这样挨着顺序的点击，我们需要第一个跳到第三个或者第三个跳到第一个，所以需要在画布三，点击“Home”指向画布1，选择画布1“Mine”指向画布3，这样动效就完整的串起来了

调整细节，我们需要给滑动过程中增加弹动的感觉，首先打开“Animate”面板，选中“Discover Tap”下面的线，这样就弹出动效时间轴

我们要给蓝色的线添加Q弹的动效，首选选中它，单击蓝色的时间轴打开属性面板

点击“spring”，这里红色框里面有两个值，左边代表张力，右边代表摩擦力，张力越大，弹性越大，摩擦力越大，弹性越小

同样的方法把其余的滑动线全部加上“spring”

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