今天同事問我卷簾對(duì)比效果原型怎么畫，我就認(rèn)真研究了一下，分享給大家~

首先我們要兩張大小一致的圖片，疊放在一起，上面的圖片轉(zhuǎn)化為動(dòng)態(tài)面板（這里我將該動(dòng)態(tài)面板命名為”上層圖“，后文中的上層圖都是指該動(dòng)態(tài)面板），我們?cè)O(shè)置的原理就是：通過拖動(dòng)改變動(dòng)態(tài)面板顯示區(qū)域的大小從而實(shí)現(xiàn)卷簾對(duì)比的效果；

初始狀態(tài)是兩張圖各占一半，那我們就把上層動(dòng)態(tài)面板的大小調(diào)整為一半（注意：是調(diào)整動(dòng)態(tài)面板的大小不是上層圖片的大?。?/p>

我們需要設(shè)置一個(gè)拖拽桿，選擇【水平線】拖拽到兩張圖分界處，長(zhǎng)度調(diào)整和圖片一致，為了更加明顯，我調(diào)整了線段顏色和寬度；

因?yàn)閯?dòng)態(tài)面板才能設(shè)置拖動(dòng)效果，所以我們將上層圖和線段組合成動(dòng)態(tài)面板；

選擇我們剛剛組合的動(dòng)態(tài)面板，設(shè)置交互效果：

1）拖動(dòng)時(shí)–移動(dòng)–水平線–跟隨垂直移動(dòng)讓我們的拖動(dòng)桿實(shí)現(xiàn)垂直拖動(dòng)）；

（2）設(shè)置尺寸–上層圖（動(dòng)態(tài)面板）–設(shè)置高度和錨點(diǎn)（設(shè)置高度為拖動(dòng)桿的y軸值，具體設(shè)置操作看圖）；

最后不要忘了把我們剛剛組合的動(dòng)態(tài)面板設(shè)置為【自適應(yīng)內(nèi)容】；

這樣就完成所有操作了，大家可以試一試~