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

首先我們要兩張大小一致的圖片，疊放在一起，上面的圖片轉化為動態面板（這里我將該動態面板命名為”上層圖“，后文中的上層圖都是指該動態面板），我們設置的原理就是：通過拖動改變動態面板顯示區域的大小從而實現卷簾對比的效果；

初始狀態是兩張圖各占一半，那我們就把上層動態面板的大小調整為一半（注意：是調整動態面板的大小不是上層圖片的大?。?；

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

因為動態面板才能設置拖動效果，所以我們將上層圖和線段組合成動態面板；

選擇我們剛剛組合的動態面板，設置交互效果：

1）拖動時–移動–水平線–跟隨垂直移動讓我們的拖動桿實現垂直拖動）；

（2）設置尺寸–上層圖（動態面板）–設置高度和錨點（設置高度為拖動桿的y軸值，具體設置操作看圖）；

最后不要忘了把我們剛剛組合的動態面板設置為【自適應內容】；

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