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