效果示范↑

點(diǎn)擊空白處，顯示文字/圖片

1、將菜單欄切換成【專業(yè)版】

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

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

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

要制作點(diǎn)擊空白顯示文字/圖片，我們可以將“空白”想象成第一個(gè)畫(huà)面，點(diǎn)擊后顯示的內(nèi)容作為第二個(gè)畫(huà)面。那么第一步，我們先將第一個(gè)畫(huà)面所有內(nèi)容清空。

然后增加一頁(yè)畫(huà)面，然后將鼠標(biāo)點(diǎn)擊新增的這頁(yè)內(nèi)容，我們開(kāi)始編輯第二頁(yè)的內(nèi)容。

類型的選擇，如果點(diǎn)擊空白后想要出現(xiàn)圖片，那么選擇圖片；想要出現(xiàn)文字，那么點(diǎn)擊文本。

我們先示范顯示文本的效果。

橫向、縱向百分比設(shè)置：定位文字方位

文字內(nèi)容：輸入后支持單行顯示

文字粗細(xì)：默認(rèn)0，數(shù)值越大文字越粗

文字大小：默認(rèn)18PX，數(shù)值越大，文字越大

文字顏色：與135編輯器一致

背景：可設(shè)置背景顏色

第二頁(yè)編輯完畢之后，我們回到第一頁(yè)，也就是空白頁(yè)。設(shè)置一下動(dòng)畫(huà)觸發(fā)效果。

動(dòng)畫(huà)觸發(fā)：

點(diǎn)擊是需要讀者點(diǎn)擊后，才出現(xiàn)下一頁(yè)畫(huà)面效果。

自動(dòng)是打開(kāi)文章時(shí)，自動(dòng)開(kāi)始進(jìn)行播放。

這里我們選擇【點(diǎn)擊】，當(dāng)讀者點(diǎn)擊了空白處后，才會(huì)浮現(xiàn)下一頁(yè)的內(nèi)容。

動(dòng)畫(huà)類型：

無(wú)動(dòng)畫(huà)：無(wú)任何效果

字幕：類似彈幕效果可以設(shè)置上下左右四個(gè)方向

快閃：快速切換閃動(dòng)

淡入：逐漸顯示

淡出：逐漸消失

移入移出：當(dāng)前畫(huà)面向上下左右四個(gè)方向移出或者移入

展開(kāi)：只允許最后一屏設(shè)置展開(kāi)效果，畫(huà)面向下展開(kāi)

這里我們要選擇【淡出】這個(gè)效果，第一畫(huà)面空白頁(yè)淡出，然后展示第二頁(yè)內(nè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è)置完畢后，點(diǎn)擊右上角【完成】，我們回到編輯器查看【手機(jī)預(yù)覽效果】

我們繼續(xù)演示其他的效果。假設(shè)SVG效果要顯示多行文本，在文字內(nèi)容那里不能按回車(chē)鍵折行怎么辦？這里我們先在第二頁(yè)畫(huà)面原本有的一行文字下面，增加一行文字。

調(diào)整第二行文字的內(nèi)容。

將第一行文字和第二行文字的縱向比例調(diào)整一下，不要讓兩行文字重疊在一起。

經(jīng)過(guò)上述的調(diào)整后，第二頁(yè)的畫(huà)面就是下圖這樣了！其他的步驟和第一個(gè)教程一樣，制作完成后，用手機(jī)預(yù)覽即可！

點(diǎn)擊空白要顯示圖片，先將第二個(gè)畫(huà)面的類型設(shè)置改為【圖片】。

在編輯區(qū)內(nèi)，上傳一張圖片。

畫(huà)布默認(rèn)是1:1的，如果這張圖沒(méi)有鋪滿整個(gè)畫(huà)面，可以手動(dòng)調(diào)整畫(huà)面比例。

圖片區(qū)域：

包含是指圖片如果無(wú)法剛好鋪滿畫(huà)布，則留出一定空白。

覆蓋是指圖片如果無(wú)法剛好鋪滿畫(huà)布，則會(huì)自動(dòng)裁去超出的部分。

以上就是整個(gè)操作微信公眾號(hào)SVG效果制作了，是不是感覺(jué)步驟操作起來(lái)很簡(jiǎn)單，只要你1、大致了解135編輯器SVG編輯的功能 2、理解畫(huà)面先后呈現(xiàn)什么，一頁(yè)一頁(yè)做出來(lái)就可以了！掌握一兩種效果后，開(kāi)動(dòng)你的腦筋，發(fā)動(dòng)你的創(chuàng)意，你可以做出無(wú)數(shù)個(gè)好玩的、有創(chuàng)意的公眾號(hào)推文！