如何在滑動到一張GIF時正好播放？
讓GIF跟隨閱讀播放，閱讀體驗會高出一截。
那么該如何實現這種效果？
控制GIF播放，之前講過兩種方法，一個是點擊播放，一個是劃動播放，注意是劃動不是滑動。
點擊播放GIF使用的是 iPaiban Pro 編輯器的「點擊-切換GIF動圖」組件（編號：10086），點擊試試：
劃動播放GIF使用的是 iPaiban Pro 編輯器的「手勢-切換GIF動圖」組件（編號：10122），在圖片上劃一下：
制作這兩種效果準備的素材一樣，都是需要GIF的第一幀圖片和整張GIF。
GIF播放次數有兩種，一種是單次播放，一種是循環播放，受控制播放的GIF一般選擇單次播放的。Ps導出GIF時可以設置播放的次數。
我們通過點擊和劃動這兩種不同的觸發方式來讓第一幀圖片切換到整張GIF，當切換的時間足夠快（0.1s），就有了一種播放GIF的效果。
但是，無論點擊還是劃動，都需要引導讀者刻意的進行觸發操作，而想讓讀者滑動到一張GIF正好播放，就需要另一種觸發方式——觸摸。
下面左邊是點擊播放GIF，右邊是觸摸播放GIF，大家可以感受下兩者的不同。
可以發現，右側GIF只要手指輕輕碰到就會播放，使用這種方式我們在閱讀圖文時就會有GIF跟隨播放的感覺了。
「平安人壽」的很多圖文都使用了這種效果，大家可以點擊鏈接進原文體驗下。
制作時同樣需要準備好GIF的第一幀圖片和整張GIF，下面是詳細教程。
工具：iPaiban Pro黑科技編輯器，網址：x.iPaiban.com
組件：特殊-GIF動圖跟隨閱讀播放
編號：10052（組件）
第1步：選擇組件
點擊編輯器左側「組件」按鈕，在「特殊」分類中找到「特殊-GIF動圖跟隨閱讀播放」組件，或者直接搜索編號10052，點擊選擇。
第2步：上傳圖片素材
點擊第1個「換圖」按鈕上傳GIF的第一幀圖片，點擊第2個「換圖」按鈕上傳整張GIF。
第3步：調整觸發區域和延遲觸發時間
雙擊編輯區的圖片，在彈出的窗口中紅色色塊表示觸發區域，通過拖動可任意調整位置和大小，一般覆蓋整張圖片但不要超出圖片邊緣。
延遲觸發時間一般為0即可。如果GIF高度較長，為避免讀者觸發后來不及看到后面的GIF播放，可以適當增加延遲觸發時間。
點擊右側「預覽草稿」可隨時預覽效果，根據效果隨時進行調整。
第4步：導入公眾號后臺
效果滿意后繼續點擊「導入微信后臺」就能開始導到公眾號了。
導入時使用 iPaiban Pro 小助手更方便哦，最新v2.0版本的小助手還支持一鍵打包下載圖文圖片素材，非常方便，安裝教程戳：《iPaiban Pro小助手v2.0來啦！》
好的標題可以獲得更多的推薦及關注者
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：x.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊并使用。
新用戶在「新手禮包」可領取3天企業標準版會員體驗權，以及22個常用必備組件的大禮包（1年）哦。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）