誒？石頭科技的這篇圖文點擊展開后怎么還有文字落下？
「點擊展開」的SVG交互效果很多品牌都在圖文里應用過，那么如何推陳出新，讓普通的展開效果也能出彩吸睛？
石頭科技的這篇圖文《新品｜好輕好用好看，A20 Air 輕盈上市！》或許可以帶給你答案，點擊展開后，圖片上方的文字也隨之落下，更有動態感。
我們先來看下效果：
誒？為什么同樣都是使用了「點擊展開」的SVG交互，石頭科技的這篇圖文里還有文字下落的動效？
▲GIF演示
首先，我們我們通過「iPaiban Pro 小助手瀏覽器插件」來下載素材進行參考學習，可以看到總共有3張靜態圖，3張圖的尺寸一致。
素材展示
其中第1、2張圖是「點擊展開」的素材圖，而第3張透明底的png圖是「遮罩」的素材圖。
這里的素材設計很有巧思，在點擊展開前，第1張圖和第3張圖是重合的，并不會被用戶察覺。隨著點擊展開后高度的延申，遮罩圖才會被展開推動到第2張圖上，有下落的動態感。其實原理和我們之前分享的這篇教程一樣《小人、汽車跟著展開走，這篇 City Walk 圖文是怎么制作的？》。
下面拆解下排版步驟????????，一起看下如何制作的吧。
詳細教程：
工具：iPaiban Pro黑科技編輯器，網址：SVG.iPaiban.com
組合：點擊展開(有觸發區)
編號：10051（組合）
組件：遮罩
編號：10829（組件）
第1步：選擇組合
登錄 iPaiban Pro 黑科技編輯器后，點擊編輯器左側「組合」按鈕，在「花樣展開=基礎展開」分類中找到「點擊展開(有觸發區)」組合，或者直接搜索組合編號10051，點擊選擇。
第2步：進入組合編輯模式
如下所示，點擊「點擊此處配置」，進入組合編輯模式。
在組合編輯模式中，我們需要分別設置展開前和展開后的內容。
第3步：設置展開前內容
上傳圖片：點擊右側換圖上傳圖片，若圖片上傳錯誤，還可點擊換圖進行調整。
第4步：設置觸發區域
雙擊圖片可調整觸發區域，將觸發區域調整至「點擊查看更多」的位置上，然后點擊隱藏觸發區域。
第5步：設置展開后內容
想要設置展開后內容，拖動一個「全能無縫圖」組件到組件位中，然后上傳圖片即可。
第6步：設置展開時長
點擊右側紅色小三角符號，可直接輸入數值設置展開時長。
展開高度一般無需調整，但當大家在手機上預覽時，如果發現展開后有多余的空白或者沒有展現出全部內容，這時候可以通過調整展開高度使其恰好展開。
第7步：退出組合編輯
內容編輯完畢后，我們點擊左上角「保存并退出」編輯模式來到首頁。
第8步：選擇組件
點擊編輯器左側「組件」按鈕，在「特殊」分類中找到「遮罩」組件，或者直接搜索組件編號10829，點擊選擇。
第9步：上傳圖片素材
點擊「換圖」替換遮罩圖。
第10步：導入公眾號后臺
點擊最右側「預覽草稿」掃碼預覽效果，效果滿意后接著點擊「同步至微信后臺」就可以了。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）