自定義SVG布局編輯 - 點擊展開

    錄制_2024_05_31_10_26_50_602.gif

    效果示范↑

    點擊后，展開畫面

    1，準備工作

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


    image.png


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


    image.png

    image.png


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


    image.png


    注意：在制作這個效果前，你先準備好點擊后展開的文章內(nèi)容。并保存在【我的文章】里。


    2，制作點擊展開效果


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


    image.png


    要制作這個效果，第一頁我們把類型設(shè)置為圖片，上傳點擊前的圖片


    image.png



    image.png


    由于這張圖比例和SVG默認的比例是不同的，導致兩邊有多余的白色，我們可以條則會那個一下寬高比，使之看起來差不多即可。圖片區(qū)域，選擇覆蓋。


    image.png


    圖片區(qū)域：

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

    覆蓋是指圖片如果無法剛好鋪滿畫布，則會自動裁去超出的部分。


    然后設(shè)置動畫效果為展開。


    image.png


    點擊預覽/編輯圖文-編輯圖文

    image.png

    在這里會調(diào)用出一個系統(tǒng)編輯器，我們要將事先準備好的文章打開。


    image.png

    完成編輯后，你可以調(diào)整動畫時長，也就是展開這篇文章所需要的時間。數(shù)值越大，動作越慢。


    image.png


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


    image.png



    -END -

    如果您的疑問尚未被解決

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

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

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

    獲取更多排版干貨知識

    3c7dd0361f5fbc8093bd8054615f91bb.png

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