GQ實(shí)驗(yàn)室SVG交互效果教程 | 創(chuàng)造個(gè)性化選擇生成圖
跟隨本教程，學(xué)習(xí)如何制作GQ實(shí)驗(yàn)室風(fēng)格的SVG交互效果，實(shí)現(xiàn)點(diǎn)擊選擇后生成個(gè)性化結(jié)果圖。從SVG編輯器的進(jìn)入到素材上傳，再到組件的搜索與應(yīng)用，每一步都詳盡解說，助你輕松掌握這一創(chuàng)意技術(shù)，讓你的內(nèi)容更具吸引力。
朋友們大家好，我是三兒。
最近有不少朋友，拿著創(chuàng)意天花板，SVG交互頂流GQ實(shí)驗(yàn)室的一篇文章問我。
“三兒，我們可以做嗎？”
我們先來看看這篇文章，它是一個(gè)多次選擇+點(diǎn)擊首圖消失生成選擇結(jié)果圖的效果。
先說結(jié)論：可以做！
接下來讓我們一同來見證奇跡。
在編輯器左側(cè)找到SVG編輯器，點(diǎn)擊進(jìn)入SVG編輯器。
選擇互動效果，在搜索框中輸入組件ID：543，就能找到[橫向多選擇滑動+生成結(jié)果展示]組件。
注意！注意！在上傳圖片素材前，我們需要仔仔細(xì)細(xì)查看素材要求，不少朋友之間略過這一步導(dǎo)致最后的效果無法呈現(xiàn)。
提煉一下：
1.每組滑動板塊中背景圖和滑動圖寬高尺寸一致；
2.每個(gè)組之間的寬度需要一致，高度不需要；
3.每個(gè)滑動圖匹配的結(jié)果圖和結(jié)果封面圖，結(jié)果背景圖需要寬高一致；
4.滑動結(jié)果圖中元素需要按最終結(jié)果背景圖顯示的位置擺放，不要和滑動圖共用一張圖。
“文字太多，看得腦袋暈”
別著急，跟著三兒動手做一遍，你就明白了！
01.先上傳結(jié)果封面圖和結(jié)果背景圖（素材寬度尺寸一致）
02.添加滑動板塊
03.上傳背景圖（背景圖尺寸與滑動圖尺寸一致）
03.上傳滑動圖
給大家理一下：
滑動圖：是用戶在選擇滑動的部分與背景圖尺寸一致；
滑動結(jié)果圖：是最后點(diǎn)擊呈現(xiàn)的部分；
故滑動結(jié)果圖的寬高需要和結(jié)果封面圖以及結(jié)果背景圖一致，且滑動結(jié)果圖中元素需要按最終結(jié)果背景圖顯示的位置擺放。
04.添加滑動板塊
剛剛咱們完成的僅僅是第一個(gè)滑動板塊的內(nèi)容，接下來我們依葫蘆畫瓢，再添加第二個(gè)滑動板塊。
第二個(gè)滑動板塊的背景圖、滑動圖、滑動結(jié)果圖與第一個(gè)滑動板塊一致，這里不再重復(fù)，有幾個(gè)滑動內(nèi)容添加幾個(gè)滑動板塊即可。
為了防止大家搞不清楚各個(gè)板塊圖片尺寸關(guān)系，三兒這里做了一個(gè)圖例。
05.導(dǎo)入到編輯器或同步到公眾號后臺
如果你的公眾號沒有授權(quán)135編輯器也想要同步到后臺，可以安裝135插件后，免授權(quán)同步。
以上就是關(guān)于
今天效果組件的全部教學(xué)啦
內(nèi)容有點(diǎn)干
大家可以收藏本文
多次學(xué)習(xí)
朋友們眼睛看會了
記得要?jiǎng)邮植僮髋?/span>
大家還想要get什么效果
記得在評論區(qū)留言
三兒都給你安排上
如果你記得今天的內(nèi)容對你有幫助的
別忘了給我一鍵三連
求求啦這對我真的很重要
立即登錄
