本篇文章是principle系列教程的第二篇。文章动图较多，建议加载完成后观看哦～

大家好，本篇文章是principle系列教程的第二篇。（温馨提示：本篇介绍的内容为软件进阶技巧，需要有一定软件的操作基础，所以一些基础的操作我就没有太详细的解释，如果有同学没有操作经验但感兴趣的话可以自行找相关基础教程先学习哦）

文章动图较多，建议加载完成后观看哦～

话不多说，下面开始表演。先来看一下案例整体效果：这次的案例是一个滑块控件，在滑动的过程中会显示浮窗提示对应数值。在实际的应用场景中可以是音量、亮度调节还有影视进度条等等。别看效果挺简单，实现起来还是包含不少的技巧呢。

第一步

首先我们在sketch中把进度条的样式画好，然后导入principle中。（进度条样式大家可以自由发挥，我会把本次案例的素材放入末尾的素材包内）

首先我们要先让滑块动起来，按常规的方法我们只要给滑块图层添加一个水平拖拽的指令就可以了，但这样会出现一个问题：滑块滑动区域会超出进度条的两端导致“穿帮”。如下图所示：

为了避免这个问题我们采用的解题思路是新建一个方形图层作为滑动热区，给这个图层添加滑动指令，然后利用联动把热区图层和滑块图层关联起来。

新建一个正方形图层，尺寸和滑块图层一样116*116，然后放到与滑块重合的位置，先给图层打一个组命名为【热区】，然后把【热区】组向左拉伸宽度到730，在【热区】外层再打一个组命名为【热区组】，再将【热区】组宽度改为1344。然后给【热区组】加上一个水平滑动的指令。

接下来打开【Drivers】联动窗口，给滑块图层添加一个X轴联动属性，【热区组】的X轴位置0、614分别对应滑块X轴的624、10。再将热区的方形图层颜色的不透明度调到0。

然后我们再给蓝色进度条部分添加联动效果，给【蓝色】图层打一个组命名为【蓝色组】，再给【蓝色组】添加宽度和X轴的联动，【热区组】的X轴位置0、614分别对应【蓝色组】宽度的630、0和X轴的60、60。最后打开【Clip Sublayers】隐藏编组区域外内容。

下面来看下这部分完成之后的效果

第二步

下面我们让浮窗跟随滑块运动，并且在滑动过程中显示。给【浮层】组添加X轴联动属性，【热区组】的X轴位置0、614分别对应【浮层】X轴的632、18。

这里有个关键点：我们需要浮窗在滑动时显示而松手后隐藏。我们的思路是利用【Scroll Begins】和【Scroll Released】指令来实现两个页面来回切换。

给【热区组】添加【Scroll Begins】指令跳转到画板本身，给生成的新画板【滑块案例 2】中的【热区组】添加【Scroll Released】指令跳转到第一个画板【滑块案例】，最后一定要把画板【滑块案例】中的【浮层】不透明度设置为0。

再来看看现在的效果

最后一步，怎么让浮窗的数字随滑动的位置变化呢？

这里有两种方法，第一种简单的方法可以准备不同的数字图层，然后添加联动，挨个设置不透明度变化，让每个数字在对应位置显示。但这种方法比较笨重，特别是图片多的时候操作很麻烦。

我自己研究了第二种方法，准备一个数字0-100不断递增的mp4格式视频，然后用联动关联视频的播放进度，这样来实现滑块在不同位置时浮层显示不同的数字，和控制视频进度条原理一样。我可真是太机智了哈哈哈～

下面简单介绍一下利用AE简单的操作来制作视频素材，我在后面的素材包给大家准备了现成的mp4视频，不想自己动手做可以跳过这一段哈。

在AE新建一个80*60px的合成，持续时间101帧（0到100是101个数字，0也算一个）

在合成里新建纯色图层，色值为#EBECF0。

新建文本图层随便输一个数字，字色#66B3FF，字体苹方中粗体，字号44px。

在效果和预设搜索“编号”，双击给文本图层添加编号效果，字体选择平方中粗体，对齐方式居中对齐。

编号效果数值如下图所示，文章填充颜色#66B3FF。

给数值打上关键帧，第一帧对应0，最后一帧对应100。

视频制作完成后我们利用Adobe Media Encoder导出mp4格式文件。（这部分也很简单就不展开讲了）

得到视频素材后可以拖入principle画板里，把之前的数字图层删掉。然后给视频添加Media Time联动效果，【热区组】的X轴位置0、614分别对应视频的最后一帧、第一帧。别忘了两个画板都要添加哦。

大功告成！来看看最终的效果

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

1. 新建一个方形图层作为滑动热区，给热区添加滑动指令，然后利用联动把热区和滑块图层关联起来，避免滑块超出边缘“穿帮”。

2. 要实现浮窗在滑动时显示而松手后隐藏，方法是用两个相同的画板，一个画板【浮层】不透明度为0，另一个画板【浮层】不透明度为100.然后通过【Scroll Begins】和【Scroll Released】指令来实现两个页面来回切换。

3. 利用联动控制视频播放时间的功能，模仿视频进度条的效果，实现滑块在不同位置时浮层显示不同的数字。

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

Powered by Froala Editor