SVG開發：SVG中利用事件雙重觸發制作開關動畫效果
2025-02-08 17:23:00
事件穿透原理
要理解事件雙重觸發先要明白什么是事件穿透，所謂事件穿透就是利用click事件在移動設備上觸發有300ms左右延遲的特性，我們可以在touchstart事件中快速移除當前層元素，讓事件短時間內穿透到下層從而觸發下層的click動畫，請參考下圖示意。
<!-- 事件穿透 -->
<svg style="height:0;">
<rect>
<animate
attributeName="opacity"
to="0"
begin="click"
dur="1s">
</animate>
</rect>
</svg>
<svg>
<rect>
<animate
attributeName="visibility"
to="hidden"
begin="touchstart"
dur="0.001ms">
</animate>
</rect>
</svg>
事件的雙重觸發
事件雙重觸發就是將開和關2個狀態動畫寫在一起，系統會根據事件選擇執行其中之一，拿蘋果的圖文伸縮動畫為例。
<svg>
<!-- 伸長動畫 -->
<animate
attributeName="width"
values="100%;100%;200%"
begin="touchstart"
fill="freeze"
dur="0.75s"
></animate>
<!-- 返回動畫 -->
<animate
attributeName="width"
values="200%;100%;100%"
begin="click"
fill="freeze"
dur="0.75s"
></animate>
</svg>
當我們將這2段開關動畫寫在一起時，我們會發現系統只選擇touchstart事件動畫執行而選擇性忽略了click事件動畫，這是因為touchstart沒有click事件的延遲，這就好比2個人前后腳到蛋糕店買蛋糕，而這時蛋糕店只剩下一塊蛋糕，老板自然是會給先到店的那個人。在執行了伸長動畫后，我們怎么讓返回動畫執行呢？這就要利用上面介紹過的事件穿透模型，我們要在當前層之上制造一個擋板層，讓系統選擇click事件動畫執行而忽略touchstart動畫。
還是拿剛才蛋糕店的例子，現在我們通過”事件穿透”這層朋友關系讓老板把蛋糕給晚進店的那個人。
總結
通過事件雙重觸發可以實現一些狀態切換的開關效果，如圖文的伸長和返回，彈窗的彈出和關閉等，還是許愿哦要配合一些防誤觸和遮擋的技巧。
京公網安備 11011402012991號