“看到哪里，圖片就在看到時恰好移入，可以實現嗎？”
閱讀到什么位置，動效恰好就在閱讀到時播放。
這是很多小伙伴都想要實現的一種高級效果。最常見的一種是GIF動圖跟隨閱讀播放，這個之前跟大家介紹過，詳細戳：《如何在滑動到一張GIF時正好播放？》
今天再向大家介紹一種圖片跟隨閱讀移入文中的效果。
還是先體驗一下智族Lab的這個例子。注意無需點擊，只需手指輕輕觸摸在圖片上，就像我們上下滑動閱讀圖文時觸碰圖片即可：
*素材來自智族Lab《分了，分了，這回真的分了》
組件：觸摸-兩側移入圖片
編號：11912（組件）
你會發現，僅僅是手指觸摸到圖片，兩側圖片就同時移動進來了，放在長圖文中就有了圖片跟隨閱讀移入文中的效果。
再來看突破潤滑油的這個例子，觸摸后兩側圖片還可以交替移入：
*素材來自突破潤滑油《突破海外競技之旅，邀你共赴下一個目的地》
組件：觸摸-兩側移入圖片
編號：11912（組件）
兩側圖片數量不一致也可以，比如一側移入一張圖，另一側移入兩張圖：
*素材來自突破潤滑油《突破海外競技之旅，邀你共赴下一個目的地》
組件：觸摸-兩側移入圖片
編號：11912（組件）
以上效果使用 iPaiban Pro 編輯器的一個組件都可以實現。
下面以突破潤滑油的第1個交互效果為例，一起看下制作教程吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組件：觸摸-兩側移入圖片
編號：11912（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，直接在搜索框中搜索組件編號11912 ，點擊選擇。
第2步：上傳圖片
點擊頁面右側「換圖」按鈕上傳觸摸前圖，點擊頁面右側兩個「+」按鈕分別上傳觸摸后左側移入圖和右側移入圖。
左右兩側移入圖支持上傳多張，兩側圖片數量可以不一致，只上傳一側圖也可以。所有圖片尺寸需保持一致。
第3步：設置動畫時間
拖動滑桿設置「動畫時間」，一般調整為1s。「間隔時間」指兩側圖片間隔移入的時間，間隔時間為0表示兩側圖片同時移入。還可以選擇左右兩側移入圖片的順序「先右后左」或「先左后右」。
第4步：導入公眾號后臺
點擊最右側「預覽草稿」掃碼預覽效果，效果滿意后點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）