1. <strong id="6hpmh"><pre id="6hpmh"></pre></strong>
    <strong id="6hpmh"></strong>

  2. <progress id="6hpmh"></progress>

    公眾號SVG效果教程:實現智族Lab風格圖片滑動移入效果

    學習如何在新媒體內容中添加專業級的圖片動畫效果。本文詳細介紹了使用135編輯器的SVG編輯器功能,通過互動效果組件實現圖片滑動自動觸發移入效果,包括觸摸圖片小元素依次橫向移入和縮小橫向移入效果。掌握這些技巧,讓你的推文更具吸引力。


    朋友們大家好,我是三兒。


    近期有朋友提問,想要在推文中實現PPT動畫圖片左右移入的效果。


    這讓三兒想到了之前GQ實驗室(現更名為智族Lab)曾做過的一篇文章。


    點我查看原文


    這個效果135能實現嗎?先說結論,135編輯器可以完成滑動自動觸發圖片移入的效果,可以復刻智族Lab的效果。


    注:本文素材來源均來自智族Lab,僅做教學使用。


    //

    進入SVG編輯器


    在135編輯器頁面左側找到「SVG編輯器」,進入SVG編輯頁面。


    在SVG編輯器左側選擇「互動效果」,在搜索框中搜索組件:觸摸圖片小元素依次橫向移入畫面或組件ID:914



    //

    上傳素材


    點擊組件進入SVG編輯區域中,我們上傳背景圖。



    移入元素圖的位置,我們可以先在設計階段排布放好,然后去掉背景圖單獨下載,就像這樣??



    細心的朋友應該發現,移入小元素的圖片都是透明底的PNG圖,這樣移入才不會對本身的背景圖有遮擋。


    上傳好背景圖后,我們可以繼續上傳元素圖。



    上傳好元素圖后,我們可以針對不同的小元素設置移入方向、動畫時長等內容。



    這樣我們就完成了小元素移入背景畫面的效果了,大家可以觸摸下方的圖看一看。


    ·

    ·

    ·

    ·


    //

    還可以縮小移入


    如果大家對常規元素移入覺得不夠有吸引力,不妨試試觸摸圖片小元素依次縮小橫向移入畫面,組件ID:915


    操作步驟點擊圖片小元素依次橫向移入畫面效果一致,這里就給大家看看呈現效果吧,觸摸下方的圖即可查看??


    ·

    ·

    ·

    ·


    //

    導出或同步


    如果我們是在SVG編輯器里完成了一篇完整的文章,可以直接通過「同步」將內容同步到微信公眾號后臺,當然這個的前提是你需要向135編輯器授權你的賬號信息。


    在135編輯器頁面右上角用戶名稱中,將鼠標放置在用戶名上可彈出下拉菜單找到「授權公眾號」賬號管理員掃碼授權。


    如果你暫時無法擁有授權,也可以通過135插件的形式將內容同步到公眾號后臺,僅僅需要在你的谷歌瀏覽器中安裝135插件。


    點我下載插件


    如果你還需要將效果放到135編輯器中,那么可以使用「導出」將效果復制到135編輯器中。




    以上就是本期

    SVG教學的全部內容

    大家還有什么想要學的效果案例

    可以在評論區留言

    三兒會定期做教學內容噢




    ·



    文章申明:本文章轉載自互聯網公開渠道,如有侵權請聯系我們刪除
    文章評價
    登錄后可以評論
    立即登錄
    分享到
    亚洲午夜高清拍精品|亚洲永久精品|亚洲_亚洲成av人片一区二区蜜柚_国产精品无码中文_秋霞午夜久久午夜精品
    1. <strong id="6hpmh"><pre id="6hpmh"></pre></strong>
      <strong id="6hpmh"></strong>

    2. <progress id="6hpmh"></progress>