如果要用Principle做Slider，你第一反應(yīng)是用哪種交互手勢(shì)實(shí)現(xiàn)？是不是Drag？但是用Drag的話(huà)Slider無(wú)法固定在滑桿上滑動(dòng)，要實(shí)現(xiàn)這種效果應(yīng)該用Page（翻頁(yè)功能）。
Page在Principle里面最常用是實(shí)現(xiàn)左右翻頁(yè)，例如圖片的翻頁(yè)滑動(dòng)：
關(guān)于Page的官網(wǎng)教程：
教程里面提到為了三張圖片都能等距滑動(dòng)，所以在組合里添加了一個(gè)輔助圖層。這是因?yàn)榉?yè)功能的原理是每次滑動(dòng)固定的距離，而這個(gè)距離和組合的大小一致的，也就是說(shuō)組合的大小是每次移動(dòng)的距離，而組合內(nèi)元素的最大值決定了你移動(dòng)的總距離。
換言之，觸發(fā)Page的組合里面包含兩個(gè)元素：一個(gè)是移動(dòng)的滑塊，組合的大小應(yīng)該和滑塊一致，另一個(gè)是決定移動(dòng)距離的輔助圖層，透明度設(shè)為0，長(zhǎng)度應(yīng)該和滑桿一致。
不過(guò)值得注意的是，圖一的Slider 1是從原點(diǎn)開(kāi)始，交互動(dòng)作也就是從左往右翻頁(yè)，所以輔助圖層放在左邊，而圖二的Slider 2是位于中間的，也就是需要支持兩個(gè)方向的翻頁(yè)，所以輔助圖層要對(duì)應(yīng)的位置。
設(shè)置完滑塊的組合，我們來(lái)說(shuō)下滑桿的組合。該組合也是由兩個(gè)部分組成：默認(rèn)滑桿和填充滑桿。怎么能讓填充滑桿一部分不顯示出來(lái)？這里要隆重介紹一個(gè)好用的屬性clip sublayers，只要在組合屬性里面勾選了這項(xiàng)，并且調(diào)整組合大小為你要顯示的區(qū)域，就能實(shí)現(xiàn)對(duì)圖層的裁剪和遮罩效果，溢出區(qū)域不再顯示。
如果你要給滑桿增添一點(diǎn)效果，比如像Slider 2的描邊、陰影等，只要調(diào)整滑桿組合的屬性就好了。最后，以滑塊組合為聯(lián)動(dòng)源，給填充滑桿添加x軸位置屬性的改變（關(guān)于聯(lián)動(dòng)有空會(huì)再寫(xiě)一篇筆記，沒(méi)基礎(chǔ)的同學(xué)先將就著看啦~），嗯，這樣就做完了。
還有一個(gè)小疑問(wèn)，網(wǎng)上看到別人做的源文件里滑塊組合的輔助圖層是很多個(gè)和滑塊等寬登高的小方形，為什么要這樣做而不是直接像我那樣用一個(gè)矩形呢？是為了確?；瑝K滑動(dòng)位置的準(zhǔn)確性嗎？求高手解答！
歡迎大家交流學(xué)習(xí)??
