本教程使用素材可直接在此下載：
鏈接: https://pan.baidu.com/s/18EdaMM4IJZI4CbhvXSSEbw 提取碼: 8mic ?
一秦驯、導(dǎo)入sketch/Adobe XDCC
目前Protopie僅支持導(dǎo)入sketch和Adobe XDCC（不會Adobe XDCC，所以下面只介紹sketch的了），也只支持一次導(dǎo)入單個頁面玲昧，注意導(dǎo)入時(shí)候artboard的分辨率和場景選擇的分辨率要相同。比如sketch的artboard面板是375*667颁糟，那么以下都選擇@2x模式桑谍，但是sketch的artboard面板是750*1334，則右側(cè)sketch導(dǎo)入時(shí)尺寸需要切成@1x洗显。
當(dāng)然外潜，也可以直接將素材拖入畫板，支持jpg格式復(fù)制粘貼挠唆，png格式不可直接復(fù)制粘貼处窥。
二、容器滑頁/滾頁功能
導(dǎo)入所需素材后玄组，整理圖層順序如下滔驾，banner圖層覆蓋在狀態(tài)欄和頁碼之下：
將banner圖橫向排開谒麦，如圖：
選中所有banner圖，Command+G打組哆致，命名為【banner】绕德，將組的寬度定為375，高度不變摊阀。選中組后右側(cè)屬性出現(xiàn)耻蛇，選擇滑頁，橫向驹溃，彈跳城丧。勾選剪切子層，即在屏幕顯示區(qū)域只能看到容器內(nèi)的內(nèi)容豌鹤。
banner切換就是這么簡單得完成了亡哄！點(diǎn)開預(yù)覽窗口，可直接橫向滑動圖片了～
我是分割線
是不是總感覺只有可滑動功能怪怪的布疙，對了蚊惯！就是因?yàn)闆]有對應(yīng)的當(dāng)前圖片所在位置的顯示。
以下是擴(kuò)展模塊灵临，教大家使用函數(shù)關(guān)聯(lián)banner滑頁
在頁碼區(qū)上方添加文本【1】和【/6】截型，因?yàn)橛?張圖片，調(diào)整好位置儒溉，圖示如下：
在滑動過程中宦焦，有變化的只有當(dāng)前頁碼項(xiàng)。打開變量區(qū)顿涣，新建一個僅適用于當(dāng)前場景的變量波闹，命名為bannerN（什么都可以啦）。
將該數(shù)字與banner容器產(chǎn)生關(guān)聯(lián)涛碑，選中banner容器精堕，點(diǎn)擊添加觸發(fā)，選擇聯(lián)動蒲障，聯(lián)動對象是banner容器歹篓，下面選擇滾頁；
在此基礎(chǔ)上揉阎，點(diǎn)擊聯(lián)動下面的加號庄撮，添加行為，選擇賦值余黎。右側(cè)選擇剛才創(chuàng)建的變量名稱重窟。
右側(cè)對應(yīng)的數(shù)值官方解釋如下：
對應(yīng)范圍-觸發(fā)圖層?1
輸入聯(lián)動圖層的動作范圍。
對應(yīng)范圍-反應(yīng)圖層?2
輸入被聯(lián)動圖層的動作范圍惧财。
針對banner來說巡扇，將頁面范圍設(shè)置為0～1875（375*5），數(shù)值范圍設(shè)置為1～6垮衷。
點(diǎn)開變量旁邊的監(jiān)聽圖標(biāo)厅翔，可以在預(yù)覽窗口上滑動查看到當(dāng)前圖片滑動已經(jīng)與變量產(chǎn)生關(guān)聯(lián)，但是搀突，咦怎么回事刀闷，會有小數(shù)？因?yàn)榛瑒拥姆秶c數(shù)字對應(yīng)的也是一個范圍仰迁，因此滑動過程的圖片位移都有對應(yīng)的數(shù)字甸昏。
選中變量，添加觸發(fā)->監(jiān)聽徐许，監(jiān)聽的對象是該變量施蜜，對應(yīng)做出變化的是文本，因此添加我們需要變化的文本1雌隅，將文本1 內(nèi)容改為表達(dá)式翻默，填入取整函數(shù)floor(bannerN)，這樣我們顯示出來的數(shù)就都會是整數(shù)了恰起。
到這就大功告成啦～趕快實(shí)際操作以下吧～
