自定義SVG布局編輯 - 點擊文字切換文字



    效果示范↑


    1,準備工作




    在基礎布局,找到SVG布局,點擊樣式,放置在135編輯器編輯區(qū)內。




    3、在編輯區(qū)內點擊樣式,在彈出的菜單欄中點擊【SVG布局動畫】




    2,制作點擊文字切換文字



    制作這個效果前,我們先對SVG動畫設置版面有個初步了解。大家可以點擊下面圖片,詳細查看。




    要制作這個效果,需要設置多個頁面,每頁一段文字。我們先編輯第一個頁面顯示的內容。






    橫向、縱向百分比設置:定位文字方位

    文字內容:輸入后支持單行顯示

    文字粗細:默認0,數(shù)值越大文字越粗

    文字大小:默認18,數(shù)值越大,文字越大

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

    背景:可設置背景顏色

    然后設置動畫效果,這里我們可以選擇點擊向左移出,0.5秒。


    動畫觸發(fā):

    點擊是需要讀者點擊后,才出現(xiàn)下一頁畫面效果。

    自動是打開文章時,自動開始進行播放。


    動畫類型:

    無動畫:無任何效果

    字幕:類似彈幕效果可以設置上下左右四個方向

    快閃:快速切換閃動

    淡入:逐漸顯示

    淡出:逐漸消失

    移入移出:當前畫面向上下左右四個方向移出或者移入

    展開:只允許最后一屏設置展開效果,畫面向下展開


    時間設置:

    動畫時長:動畫能持續(xù)多久時間,時間設置得越久,動作就越緩慢

    動畫延遲:讀者觸發(fā)了這個動畫效果后,多久開始執(zhí)行這個效果。時間設置得越久,等待得越久。





    image.png


    設置好頁面一之后,我們點擊頁面右側的加號,復制當前頁。








    第二頁,調整文字內容,和動畫方向。后面的頁面以此類推,你可以將每一頁的文字、背景色、動畫方向都調整得不一樣。要注意,最后一頁要設置為無動畫。




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




    -END -

    如果您的疑問尚未被解決

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

    我們誠摯邀請您給135編輯器提供【意見和建議】

    微信關注135編輯器 ID:editor135 

    獲取更多排版干貨知識

    3c7dd0361f5fbc8093bd8054615f91bb.png

評價此內容
有幫助
無幫助
感謝反饋,請問還有其他建議嗎? (選填)