一個(gè)神奇的組件

通過特定位置的點(diǎn)擊，讓全文反復(fù)發(fā)生切換？而這還只是神奇的 E2.COOL「坍塌盒子」組件的一種應(yīng)用而已。

坍塌盒子，顧名思義，指點(diǎn)擊后該結(jié)構(gòu)的高度坍塌至 0，內(nèi)容消失且下方結(jié)構(gòu)即刻進(jìn)場(chǎng)。無論是科沃斯的《活力白天VS靈感深夜，你是哪一派？》中全文結(jié)構(gòu)的雙重模式偽無限次切換，還是 Graff 《璀璨心愿》一文中所實(shí)現(xiàn)的重復(fù)抽簽結(jié)構(gòu) 、又或是雷克薩斯《確定？行！》一文中滑動(dòng)進(jìn)場(chǎng)且 GIF 控制播放結(jié)構(gòu)，坍塌盒子都起到關(guān)鍵性作用，也可見其應(yīng)用之廣泛。

當(dāng)然，精妙的組件能夠發(fā)揮的場(chǎng)景也不會(huì)僅限于此，坍塌盒子作為結(jié)構(gòu)的基礎(chǔ)框架，輔以零高容器和占位的配合，便可靈活得搭建起各式各樣的復(fù)合結(jié)構(gòu)。本文將演示坍塌盒子構(gòu)建復(fù)合模型的具體操作方法。

?

全文切換

上文模型演示了科沃斯《活力白天VS靈感深夜，你是哪一派？》一文中白天黑夜模式下內(nèi)容的兩種狀態(tài)，點(diǎn)擊開關(guān)，全文即可在兩種模式下進(jìn)行有限次的切換。同樣形式的文章還有 ColorOS 的《你更喜歡我的哪一面？》、MLB 的《查看你的MBTI結(jié)果》等。

如果你需要素材包進(jìn)行練習(xí)，并理解素材的基本結(jié)構(gòu)特性，則可以在「黑科技編輯器」公眾號(hào)回復(fù)「坍塌盒子」獲取已經(jīng)準(zhǔn)備好的圖包素材。

素材建議

兩種模式下的總高度保持一致，按鈕所在位置保持一致。

所需組件

該模版所需組件位置

「高級(jí)組件」大類模版中的「坍塌盒子」組件，在其嵌套區(qū)中放置切換部分的正文內(nèi)容。此組件含有兩種形式，可以在篩選器中切換坍塌盒子（自定義）版。

「坍塌盒子」組件由「畫面素材」決定總高度，并可以通過熱區(qū)功能劃定熱區(qū)范圍，適合總高度較短的素材使用?！府嬅嫠夭摹辜瓤墒褂靡粡埻耆该鞯恼嘉粓D，又可固定為一張浮層元素。

「坍塌盒子（自定義）」組件可自定義畫布尺寸和熱區(qū)位置，靈活性和通用性更高，需配合 PS 或 AI 等工具獲取具體參數(shù)。

「高級(jí)組件」大類模版中的「零高容器」組件，由占位組件固定結(jié)構(gòu)總高度，便可在零高容器中無限填充正文內(nèi)容。配合坍塌盒子使用時(shí)，即可實(shí)現(xiàn)點(diǎn)擊后結(jié)構(gòu)消失下層內(nèi)容進(jìn)場(chǎng)，完成偽無限次連續(xù)點(diǎn)擊切換的效果。

「高級(jí)組件」大類模版中的「置頂框架」組件，承載最后一次點(diǎn)擊后的全文內(nèi)容。

「高級(jí)組件」大類模版中的「占位」組件，固定全文高度。

實(shí)現(xiàn)方法

1）登錄 E2.COOL 黑科技編輯器，首先搭建外層框架。在「高級(jí)組件」中選擇「零高容器」和「占位」組件，并在占位中填寫素材的總高度。以科沃斯的此篇文章為例，這里的寬高分別為 750、3100。

2）在零高容器中具體填充正文內(nèi)容。在嵌套區(qū)中拖入「高級(jí)組件」中的「坍塌盒子」，并上傳「畫面素材」。

「畫面素材」將會(huì)置于結(jié)構(gòu)的頂層，決定了坍塌盒子的尺寸高度。當(dāng)然，如果沒有置頂素材的需求，你也可以像本文一樣上傳一張完全透明的圖片用于撐開高度。

在「坍塌盒子」的嵌套區(qū)中完善白天模式下的結(jié)構(gòu)素材。

企業(yè)會(huì)員通過熱區(qū)功能劃定觸發(fā)范圍，注意避免和嵌套區(qū)內(nèi)附有交互效果的區(qū)域重合。

3）再次拖入「坍塌盒子」，或直接復(fù)制白天模式的「坍塌盒子」，搭建黑夜模式結(jié)構(gòu)，并通過熱區(qū)功能調(diào)節(jié)觸發(fā)位置。

4）利用復(fù)制功能，依次復(fù)制出多個(gè)白天和黑夜模式的坍塌盒子，達(dá)到多次點(diǎn)擊的目的。點(diǎn)擊組件名稱折疊結(jié)構(gòu)，拖動(dòng)更改前后順序。

