自定義SVG布局編輯 - 點(diǎn)擊文字切換文字



    效果示范↑


    1,準(zhǔn)備工作




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




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




    2,制作點(diǎn)擊文字切換文字



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




    要制作這個(gè)效果,需要設(shè)置多個(gè)頁(yè)面,每頁(yè)一段文字。我們先編輯第一個(gè)頁(yè)面顯示的內(nèi)容。






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

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

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

    文字大?。耗J(rèn)18,數(shù)值越大,文字越大

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

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

    然后設(shè)置動(dòng)畫(huà)效果,這里我們可以選擇點(diǎn)擊向左移出,0.5秒。


    動(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è)置得越久,等待得越久。





    image.png


    設(shè)置好頁(yè)面一之后,我們點(diǎn)擊頁(yè)面右側(cè)的加號(hào),復(fù)制當(dāng)前頁(yè)。








    第二頁(yè),調(diào)整文字內(nèi)容,和動(dòng)畫(huà)方向。后面的頁(yè)面以此類(lèi)推,你可以將每一頁(yè)的文字、背景色、動(dòng)畫(huà)方向都調(diào)整得不一樣。要注意,最后一頁(yè)要設(shè)置為無(wú)動(dòng)畫(huà)。




    設(shè)置完畢后,點(diǎn)擊右上角的【預(yù)覽】查看整體效果。預(yù)覽無(wú)誤后,點(diǎn)擊完成即可。如果需要發(fā)送到手機(jī)上預(yù)覽,可以用編輯器的【手機(jī)預(yù)覽】功能。




    -END -

    如果您的疑問(wèn)尚未被解決

    請(qǐng)點(diǎn)擊135編輯器右下角【聯(lián)系客服】

    我們誠(chéng)摯邀請(qǐng)您給135編輯器提供【意見(jiàn)和建議】

    微信關(guān)注135編輯器 ID:editor135 

    獲取更多排版干貨知識(shí)

    3c7dd0361f5fbc8093bd8054615f91bb.png

評(píng)價(jià)此內(nèi)容
有幫助
無(wú)幫助
感謝反饋,請(qǐng)問(wèn)還有其他建議嗎? (選填)