自定義SVG布局編輯 - 點(diǎn)擊展開(kāi)
效果示范↑
點(diǎn)擊后，展開(kāi)畫面
1，準(zhǔn)備工作
1、將菜單欄切換成【專業(yè)版】
2、在基礎(chǔ)布局，找到SVG布局，點(diǎn)擊樣式，放置在135編輯器編輯區(qū)內(nèi)。
3、在編輯區(qū)內(nèi)點(diǎn)擊樣式，在彈出的菜單欄中點(diǎn)擊【SVG布局動(dòng)畫】
注意：在制作這個(gè)效果前，你先準(zhǔn)備好點(diǎn)擊后展開(kāi)的文章內(nèi)容。并保存在【我的文章】里。
2，制作點(diǎn)擊展開(kāi)效果
制作這個(gè)效果前，我們先對(duì)SVG動(dòng)畫設(shè)置版面有個(gè)初步了解。大家可以點(diǎn)擊下面圖片，詳細(xì)查看。
要制作這個(gè)效果，第一頁(yè)我們把類型設(shè)置為圖片，上傳點(diǎn)擊前的圖片
由于這張圖比例和SVG默認(rèn)的比例是不同的，導(dǎo)致兩邊有多余的白色，我們可以條則會(huì)那個(gè)一下寬高比，使之看起來(lái)差不多即可。圖片區(qū)域，選擇覆蓋。
圖片區(qū)域：
包含是指圖片如果無(wú)法剛好鋪滿畫布，則留出一定空白。
覆蓋是指圖片如果無(wú)法剛好鋪滿畫布，則會(huì)自動(dòng)裁去超出的部分。
然后設(shè)置動(dòng)畫效果為展開(kāi)。
點(diǎn)擊預(yù)覽/編輯圖文-編輯圖文
在這里會(huì)調(diào)用出一個(gè)系統(tǒng)編輯器，我們要將事先準(zhǔn)備好的文章打開(kāi)。
完成編輯后，你可以調(diào)整動(dòng)畫時(shí)長(zhǎng)，也就是展開(kāi)這篇文章所需要的時(shí)間。數(shù)值越大，動(dòng)作越慢。
設(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í)