5）此時(shí)結(jié)構(gòu)已搭建近尾聲，為了防止最后一次點(diǎn)擊后內(nèi)容全部消失，在結(jié)構(gòu)末端拖入「置頂框架」組件，上傳最終畫面。

完成，通過預(yù)覽區(qū)查看動(dòng)畫效果。

?

圖片消失-滑動(dòng)出現(xiàn)

（GIF 控制器）

如上文結(jié)構(gòu)所示，點(diǎn)擊后封面消失，滑動(dòng)出現(xiàn)且滑動(dòng)第一屏內(nèi)的 GIF 動(dòng)畫由第一幀開始播放。該結(jié)構(gòu)應(yīng)用于雷克薩斯中國的《確定？行！》。

實(shí)現(xiàn)方法

1）使用「零高容器」和「占位」組件搭建支撐結(jié)構(gòu)，在「占位」中填寫畫布尺寸。以雷克薩斯中國的此篇文章為例，這里的寬高分別填寫為 900、1121。

2）拖入「坍塌盒子」組件，在篩選器中選擇「坍塌盒子（自定義）」。

在上一個(gè)模型中我們演示了「坍塌盒子」的使用方法，利用「畫面素材」確定畫布尺寸并通過熱區(qū)功能設(shè)置觸發(fā)位置?！柑凶印购汀柑凶樱ㄗ远x）」并無本質(zhì)上的區(qū)別，相對(duì)于「坍塌盒子」來說，「坍塌盒子（自定義）」更可以不受限制的調(diào)整畫布尺寸和熱區(qū)位置。此處我們便演示「坍塌盒子（自定義）」組件的使用方法。

填寫「畫布寬度」和「畫布高度」。為了實(shí)現(xiàn) GIF 進(jìn)場(chǎng)后開始播放的效果，建議「畫布高度」填寫的值大于全文總高度，避免滑動(dòng)后 GIF 提前加載。以雷克薩斯中國的此篇文章為例，這里分別填寫為 900、30000。

嵌套區(qū)中拖入「無縫圖（深色模式高亮）」，上傳封面素材。

通過 Photoshop 工具可以獲取觸發(fā)熱區(qū)所在位置的詳細(xì)信息。

1. 確定素材圖片的寬度小于等于 1080 px。

2. 打開 PS 工具，使用矩形工具劃定熱區(qū)位置。

3. 在「屬性」欄中查看矩形的橫坐標(biāo)（X）、縱坐標(biāo)（Y）、寬度（W）和高度（H）。

4. 將信息填寫至編輯器中的相應(yīng)位置。

3）在坍塌盒子的下方拖入「置頂框架」，上傳后續(xù)的滑動(dòng)素材。

完成，通過預(yù)覽區(qū)查看動(dòng)畫效果。

?

該結(jié)構(gòu)先后在 Graff 《璀璨心愿》和雷克薩斯中國《賞燈！》中使用，實(shí)現(xiàn)了多次抽簽的效果。提示建議將觸發(fā)抽簽熱區(qū)和觸發(fā)坍塌盒子熱區(qū)的位置分開設(shè)計(jì)。

實(shí)現(xiàn)方法

1）使用「零高容器」和「占位」組件搭建支撐結(jié)構(gòu)，在「占位」中填寫畫布尺寸。以 Graff 的此篇文章為例，這里的寬高分別填寫為 1080、1768。

2）拖入「坍塌盒子」組件，在篩選器中選擇「坍塌盒子（自定義）」。

根據(jù)素材尺寸，填寫「畫布寬度」和「畫布高度」。以 Graff 的此篇文章為例，這里分別填寫 1080、1768。

嵌套區(qū)中拖入所需的抽簽組件，這里以「幸運(yùn)抽簽-切換式」組件為例，上傳所需素材。

通過 Photoshop 工具可以獲取觸發(fā)熱區(qū)所在位置的詳細(xì)信息。

1. 確定素材圖片的寬度小于等于 1080 px。

2. 打開 PS 工具，使用矩形工具劃定熱區(qū)位置。

3. 在「屬性」欄中查看矩形的橫坐標(biāo)（X）、縱坐標(biāo)（Y）、寬度（W）和高度（H）。

4. 將信息填寫至編輯器中的相應(yīng)位置。

3）使用復(fù)制組件功能，增加重復(fù)次數(shù)。

4）在結(jié)構(gòu)末端拖入「置頂框架」組件，上傳最終畫面。

完成，通過預(yù)覽區(qū)查看動(dòng)畫效果。

更多海量模板，平均不足 1 元！

E2.COOL 秉持著讓行業(yè)“人均 SVG”的生態(tài)理念，由多位黑科技排版設(shè)計(jì)的頭部資深開發(fā)者共同打造，幫助更多品牌以可視化形式完成互動(dòng)式圖文創(chuàng)作。如有任何特效靈感和建議，也歡迎通過客服向我們提出，E2 將竭誠思考代碼轉(zhuǎn)化的可行性。

E2 平臺(tái)官網(wǎng)

https://www.e2.cool/

會(huì)的比別人多一點(diǎn)