自定義SVG布局編輯 - 九宮格答題
效果示范↑
1，準(zhǔn)備工作
在基礎(chǔ)布局，找到一行三個(gè)基礎(chǔ)布局，點(diǎn)擊樣式，放置在135編輯器編輯區(qū)內(nèi)。九宮格其實(shí)就是由三個(gè)一行三列的基礎(chǔ)布局組合而來(lái)的。這里我們先編輯其中一個(gè)，后面兩行直接復(fù)制粘貼出來(lái)就可以了。
雙擊第一個(gè)空白處，然后點(diǎn)擊一個(gè)SVG布局，放置其中。然后在菜單欄中選擇【SVG布局動(dòng)畫】。
2，制作九宮格答題樣式
制作這個(gè)效果前，我們先對(duì)SVG動(dòng)畫設(shè)置版面有個(gè)初步了解。大家可以點(diǎn)擊下面圖片，詳細(xì)查看。
要制作點(diǎn)擊答題這個(gè)效果，需要設(shè)置兩個(gè)頁(yè)面。一個(gè)是點(diǎn)擊前的，一個(gè)是點(diǎn)擊后的。
頁(yè)面一是點(diǎn)擊前的顯示效果，我們將文字、顏色、文字大小做一個(gè)調(diào)整。如下圖：
橫向、縱向百分比設(shè)置：定位文字方位
文字內(nèi)容：輸入后支持單行顯示
文字粗細(xì)：默認(rèn)0，數(shù)值越大文字越粗
文字大?。耗J(rèn)18，數(shù)值越大，文字越大
文字顏色：與135編輯器一致
背景：可設(shè)置背景顏色
然后設(shè)置動(dòng)畫效果，這里我們可以選擇向上移出，1秒
動(dòng)畫觸發(fā)：
點(diǎn)擊是需要讀者點(diǎn)擊后，才出現(xiàn)下一頁(yè)畫面效果。
自動(dòng)是打開(kāi)文章時(shí)，自動(dòng)開(kāi)始進(jìn)行播放。
動(dòng)畫類型：
無(wú)動(dòng)畫：無(wú)任何效果
字幕：類似彈幕效果可以設(shè)置上下左右四個(gè)方向
快閃：快速切換閃動(dòng)
淡入：逐漸顯示
淡出：逐漸消失
移入移出：當(dāng)前畫面向上下左右四個(gè)方向移出或者移入
展開(kāi)：只允許最后一屏設(shè)置展開(kāi)效果，畫面向下展開(kāi)
時(shí)間設(shè)置：
動(dòng)畫時(shí)長(zhǎng)：動(dòng)畫能持續(xù)多久時(shí)間，時(shí)間設(shè)置得越久，動(dòng)作就越緩慢
動(dòng)畫延遲：讀者觸發(fā)了這個(gè)動(dòng)畫效果后，多久開(kāi)始執(zhí)行這個(gè)效果。時(shí)間設(shè)置得越久，等待得越久。
設(shè)置好頁(yè)面一之后，我們點(diǎn)擊頁(yè)面右側(cè)的加號(hào)，復(fù)制當(dāng)前頁(yè)。
在第二頁(yè)，我們要把答案輸入進(jìn)去。動(dòng)畫類型選擇無(wú)動(dòng)畫即可。
設(shè)置完畢后，點(diǎn)擊右上角的【預(yù)覽】查看整體效果。預(yù)覽無(wú)誤后，點(diǎn)擊完成即可。
接下來(lái)這個(gè)步驟比較重要。我們將第一個(gè)布局復(fù)制下來(lái)，然后雙擊旁邊的格子將內(nèi)容粘貼上去。一排三個(gè)都做好后，將第一排整體復(fù)制下來(lái)，再在下方粘貼一排。多余的空格刪掉就可以了。
粘貼完畢后，九宮格雛形就有了。然后把里面的文字內(nèi)容在動(dòng)畫面板里一一調(diào)整好。
此外，你也可以對(duì)九宮格做更多操作，例如添加邊框。或者將文字內(nèi)容替換成圖片等。
-END -
如果您的疑問(wèn)尚未被解決
請(qǐng)點(diǎn)擊135編輯器右下角【聯(lián)系客服】
我們誠(chéng)摯邀請(qǐng)您給135編輯器提供【意見(jiàn)和建議】
微信關(guān)注135編輯器 ID：editor135
獲取更多排版干貨知識(shí)
