神武八荒一颗小说,梦入神机,好看的玄幻小说

暫無(wú)搜索結(jié)果！

自定義SVG布局編輯 - 答題類(lèi) 問(wèn)卷考試類(lèi)

錄制_2020_09_23_13_37_13_547.gif

效果示范↑

1，準(zhǔn)備工作

（1），將菜單欄切換成【專(zhuān)業(yè)版】

（2），在基礎(chǔ)布局，找到SVG布局，點(diǎn)擊樣式，放置在135編輯器編輯區(qū)內(nèi)。

（3），在編輯區(qū)內(nèi)點(diǎn)擊樣式，在彈出的菜單欄中點(diǎn)擊【SVG布局動(dòng)畫(huà)】

2，制作答題類(lèi)樣式

制作這個(gè)效果前，我們先對(duì)SVG動(dòng)畫(huà)設(shè)置版面有個(gè)初步了解。大家可以點(diǎn)擊下面圖片，詳細(xì)查看。

要制作點(diǎn)擊答題類(lèi)排版，需要設(shè)置兩個(gè)頁(yè)面。一個(gè)是點(diǎn)擊前的，一個(gè)是點(diǎn)擊后的。

頁(yè)面一是點(diǎn)擊前的顯示效果，我們將文字、顏色、文字大小做一個(gè)調(diào)整。如下圖：

橫向、縱向百分比設(shè)置：定位文字方位
文字內(nèi)容：輸入后支持單行顯示
文字粗細(xì)：默認(rèn)0，數(shù)值越大文字越粗
文字大小：默認(rèn)18，數(shù)值越大，文字越大
文字顏色：與135編輯器一致
背景：可設(shè)置背景顏色

然后設(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è)，我們要把答案輸入進(jìn)去。動(dòng)畫(huà)類(lèi)型選擇無(wú)動(dòng)畫(huà)即可。

接著我們將畫(huà)布寬高比設(shè)置一下，默認(rèn)情況下寬高比為1:1，案例中選項(xiàng)是長(zhǎng)方形的，我們可以將寬高比設(shè)置為100:20。

設(shè)置完畢后，點(diǎn)擊右上角的【預(yù)覽】查看整體效果。預(yù)覽無(wú)誤后，點(diǎn)擊完成即可。

由于這道題目，我們?cè)O(shè)置了三個(gè)選項(xiàng)，那么我們繼續(xù)編輯后面兩個(gè)。我們回到編輯器頁(yè)面，將選項(xiàng)A進(jìn)行復(fù)制，再在下方粘貼出來(lái)。刪掉多余的部分。

回到SVG動(dòng)畫(huà)設(shè)置中，繼續(xù)編輯選項(xiàng)B，只要將文字內(nèi)容替換掉即可。選項(xiàng)C也是同樣的原理，復(fù)制、粘貼出來(lái)。唯一不同的是，在案例中我們將選項(xiàng)C設(shè)置為正確答案，那么在選項(xiàng)C的第二頁(yè)，我們要將文字內(nèi)容“錯(cuò)誤”改成“正確”，并且換一個(gè)背景色。