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

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

兩個(gè)交互源文件都會(huì)分享給大家饰潜，文末獲取源文件&使用方法初坠。

一.?目錄

1. 前期準(zhǔn)備過程

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

3. 滑動(dòng)&拉動(dòng)切換組件使用教程

二.?前期準(zhǔn)備過程

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

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

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

做到第2步就是這樣的效果了橄务，是不是覺得很簡(jiǎn)單幔托，勝利在望？別急蜂挪，才剛開始重挑。

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

3）添加滑動(dòng)到頂/底部的文字谬哀，這一步可以很簡(jiǎn)單，也可以復(fù)雜一些严肪。

??? a. 簡(jiǎn)單的就是在所有內(nèi)容方塊下添加文字史煎。并使用白色遮罩，分割方塊和文字驳糯，避免滑動(dòng)的時(shí)候篇梭，露出文字內(nèi)容。

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

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

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

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

4）最重要的一步卑笨，拖動(dòng)到底部，觸發(fā)「拉動(dòng)切換下一場(chǎng)」交互效果仑撞〕嘈耍可能接觸過principle的人會(huì)自然的覺得妖滔，給「內(nèi)容1」添加拖動(dòng)結(jié)束跳轉(zhuǎn)下一頁(yè)即可，如果真的這么做桶良，結(jié)果就是這樣的座舍，還沒等你滑動(dòng)到底部，拖動(dòng)跳轉(zhuǎn)已經(jīng)觸發(fā)了陨帆。

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

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

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

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

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

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

??? a. 給「內(nèi)容1」添加「萬(wàn)能方塊」姜挺，方塊大小根據(jù)用戶正吵菟埃滑動(dòng)熱區(qū)定，盡量避開常用熱區(qū)炊豪，保留一點(diǎn)點(diǎn)交疊凌箕。

??? b. 給「萬(wàn)能方塊」添加根據(jù)「內(nèi)容1」移動(dòng)距離顯示的關(guān)鍵幀，滑動(dòng)到底部出現(xiàn)「萬(wàn)能方塊」词渤，但目前的萬(wàn)能方塊并不支持拖動(dòng)牵舱，所以我們還需要給「萬(wàn)能方塊」添加「滾動(dòng)」效果，方法同第2步缺虐。

??? c. 這里是希望「萬(wàn)能滑塊」被拖拽時(shí)芜壁，「內(nèi)容1」也能跟著做相同距離的移動(dòng)，所以這里就要反向聯(lián)動(dòng)，方法上面也有講過慧妄，直接看圖解和效果吧顷牌。

? ? d. 因?yàn)橹拔淖质歉竷?nèi)容1」里面的內(nèi)容聯(lián)動(dòng)的，所以這里需要調(diào)整一下塞淹，復(fù)制文字窟蓝，分別跟著「萬(wàn)能方塊」「內(nèi)容1」聯(lián)動(dòng)，這樣就能夠看到文字的漸顯了饱普。

? ? e. 然后就是給「萬(wàn)能方塊」添加拉動(dòng)跳轉(zhuǎn)运挫，并調(diào)整「萬(wàn)能方塊」的顏色為透明（PS：顏色透明是可以操作的，整體透明是不可操作的）

到此费彼，就都做完了滑臊，看一下最終效果吧

四.?滑動(dòng)&拉動(dòng)切換組件使用3步教程

這里還是以京東為例

1）導(dǎo)入U(xiǎn)I畫好的高保證原型切圖，調(diào)整圖片/方塊大小箍铲，使其保持一致雇卷，這一步主要是保證方塊和組件大小的匹配，所以調(diào)整哪個(gè)都行颠猴，整體布局不變就好关划。

2）調(diào)整移動(dòng)距離數(shù)值/「萬(wàn)能方塊滾動(dòng)」的高度和寬度，確保觸發(fā)流暢翘瓮。這里需要根據(jù)大家自己放置的切片量調(diào)整贮折，可以參考之前做組件的思路設(shè)置數(shù)值。

下載鏈接：https://mp.weixin.qq.com/s/pO9smrUYK1_5MaMfn0X1EQ

五.?總結(jié)

今天的經(jīng)驗(yàn)分享就到這里了资盅，第一次純自己探索出方法调榄，做動(dòng)效組件并分享給大家，如果覺得有用就點(diǎn)個(gè)贊吧呵扛。

可能有的小寶貝喜歡直接拿別人的動(dòng)效給開發(fā)講需要什么樣的效果每庆，但是我覺得還是做過嘗試后進(jìn)入開發(fā)才更能提高效率和開發(fā)工作積極性。走查的時(shí)候放上「優(yōu)化方案.gif」今穿，也是很拉風(fēng)的呢缤灵。