自定義SVG布局編輯 - 答題類 問卷 考試類
效果示范↑
1,準(zhǔn)備工作
(1),將菜單欄切換成【專業(yè)版】
(2),在基礎(chǔ)布局,找到SVG布局,點擊樣式,放置在135編輯器編輯區(qū)內(nèi)。
(3),在編輯區(qū)內(nèi)點擊樣式,在彈出的菜單欄中點擊【SVG布局動畫】
2,制作答題類樣式
制作這個效果前,我們先對SVG動畫設(shè)置版面有個初步了解。大家可以點擊下面圖片,詳細(xì)查看。
要制作點擊答題類排版,需要設(shè)置兩個頁面。一個是點擊前的,一個是點擊后的。
頁面一是點擊前的顯示效果,我們將文字、顏色、文字大小做一個調(diào)整。如下圖:
橫向、縱向百分比設(shè)置:定位文字方位
文字內(nèi)容:輸入后支持單行顯示
文字粗細(xì):默認(rèn)0,數(shù)值越大文字越粗
文字大小:默認(rèn)18,數(shù)值越大,文字越大
文字顏色:與135編輯器一致
背景:可設(shè)置背景顏色
然后設(shè)置動畫效果,這里我們可以選擇淡出、1秒
動畫觸發(fā):
點擊是需要讀者點擊后,才出現(xiàn)下一頁畫面效果。
自動是打開文章時,自動開始進(jìn)行播放。
動畫類型:
無動畫:無任何效果
字幕:類似彈幕效果可以設(shè)置上下左右四個方向
快閃:快速切換閃動
淡入:逐漸顯示
淡出:逐漸消失
移入移出:當(dāng)前畫面向上下左右四個方向移出或者移入
展開:只允許最后一屏設(shè)置展開效果,畫面向下展開
時間設(shè)置:
動畫時長:動畫能持續(xù)多久時間,時間設(shè)置得越久,動作就越緩慢
動畫延遲:讀者觸發(fā)了這個動畫效果后,多久開始執(zhí)行這個效果。時間設(shè)置得越久,等待得越久。
設(shè)置好頁面一之后,我們點擊頁面右側(cè)的加號,復(fù)制當(dāng)前頁。
在第二頁,我們要把答案輸入進(jìn)去。動畫類型選擇無動畫即可。
接著我們將畫布寬高比設(shè)置一下,默認(rèn)情況下寬高比為1:1,案例中選項是長方形的,我們可以將寬高比設(shè)置為100:20。
設(shè)置完畢后,點擊右上角的【預(yù)覽】查看整體效果。預(yù)覽無誤后,點擊完成即可。
由于這道題目,我們設(shè)置了三個選項,那么我們繼續(xù)編輯后面兩個。我們回到編輯器頁面,將選項A進(jìn)行復(fù)制,再在下方粘貼出來。刪掉多余的部分。
回到SVG動畫設(shè)置中,繼續(xù)編輯選項B,只要將文字內(nèi)容替換掉即可。選項C也是同樣的原理,復(fù)制、粘貼出來。唯一不同的是,在案例中我們將選項C設(shè)置為正確答案,那么在選項C的第二頁,我們要將文字內(nèi)容“錯誤”改成“正確”,并且換一個背景色。
除此之外,我們還可以對這個答題樣式設(shè)置整體的寬度比例,以及邊框。這個根據(jù)自己的喜好去設(shè)置就可以了。
-END -
如果您的疑問尚未被解決
請點擊135編輯器右下角【聯(lián)系客服】
我們誠摯邀請您給135編輯器提供【意見和建議】
微信關(guān)注135編輯器 ID:editor135
獲取更多排版干貨知識