“這種物體跟隨展開移動的效果，是怎么做的？”
「我找到了案例下方推薦的交互模板，但實現不了案例的效果啊？」
在昨天的立秋案例合集中，有小伙伴想要制作「廣藥白云山」的案例效果，如下所示：
一個人物位于展開之前，點擊按鈕，人物跟隨圖文展開向前移動。
案例下方推薦的交互模板為「點擊展開」組合，如果只是使用這個組合，確實實現不了案例的效果，因為你忽略了一個非常關鍵的設置——間距。
類似的效果老沙很久之前也簡單提到過，當時使用的是「寶馬中國」的一個案例，今天咱們再用這個案例給大家詳細講講這種物體跟隨展開移動的效果到底是怎么實現的。
先橫置手機，點擊體驗一下：
一起看下教程：
工具：iPaiban Pro 黑科技編輯器，網址：x.iPaiban.com組合：點擊展開(有觸發區)編號：10051（組合）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組合」按鈕，在「花樣展開」分類中找到「點擊展開(有觸發區)」組合，或者直接搜索組合編號10051，點擊選擇。
第2步：上傳展開前和展開后的圖片
記住，什么物體跟隨展開移動，那么這個物體就是位于展開之外的，和展開組合沒有關系，寶馬案例中跟隨展開移動的是汽車，不屬于展開組合中的圖片。
展開前和展開后的圖片分別為：
我們在「展開后」區域嵌套一個「全能無縫圖」組件，然后將上方兩張圖片分別上傳到「展開前」和「展開后」區域，如下所示：
第3步：調整觸發區域和展開時間
雙擊展開前圖片，拖動紅色色塊調整點擊觸發的區域。
點擊右側紅色三角形，調整展開時長。
點擊「預覽組合」可預覽展開效果，根據效果隨時調整展開時長。
第4步：設置跟隨移動的物體
退出組合編輯模式，然后添加一個「全能無縫圖」組件，上傳跟隨移動的物體圖片。本案例中上傳背景透明的汽車圖片。
這里是最為關鍵的一步：
如圖所示，點擊「邊距」按鈕，給汽車圖片設置一個負數的外邊距，此時會發現圖片向上覆蓋到了展開圖上。外邊距的具體數值根據覆蓋范圍來定。
到這里，一個物體跟隨展開移動的效果就實現了，后面需要什么效果繼續添加即可，不會影響前面的展開效果。
第5步：導入公眾號后臺
點擊頁面最右側「預覽草稿」可掃碼預覽效果，效果滿意后繼續點擊「導入微信后臺」就能開始導到公眾號了。
導入時使用 iPaiban Pro 小助手更方便哦，最新v2.0版本的小助手還支持一鍵打包下載圖文圖片素材，非常方便，安裝教程戳：《iPaiban Pro小助手v2.0來啦！》
視頻教程：
「間距」功能的更多用法：《去縫、兩端縮進……用一個功能就能實現！》
iPaiban Pro 的更多進階技巧：《展開套展開、左滑套右滑…編輯器還能這樣騷操作？！》
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：x.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊并使用。
新用戶在「新手禮包」可領取3天企業標準版會員體驗權，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優惠券，每單最高立降500元。
● SVG 黑科技交互排版????????
·
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）