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