本篇文章和大家分享一些principle的操作技巧。全篇约3300字，动图较多，建议加载完成后观看哦～

大家好，这篇文章给大家介绍一些principle的操作技巧。市面上很多交互动效在视觉上效果很炫酷，但由于成本问题却难以落地而只能作为概念设计，那么有没有一些实用可落地的动效呢？今天我结合案例来给大家介绍一下principle的一些玩法。希望能帮助大家对软件的使用有所启发。（温馨提示：本篇介绍的内容为软件进阶技巧，需要有一定软件的操作基础，所以一些基础的操作我就没有太详细的解释，如果有同学没有操作经验但感兴趣的话可以自行找相关基础教程先学习哦）

这次给大家分享的是一个拖拽弹射交互的小彩蛋动效，在项目中添加这类彩蛋型功能会让体验更出彩哦。在市面上各类产品中，发布按钮是用户生产内容的最重要的入口，最常见的样式是在tab bar中间放置发布按钮（如下图tab bar中的【+】号按钮）。 

常规的发布按钮点击后会弹出选项或者进入二级页面，但如果在这基础上添加一点小彩蛋，在不影响用户正常使用的流程下，用户发现这样的小惊喜会给产品加分不少哦。下面就是本次教程的案例：在点击触发弹层的基础上，添加拖拽弹射触发弹层。

下面开始表演

第一步

首先我们把在sketch中画好的素材导入principle中。（素材的页面大家可以自由发挥，我会把本次案例的素材放入末尾的素材包内，欢迎自取）

我们先实现最基础的跳转，把转场效果调整好。先把画板复制一个，然后把画板1中弹层的两个选项移到和发布按钮剧中对齐的位置，再将这两个选项图层和【蒙层】图层的不透明度调整为0。接下来我们给发布按钮添加一个点击指令跳转到画板2。

下面我们调整元素的转场效果。

1、把画板2中的【标题】和【底部信息】图层不透明度调整为0。

2、把发布按钮的角度调整为45°，不透明度调为40%，再给发布按钮添加一个点击指令跳转到画板1。

3、将【蒙层】的缩放属性调整为40，不透明度调整为90%。

这时我们得到了一个超大的圆形蒙层，如下图。 

为了不让这个大圆形占太多空间太碍事，我们给蒙层建一个组，然后把组的范围调整和画板一样，再把【Clip Sublayers】选项勾上隐藏组外区域内容。这样我们就得到了下图的两个画板。

现在我们得到了如下图的跳转效果，看起来还很生硬

下面重点来啦！我们需要调整元素运动的缓动曲线让过渡更丝滑。

在画板1跳转到画板2的动画中：

1、首先我们给发布按钮的旋转效果加上弹性缓动，让过渡更Q弹。默认的数值弹性不够明显，我们把张力【tension】数值调整为600。 

2、给弹层的两个选项X轴、Y轴位移也加上弹性缓动，数值用默认的就行。

3、把蒙层不透明度的动画关闭。 

4、这里有很关键的一步，我们给两个选项的运动开始时间加一点时差，让运动更有层次感。把【图文tab】的运动开始时间拉到0.06s，调整后的设置如下图。

同样的，画板2跳转到画板1的动画也要调整：

1、发布按钮的旋转效果加上弹性缓动，张力【tension】数值调整为600。

2、我们要让两个弹层选项在原地消失，并且消失时间要快一些。把两个选项的X轴、Y轴位移动画关闭，把变化时间移到不透明度变化的最后一帧时间（0.3s），再把不透明度最后一帧拉到0.16s。

3、把蒙层不透明度动画关闭，变化时间拉到0.3s。

调整完成后设置如下图。 

再来看下目前的跳转效果，是不是流畅了很多呢？别看这简单的跳转，需要调整的细节还不少呢。

第二步

做完了基础的点击跳转，我们下面要做的就是加分的拖拽跳转了。

先给画板1的发布按钮添加一个拖拽结束【Drag Ends】跳转到画板2的指令，然后给X轴、Y轴运动添加弹性缓动。拖拽结束的时候我们想要按钮有弹射的效果，所以回弹的速度要很快，所以张力和摩擦力分别改为800和30（这个数值是我反复尝试后比较满意的效果）。 

