自定義SVG布局編輯 - 點擊圖片切換圖片（人民日報點亮武漢）
效果示范↑
1，準備工作
在比格設計中將點擊前后的兩張圖片處理一下。
上傳圖片之后，濾鏡中選擇【黑白膠片】。這個圖片處理工具，可以快速將你的圖片進行美化。處理完畢后，我們得到兩張圖片↓
這里灰色是點擊前的效果，彩色的是點擊后的效果。
3、在基礎布局，找到SVG布局，點擊樣式，放置在135編輯器編輯區內。
3、在編輯區內點擊樣式，在彈出的菜單欄中點擊【SVG布局動畫】
2，制作點擊圖片顯示另一張樣式
制作這個效果前，我們先對SVG動畫設置版面有個初步了解。大家可以點擊下面圖片，詳細查看。
要制作這個效果，需要設置兩個頁面。一個是點擊前的，一個是點擊后的。頁面一是點擊前的顯示效果，我們將類型設置為圖片。
點擊畫布中心，上傳一張圖片。
由于這張圖比例和SVG默認的比例是不同的，導致兩邊有多余的白色，我們可以條則會那個一下寬高比，使之看起來差不多即可。案例中，我將寬高比設置為100:175。圖片區域，選擇覆蓋。
圖片區域：
包含是指圖片如果無法剛好鋪滿畫布，則留出一定空白。
覆蓋是指圖片如果無法剛好鋪滿畫布，則會自動裁去超出的部分。
然后設置動畫效果，這里我們可以選擇淡出，1秒
動畫觸發：
點擊是需要讀者點擊后，才出現下一頁畫面效果。
自動是打開文章時，自動開始進行播放。
動畫類型：
無動畫：無任何效果
字幕：類似彈幕效果可以設置上下左右四個方向
快閃：快速切換閃動
淡入：逐漸顯示
淡出：逐漸消失
移入移出：當前畫面向上下左右四個方向移出或者移入
展開：只允許最后一屏設置展開效果，畫面向下展開
時間設置：
動畫時長：動畫能持續多久時間，時間設置得越久，動作就越緩慢
動畫延遲：讀者觸發了這個動畫效果后，多久開始執行這個效果。時間設置得越久，等待得越久。
設置好頁面一之后，我們點擊頁面右側的加號，復制當前頁。
在第二頁，我們點擊刪除圖片，然后替換一張彩色的。并且將動畫類型設置為無動畫。
設置完畢后，點擊右上角的【預覽】查看整體效果。預覽無誤后，點擊完成即可。如果需要發送到手機上預覽，可以用編輯器的【手機預覽】功能。
-END -
如果您的疑問尚未被解決
請點擊135編輯器右下角【聯系客服】
我們誠摯邀請您給135編輯器提供【意見和建議】
微信關注135編輯器 ID：editor135
獲取更多排版干貨知識
