今天在做動效示意的時候發(fā)現(xiàn)使用分Principle制作「滑動后，繼續(xù)拉動切換下一分類」的交互效果其實并不簡單。網(wǎng)上搜索的也僅是翻頁、滑動組件這種單一的形式。「滑動長頁面」+「拉動底部」切換下一個分類，兩種交互同時存在的教程比較少。

這里分享&記錄我是如何實現(xiàn)「京東的拉動切換下一場」，「叮咚的上拉切換下一分類」也是相同原理，這里主要講京東的案例。

兩個交互源文件都會分享給大家，文末獲取源文件&使用方法。

一.?目錄

1. 前期準備過程

2. 關(guān)鍵步驟：如何滑動到底部，才觸發(fā)拉動切換下一場？

3. 滑動&拉動切換組件使用教程

二.?前期準備過程

1）繪制關(guān)鍵的tab和內(nèi)容，為了方便以后使用，在制作交互組件時以方塊替代文字/樣式組件。

2）建立組件，調(diào)整組件大小和位置。將tab和內(nèi)容分別打組，調(diào)整組可見區(qū)域大小，并都選擇「水平滾動」。

（PS：記得給所有方塊做好命名）

做到第2步就是這樣的效果了，是不是覺得很簡單，勝利在望？別急，才剛開始。

（PS：principle是自帶阻尼效果的，所以不用做很多動作也能跟大廠線上的效果極其相似。）

3）添加滑動到頂/底部的文字，這一步可以很簡單，也可以復(fù)雜一些。

??? a. 簡單的就是在所有內(nèi)容方塊下添加文字。并使用白色遮罩，分割方塊和文字，避免滑動的時候，露出文字內(nèi)容。

??? b. 復(fù)雜的就是利用內(nèi)容移動間距控制文字的漸顯漸隱。剛畫的白色遮罩和文字都可以保留。

點擊Drivers調(diào)出窗口??選擇需要漸顯的文字??點擊加號??添加目標Opacity。

在適合的位置打上關(guān)鍵幀，調(diào)整不透明度，一般漸隱是從0-100%，所以距離0近的關(guān)鍵幀不透明度為0%，另一個100%。

同樣的方法制作另一邊，效果如下

4）最重要的一步，拖動到底部，觸發(fā)「拉動切換下一場」交互效果?？赡芙佑|過principle的人會自然的覺得，給「內(nèi)容1」添加拖動結(jié)束跳轉(zhuǎn)下一頁即可，如果真的這么做，結(jié)果就是這樣的，還沒等你滑動到底部，拖動跳轉(zhuǎn)已經(jīng)觸發(fā)了。

三. 關(guān)鍵步驟：滑動到底部，才觸發(fā)拉動切換下一場

本篇文章的關(guān)鍵就在此：1. 保證滑動到可以看到底部/頂部文字；2. 滑動到底部才觸發(fā)跳轉(zhuǎn)鏈接

這里關(guān)鍵使用的就兩點：距離觸發(fā)&觸發(fā)對象替換

先說觸發(fā)對象替換，剛剛已經(jīng)試過了，如果直接使用拉動跳轉(zhuǎn)，那么只能操作一次拉動，principle并不能識別用戶是拖動還是滑動（不知道能不能改priciple代碼，定義拖動&滑動）。在principle無法識別時，就需要有個對象幫助它區(qū)分。這個東西就是「萬能方塊」。

再來說說距離觸發(fā)，剛其實已經(jīng)有提到，可以通過調(diào)節(jié)Drivers，控制物體在特定位置顯現(xiàn)與消失。

聰明的小伙伴可能已經(jīng)懂了。沒錯就是通過調(diào)節(jié)Drivers，控制物體在用戶滑動到底/頂部時，顯現(xiàn)「萬能滑塊」，用戶拉動萬能滑塊觸發(fā)拉動跳轉(zhuǎn)交互，具體操作如下：

??? a. 給「內(nèi)容1」添加「萬能方塊」，方塊大小根據(jù)用戶正常滑動熱區(qū)定，盡量避開常用熱區(qū)，保留一點點交疊。