这时我们想要的效果是发布按钮释放时第一次到达原位时弹层选项才弹出来，有种选项是被发布按钮撞击散开来的感觉，而现在选项出现的时间还太早了。所以我们把除发布按钮外的元素运动开始时间往后拖0.08s（这个数值也是我比较满意的效果）如下图。

这样我们就实现了拖拽回弹跳转的效果了

第三步

到目前为止其实我们的主要动效都完成了，最后可以添加一点锦上添花的小细节让动效更完善。

在拖拽的过程中，发布按钮的位置比较空。这里我们添加一个波纹扩散的效果，暗示即将要发生的跳转，让用户有心理预期。如下图所示。 

这里介绍一个principle软件功能的知识点，请做好笔记！

我们都知道principle是有组件功能的，组件内的画板可以相互跳转。其实父级画板的指令也传输到组件实现组件内画板的跳转。同样的，组件内的指令也可以传输到父级画板实现父级画板跳转到同级的其他画板。

我们先来看看父级画板指令激活组件内画板跳转是如何实现的：

新建一个画板，在画板中随意画一个矩形，然后复制一个，再将其中一个矩形创建为组件，另一个作为父级画板传输指令的按钮。我们进入组件里给组件添加一个文本图层编辑内容为【组件1】，把画板复制一个将文本改为【组件2】。然后点开组件画板1中的矩形图层的指令菜单，选择【Messages from Parent +】关联父级画板指令，然后将箭头指向组件画板2，我们把指令名称改为【组件跳转】，这时我们相当于把这个指令存储到中介了，还没有激活并不能实现跳转。同样的组件画板2的矩形图层也选择【组件跳转】指令连接到组件画板1。然后回到父级画板，给下面的矩形添加点击指令件套指到组件上选择【组件跳转】，这时我们就将【组件跳转】指令激活了，从而实现了父级画板指令激活组件内画板跳转。 

其实还有一种方法，给下面矩形添加点击指令后直接移到组件上点击【Select Artboard】在组件中选择画板进行跳转，但是如果组件内有多个画板的话会将所有的画板都跳转到你所选定的画板。此时只要将不需要的跳转删掉即可。

再来看看组件画板指令激活父级画板跳转是如何实现的：

新建一个画板，在画板中随意画一个矩形，然后复制一个，给其中一个矩形添加一个文本写上【画板1】，将另一个矩形图层创建为组件。然后进入到组件中，给矩形添加一个点击指令连接到左上角的【Send Message】把指令发送给父级画板，将这个指令名称改为【画板跳转】。回到父级画板，点击组件指令菜单接收【画板跳转】指令连接到画板本身复制出一个画板2，把画板2的文本改为【画板2】，将组件的【画板跳转】指令连接到画板1。这样就实现了组件画板指令激活父级画板跳转。 

OK说了这么多，我们回到波纹扩散效果的制作。

我们在蒙层上新建一个60*60的圆形，放在和发布按钮重合的位置，创建为组件。把圆形填充的颜色不透明度改为0，描边改为白色6px，不透明度改为30%，缩放改为0。然后复制两个画板，将画板2和画板3设置为相互自动跳转。将画板3的圆形缩放改为1，不透明度改为0%。

继续调整画板2跳转到画板3的过渡动画：将动画时间拉长至0.8s，缓动曲线选择【Ease Out】。关闭画板3跳转到画板2的动画。这时我们得到了一个自动播放的波纹扩散效果。

现在我们要利用父级画板指令来触发组件内画板的跳转，点击画板1的指令菜单选择【Messages from Parent +】跳转到画板2，把指令名称改为【波纹跳转】。回到父级画板中，在发布按钮的指令菜单里选择【Drag Begins】激活组件的指令。 

大功告成！最后我们把背景图片替换成视频来看看效果

总结一下，整个操作流程有三个关键点：

1、第一步先把基础的点击跳转做好，注意元素的转场过渡效果一点要调整到位，让跳转体验更丝滑。

2、发布按钮的回弹动画速度要快，两个选项出现的时间稍晚一点，营造被发布按钮撞击散开来的感觉。

3、利用父级画板指令激活组件内画板跳转功能添加波纹扩散效果，给用户交互暗示，让用户有心理预期。

虽然软件功能是有限的，但我们可以灵活结合不同的功能来实现各种效果。如果有感兴趣的问题和想要实现的效果都可以一起交流哦。希望大家可以活学活用举一反三，以上就是本次分享的全部内容啦，谢谢大家～！

Powered by Froala Editor