計育韜：<scroll>關聯式SVG觸發的兩種創新范式應用分析
2019 年時，我的朋友荒村在《一次觸發，遍地開花》首次提出了 SVG 融媒體交互設計場景下的雙層觸發。時至今日，它已演變為包括多重指令、CSS 結構帶動、往返模型等多種豐富演繹。
而近來年開發者注意到，作為與 SVG 動畫密切「組隊」的<scroll>盒子溢出滾動屬性，其實也具備某種意義上的「雙層觸發」，它本身作為 CSS 結構，同樣符合 300 毫秒時間差前提下的關聯感應，更不提<viewBox>直接屬于滑動容器父子關系的條件下應用。
目前，第一種范式是已形成流行趨勢的「預感應」滑動，以《免費定制SVG，難度不限????（名額有限）》為例，每次滑屏將帶動次屏大量的 SVG 編組動畫依次展現
同學們不妨從 E2 平臺后期釋出的簡易版組件如「預感應等分容器滑動」、「預感應縱向無限圖片滑動（默認飄入）」來分析，會發現其本質是次級盒子的<overflow: visible>帶來了 SVG 內容物的溢出，由此使得觸發器（如<rect>）前置，進而短暫提前引發動畫的執行。
第二種范式是計育韜老師個人發明的新效果，在我與 Plastic SEA Fifi 合作的《?????????祝您(用餐)愉快????》項目中，首頁存在一個即可滑動又可居中彈窗的全局櫥窗，開辟了一種前所未有的交互模式：
在構建模型過程中，我先通過<mouseover>和<mouseout>的互斥指令部署了表層的彈窗效果，它完全脫離于下層的全局滑動區域并實際擋住后者。
那么在非點擊前提下，拖動屏幕時如何「穿透」引起下方滑動布局的響應？接下來計育韜老師采用<touchmove>指令感應滑屏行為，并由此使得表面的互斥彈窗組在 300 毫秒內撤場。
旋即，滑動的行為被屏幕探測到并傳遞到了下層的全局滑動組，<scroll>的 CSS 基本特性隨之感應，跟隨手指行為進行正常的拖動表達。
就這兩個范式來分析，本質其實類似于 touchstart-click 雙層觸發條件下多重指令和往返模型的區別——一組是正向利用技術規則，一組則反向利用技術規則。當然，肯定還存在更多奇妙的指令組合與 CSS 雙層感應接力技術的策略，那么就期待同學們未來的精彩發揮了！
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）