如果要用Principle做Slider，你第一反应是用哪种交互手势实现？是不是Drag？但是用Drag的话Slider无法固定在滑杆上滑动，要实现这种效果应该用Page（翻页功能）。
Page在Principle里面最常用是实现左右翻页，例如图片的翻页滑动：
关于Page的官网教程：
Principle- Paging - 腾讯视频
教程里面提到为了三张图片都能等距滑动，所以在组合里添加了一个辅助图层。这是因为翻页功能的原理是每次滑动固定的距离，而这个距离和组合的大小一致的，也就是说组合的大小是每次移动的距离，而组合内元素的最大值决定了你移动的总距离。
换言之，触发Page的组合里面包含两个元素：一个是移动的滑块，组合的大小应该和滑块一致，另一个是决定移动距离的辅助图层，透明度设为0，长度应该和滑杆一致。
不过值得注意的是，图一的Slider 1是从原点开始，交互动作也就是从左往右翻页，所以辅助图层放在左边，而图二的Slider 2是位于中间的，也就是需要支持两个方向的翻页，所以辅助图层要对应的位置。
图一
图二
设置完滑块的组合，我们来说下滑杆的组合。该组合也是由两个部分组成：默认滑杆和填充滑杆。怎么能让填充滑杆一部分不显示出来？这里要隆重介绍一个好用的属性clip sublayers，只要在组合属性里面勾选了这项，并且调整组合大小为你要显示的区域，就能实现对图层的裁剪和遮罩效果，溢出区域不再显示。
如果你要给滑杆增添一点效果，比如像Slider 2的描边、阴影等，只要调整滑杆组合的属性就好了。最后，以滑块组合为联动源，给填充滑杆添加x轴位置属性的改变（关于联动有空会再写一篇笔记，没基础的同学先将就着看啦~），嗯，这样就做完了。
还有一个小疑问，网上看到别人做的源文件里滑块组合的辅助图层是很多个和滑块等宽登高的小方形，为什么要这样做而不是直接像我那样用一个矩形呢？是为了确保滑块滑动位置的准确性吗？求高手解答！
欢迎大家交流学习😊
网友评论