小人、汽車跟著展開走，這篇 City Walk 圖文是怎么制作的？
City Walk 最近超火，能夠體現 City Walk 主題的排版效果也跟著火起來了。
上周為大家整理了 City Walk 相關創意圖文案例合集，里面潤百顏案例中的一個效果很受歡迎，但很多小伙伴不知道是怎么實現的。
我們這里再來體驗一下：
*素材來自潤百顏《加入夏日CITY WALK，走來走去找快樂！》
按提示點擊圖片，圖文便自動層層展開，有意思的是，本來覆蓋在展開前圖片上的一個小人也跟著展開向下移動。正是這個小人的交互，完美契合了 City Walk 的主題。
點擊后自動層層展開的效果，在 iPaiban Pro 黑科技編輯器中有對應組件「點擊+自動層層展開」（編號：11369），那小人跟隨展開移動的效果怎么制作的？
其實超簡單，在「點擊+自動層層展開」組件后面再添加一個「遮罩」組件（編號：10829）就可以啦！
聽到「遮罩」很多熟悉使用 iPaiban Pro 的小伙伴一下就明白了。
因為「遮罩」組件在圖文中高度為0，遮罩圖片會覆蓋在前面組件上，成為前面組件的前景圖。
這里我們在「遮罩」組件上傳那張透明底的小人圖片，小人就會覆蓋在前面的展開組件上，點擊后也會跟著展開移動。
還不明白沒關系，下面一起看下制作教程吧：
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組件：點擊+自動層層展開
編號：11369（組件）
組件：遮罩
編號：10829（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組件」按鈕，在「點擊」分類中找到「點擊+自動層層展開」組件，或者直接搜索組件編號11369，點擊選擇。
第2步：上傳圖片素材
點擊頁面右側「+」號批量上傳層層展開素材圖。其中第1張為展開起始圖，所有圖片的寬度需保持一致。
第3步：調整觸發區域
雙擊編輯區上傳的圖片，調整點擊觸發區。紅色色塊即代表觸發區域，拖動紅色色塊到指定位置，注意不可超出圖片邊緣。
第4步：調整動畫參數
在頁面右側偏下位置，可分別調整每張圖片的停留時間及每次展開的動畫時間。
第5步：添加「遮罩」圖片
在左側組件區搜索選擇「遮罩」組件（編號：10829），然后上傳跟隨展開移動的小人圖片。注意該圖片需為透明底。
第6步：導入公眾號后臺
點擊最右側「預覽草稿」可隨時預覽效果，預覽效果滿意后點擊右側「同步至微信后臺」就可以了。
使用同步功能不用頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼預覽在公眾號的效果。
如需局部導入可參考：《iPaiban Pro小助手安裝和使用教程》
不只層層展開和 City Walk，各種展開和主題，與「遮罩」組件結合使用，都能達到不錯的效果。
比如寶馬這篇汽車跟隨展開移動，使用「點擊展開」組合（編號：10307）加「遮罩」就可以實現。
*素材來自寶馬中國《THE 8 | 不凡之旅》
組合：點擊展開
編號：10307（組合）
組件：遮罩
編號：10829（組件）
發揮想象力去創作吧！
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可注冊，編輯器1500+組件/組合現已全部支持免費試用了。
新用戶在「新手禮包」可領取3天企業標準版會員免費商用，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優惠券，每單最高立降500元。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）