展開套展開、左滑套右滑…編輯器還能這樣騷操作？！
自己就能摸索出編輯器還可以這樣玩的，算你厲害。
在 iPaiban Pro 黑科技編輯器中，有兩個最主要的功能，一個是組件，一個是組合。
組件可以單獨使用，而組合需要嵌套組件來使用。比如如果想要在點擊展開中加入一個點擊切換圖片的效果，那么在「點擊展開」組合中嵌套一個「點擊切換圖片」的組件就可以。
而其實，組合中不只可以嵌套組件，還可以進行組合間的互相嵌套！
今天教大家3種組合套組合的玩法，每個玩法介紹最后都有對應(yīng)的交互編號，大家可以看完去嘗試下。
1展開套展開
來自「HEYTEA喜茶」：
▲GIF演示點此查看原文
在 iPaiban Pro 中雖然有「層層展開」組件，但它有個限制是展開中只能添加無縫圖，所以如果你想要在展開中加入更多豐富的效果，不妨試試在展開中套展開吧。
那種一層一層展開的絲滑效果，會激發(fā)用戶好奇心一路探索下去。
注意，不是所有展開組合中都能嵌套展開哦，只有「嵌套展開」分類中的才可以。
案例對應(yīng)編輯器交互：
組合：點擊展開(可嵌套,固寬)
編號：10875（組合）
組合：點擊切換GIF動圖+展開(可嵌套,有觸發(fā)區(qū),固寬)
編號：10935（組合）
2左滑套右滑
來自「HERMES」：
上方這種在初始畫面能向左也能向右滑動的效果，看著像一個新效果，其實在「左滑組合(自動對齊)」中嵌套一個「右滑組合(自動對齊)」就能實現(xiàn)。
滑動組合間的嵌套，好處是可以在每一個模塊中繼續(xù)嵌套不同的交互組件，讓效果更豐富。
如果左右滑動的僅僅是圖片的話，我們在「左滑組合(自動對齊)」嵌套一個「單層滑動-右滑(自動對齊)」組件就可以，詳細教程戳：《能向左也能向右滑的雙向滑動，教你1分鐘實現(xiàn)！》
注意，無論是滑動組合還會滑動組件，都要選擇可以自動對齊的哦。
案例對應(yīng)編輯器交互：
組合：左滑組合(自動對齊)
編號：10249（組合）
組合：右滑組合(自動對齊)
編號：10294（組合）
組件：視頻號-圖片
編號：10228（組件）
3滑動套展開
來自「HERMES」：
展開中套滑動很常見，反過來滑動中套展開就會給人一種新鮮的感覺。
我們制作時要注意給滑動組合設(shè)置一個零高圖片作為背景，圖片高度大于等于展開內(nèi)容的整體高度。這樣當?shù)谝粋€滑動模塊點擊展開后，再進入第二個滑動模板時，不至于看到刺眼的白色背景。
試試反例：
案例對應(yīng)編輯器交互：
組合：左滑組合
編號：10153（組合）
組合：點擊切換圖片+展開(有觸發(fā)區(qū))
編號：10057（組合）
組件：零高圖片
編號：10224（組件）
利用編輯器的嵌套功能，還可以實現(xiàn)很多很多有意思的效果，比如在滑動組合里添加音視頻，在長屏左滑組合里嵌套，利用多列布局組合制作簽名區(qū)樣式……
以上就當拋磚引玉，如果你摸索出了更好的嵌套玩法，可以添加下方微信，然后備注「投稿」將你的草稿分享給TA，創(chuàng)意優(yōu)秀者將會獲贈驚喜福利（案例庫一年或S級組件或騰訊、愛奇藝年卡）！
▲長按掃碼識別
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網(wǎng)址：x.iPaiban.com，復(fù)制網(wǎng)址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊并使用。
新用戶在「新手禮包」可領(lǐng)取3天企業(yè)標準版會員體驗權(quán)，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優(yōu)惠券，每單最高立降500元。
▲長按掃碼識別
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網(wǎng)址：x.iPaiban.com，復(fù)制網(wǎng)址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊并使用。
新用戶在「新手禮包」可領(lǐng)取3天企業(yè)標準版會員體驗權(quán)，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優(yōu)惠券，每單最高立降500元。
● SVG 黑科技交互排版????????
·
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）