自定義SVG布局編輯 - 點(diǎn)擊文字切換文字
效果示范↑
1，準(zhǔn)備工作
在基礎(chǔ)布局，找到SVG布局，點(diǎn)擊樣式，放置在135編輯器編輯區(qū)內(nèi)。
3、在編輯區(qū)內(nèi)點(diǎn)擊樣式，在彈出的菜單欄中點(diǎn)擊【SVG布局動畫】
2，制作點(diǎn)擊文字切換文字
制作這個(gè)效果前，我們先對SVG動畫設(shè)置版面有個(gè)初步了解。大家可以點(diǎn)擊下面圖片，詳細(xì)查看。
要制作這個(gè)效果，需要設(shè)置多個(gè)頁面，每頁一段文字。我們先編輯第一個(gè)頁面顯示的內(nèi)容。
橫向、縱向百分比設(shè)置：定位文字方位
文字內(nèi)容：輸入后支持單行顯示
文字粗細(xì)：默認(rèn)0，數(shù)值越大文字越粗
文字大?。耗J(rèn)18，數(shù)值越大，文字越大
文字顏色：與135編輯器一致
背景：可設(shè)置背景顏色
然后設(shè)置動畫效果，這里我們可以選擇點(diǎn)擊向左移出，0.5秒。
動畫觸發(fā)：
點(diǎn)擊是需要讀者點(diǎn)擊后，才出現(xiàn)下一頁畫面效果。
自動是打開文章時(shí)，自動開始進(jìn)行播放。
動畫類型：
無動畫：無任何效果
字幕：類似彈幕效果可以設(shè)置上下左右四個(gè)方向
快閃：快速切換閃動
淡入：逐漸顯示
淡出：逐漸消失
移入移出：當(dāng)前畫面向上下左右四個(gè)方向移出或者移入
展開：只允許最后一屏設(shè)置展開效果，畫面向下展開
時(shí)間設(shè)置：
動畫時(shí)長：動畫能持續(xù)多久時(shí)間，時(shí)間設(shè)置得越久，動作就越緩慢
動畫延遲：讀者觸發(fā)了這個(gè)動畫效果后，多久開始執(zhí)行這個(gè)效果。時(shí)間設(shè)置得越久，等待得越久。
設(shè)置好頁面一之后，我們點(diǎn)擊頁面右側(cè)的加號，復(fù)制當(dāng)前頁。
第二頁，調(diào)整文字內(nèi)容，和動畫方向。后面的頁面以此類推，你可以將每一頁的文字、背景色、動畫方向都調(diào)整得不一樣。要注意，最后一頁要設(shè)置為無動畫。
設(shè)置完畢后，點(diǎn)擊右上角的【預(yù)覽】查看整體效果。預(yù)覽無誤后，點(diǎn)擊完成即可。如果需要發(fā)送到手機(jī)上預(yù)覽，可以用編輯器的【手機(jī)預(yù)覽】功能。
-END -
如果您的疑問尚未被解決
請點(diǎn)擊135編輯器右下角【聯(lián)系客服】
我們誠摯邀請您給135編輯器提供【意見和建議】
微信關(guān)注135編輯器 ID：editor135
獲取更多排版干貨知識
