自定義SVG布局編輯 - 點擊空白顯示文字/圖片
效果示范↑
1，準(zhǔn)備工作
1、將菜單欄切換成【專業(yè)版】
2、在基礎(chǔ)布局，找到SVG布局，點擊樣式，放置在135編輯器編輯區(qū)內(nèi)。
3、在編輯區(qū)內(nèi)點擊樣式，在彈出的菜單欄中點擊【SVG布局動畫】
2，制作點擊空白，顯示文字/圖片
制作點擊空白顯示文字/圖片這個效果前，我們先對SVG動畫設(shè)置版面有個初步了解。大家可以點擊下面圖片，詳細(xì)查看。
要制作點擊空白顯示文字/圖片，我們可以將“空白”想象成第一個畫面，點擊后顯示的內(nèi)容作為第二個畫面。那么第一步，我們先將第一個畫面所有內(nèi)容清空。
然后增加一頁畫面，然后將鼠標(biāo)點擊新增的這頁內(nèi)容，我們開始編輯第二頁的內(nèi)容。
類型的選擇，如果點擊空白后想要出現(xiàn)圖片，那么選擇圖片；想要出現(xiàn)文字，那么點擊文本。
3，顯示文本
我們先示范顯示文本的效果。
橫向、縱向百分比設(shè)置：定位文字方位
文字內(nèi)容：輸入后支持單行顯示
文字粗細(xì)：默認(rèn)0，數(shù)值越大文字越粗
文字大?。耗J(rèn)18PX，數(shù)值越大，文字越大
文字顏色：與135編輯器一致
背景：可設(shè)置背景顏色
第二頁編輯完畢之后，我們回到第一頁，也就是空白頁。設(shè)置一下動畫觸發(fā)效果。
動畫觸發(fā)：
點擊是需要讀者點擊后，才出現(xiàn)下一頁畫面效果。
自動是打開文章時，自動開始進(jìn)行播放。
這里我們選擇【點擊】，當(dāng)讀者點擊了空白處后，才會浮現(xiàn)下一頁的內(nèi)容。
動畫類型：
無動畫：無任何效果
字幕：類似彈幕效果可以設(shè)置上下左右四個方向
快閃：快速切換閃動
淡入：逐漸顯示
淡出：逐漸消失
移入移出：當(dāng)前畫面向上下左右四個方向移出或者移入
展開：只允許最后一屏設(shè)置展開效果，畫面向下展開
這里我們要選擇【淡出】這個效果，第一畫面空白頁淡出，然后展示第二頁內(nèi)容。
時間設(shè)置：
動畫時長：動畫能持續(xù)多久時間，時間設(shè)置得越久，動作就越緩慢
動畫延遲：讀者觸發(fā)了這個動畫效果后，多久開始執(zhí)行這個效果。時間設(shè)置得越久，等待得越久。
所有設(shè)置完畢后，點擊右上角【完成】，我們回到編輯器查看【手機(jī)預(yù)覽效果】
4，顯示多行文本
我們繼續(xù)演示其他的效果。假設(shè)要顯示多行文本，在文字內(nèi)容那里不能按回車鍵折行怎么辦？這里我們先在第二頁畫面原本有的一行文字下面，增加一行文字。
調(diào)整第二行文字的內(nèi)容。
將第一行文字和第二行文字的縱向比例調(diào)整一下，不要讓兩行文字重疊在一起。
經(jīng)過上述的調(diào)整后，第二頁的畫面就是下圖這樣了！其他的步驟和第一個教程一樣，制作完成后，用手機(jī)預(yù)覽即可！
5，顯示圖片
點擊空白要顯示圖片，先將第二個畫面的類型設(shè)置改為【圖片】。
在編輯區(qū)內(nèi)，上傳一張圖片。
畫布默認(rèn)是1:1的，如果這張圖沒有鋪滿整個畫面，可以手動調(diào)整畫面比例。
圖片區(qū)域：
包含是指圖片如果無法剛好鋪滿畫布，則留出一定空白。
覆蓋是指圖片如果無法剛好鋪滿畫布，則會自動裁去超出的部分。
其實整個操作步驟很簡單，只要你1、大致了解135編輯器SVG編輯的功能 2、理解畫面先后呈現(xiàn)什么，一頁一頁做出來就可以了！掌握一兩種效果后，開動你的腦筋，發(fā)動你的創(chuàng)意，你可以做出無數(shù)個好玩的、有創(chuàng)意的公眾號推文！
- END -
如果您的疑問尚未被解決
請點擊135編輯器右下角【聯(lián)系客服】
我們誠摯邀請您給135編輯器提供【意見和建議】
