追光燈式點擊展開，教程來咯?。ú挥么a）
打開圖文映入眼簾的是一片黑暗，接著按照指引拖動光圈，點擊指定位置圖文伸縮展開。
這是蘭蔻《蘭蔻「發光」劇場 | 夜光行動》一文的SVG交互效果，很多小伙伴覺得好玩有意思。
昨天開啟618活動的推文《開燈，展示！》也使用了該交互：
今天給大家奉上這篇推文教程，分分鐘實現！
我們使用 iPaiban Pro 黑科技編輯器的「追光燈+點擊伸縮式展開」組合（編號：11601）可制作同款效果。
一起看下教程：
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組合：追光燈+點擊伸縮式展開
編號：11601（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組合」按鈕，在「花樣展開」-「追光燈+展開」分類中找到「追光燈+點擊伸縮式展開」組件，或者直接在搜索框中搜索組合編號11601，點擊選擇。
第2步：進入組合編輯模式
點擊「點擊此處配置」，進入組合編輯模式。
在組合編輯模式中，分為展開前和展開后兩塊設置區域。展開前設置圖片追光燈效果，展開后可以任意嵌套各種效果。
第3步：設置「展開前」內容
①點擊「展開前」區域，在右側點擊「換圖」按鈕分別上傳點擊前前景圖、點擊前底圖和點擊后圖片。3張圖片尺寸需保持一致。
光圈圖編輯器將會自動生成，無需上傳。
②雙擊編輯區，調整點擊觸發的區域。
第4步：設置「展開后」內容
「展開后」的內容支持嵌套各種組件，需要什么效果就在左側「組件」分類中找到相應的組件拖動到組件位中，然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片，每需要一個樣式就按照這3步操作：
第5步：設置展開參數
點擊右側紅色小三角，可以設置收縮時長和展開時長。
如果預覽效果發現內容沒有完全展開或者展開過長，可以通過「加減展開高度（px）」進行調整，輸入負數為減小展開高度。
第6步：導入公眾號后臺
內容編輯完畢后，點擊左上角「保存并退出」退出組合編輯模式回到編輯器主頁面。
該效果不支持在編輯器預覽，接著點擊「同步至微信后臺」同步到自己的公眾號就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
如需局部導入可參考：《iPaiban Pro小助手安裝和使用教程》
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可注冊，編輯器1500+組件/組合現已全部支持免費試用了。
新用戶在「新手禮包」可領取3天企業標準版會員免費商用，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優惠券，每單最高立降500元。
2023年6月12-30日618活動買贈福利：
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）