總算安全度過 30 天惹，希望各位讀者們都有收穫。(oﾟvﾟ)ノ

因為篇幅關係還有很多元件沒辦法登場，如果大家真的很想看某個元件的開發過程，可以留言給我，我會努力生出追加番外篇。(≧∇≦)ﾉ

小故事

酷酷元件的開發過程也有很多很有趣的小故事和眉角，讓我娓娓道來。

• 「物理包裝器」的物理世界元件（wrapper-physics.vue）怎麼保證在所有的物體（wrapper-physics-body.vue）都初始化完成後，才開始建立 Matter.js 的物體？這個就牽扯到 Vue 父子元件的 onMounted 週期了！◝( •ω• )◟

  以一言蔽之：「父元件一定會等到所有的子元件都完成 onMounted 後，才會觸發自己的 onMounted。」

• 「游標小跟班」用了很多很有趣的 Web APIs，長了很多知識。(´,,•ω•,,)

• 「多邊形轉場」使用 fixed 定位、覆蓋在欲轉換的元素上時，快速滾動會有延遲偏移問題，靠 CSS Anchor Positioning 可以完美解決。

• 「多邊形轉場」的形別守衛搞了好久搞不出來，最後求助社群才發現這個奇怪的用法。

• 「Minecraft 方塊包裝器」需要實現「半空中的凹洞」效果研究了很久。

• 「Minecraft 方塊包裝器」要將 3D 空間的物體尺寸對上 DOM 的尺寸，需要動態計算相機 FOV，相當有趣。

• 「櫻吹雪」需要實現景深模糊效果，研究了 babylon.js 的 Rendering Pipeline，超強超酷，計算機圖學領域果然很複雜、有趣。(´,,•ω•,,)

• 持續同步狀態時，理論上使用基於 requestAnimationFrame 的 useRafFn，應該會優於 useIntervalFn，不過實際上 useIntervalFn 卻比較流暢，目前原因不明。

• 自行計算數值、處理動畫時，簡單情境優先使用 useIntervalFn，而非 useRafFn。這是因為 useRafFn 會導致不同 fps 的裝置動畫速度不一樣，除非額外處理。

  例如我的電腦是 60fps，手機是 120fps，就會導致同樣的動畫在手機上看會比電腦上快 2 倍。

  額外處理則有以下辦法：

  1. 可以讓動畫以時間為基準
  2. 在 babylon.js 中可以使用 animationRatio 處理，依照 fps 比率調整動畫速度

• Web Component 無法呼叫 Vue 元件的 expose 成員，原本可以使用 _instance，但是版本 ^3.4.35 不行了，目前還找不到任何方法。( ´•̥̥̥ ω •̥̥̥` )

還填不起來的坑

來分享一些坑挖了但還填不起來的元件。ᕕ( ﾟ ∀。)ᕗ

• 「水之呼吸滑鼠」：移動速度夠快時，會產生水特效。

  水流效果做不出來，眼淚倒是流了不少。( ´•̥̥̥ ω •̥̥̥` )

• 「雷之呼吸滑鼠」：移動速度夠快時，會產生閃電特效。

  雷電效果超難畫，不是超遜就是不像雷電，怎麼畫都不滿意。ლ(・´ｪ`・ლ)

• 「特殊轉場」：用法同 Vue Transition 元件，被包裹的元素會有各種特殊轉場效果，例如：彈指灰飛煙滅、玻璃破碎等等

  還在和 shader 天書奮戰中。(́◉◞౪◟◉‵)

自從開始連載鐵人賽後，我得了一種每天 23 點 50 分前，都要反覆檢查沒有成功發文的病，現在終於解放啦！…(›´ω`‹ )

原專案依然會不定期更新，還有 10 幾個元件等待開發，希望坑填的完。(´,,•ω•,,)

也歡迎大家來我的部落格逛逛，部落格除了文章以外，也會放入各種實驗品喔！(๑•̀ㅂ•́)و✧

鱈魚在此下台一鞠躬，若有任何想法還請不吝回饋給我，期待未來再見囉！(´▽`ʃ♡ƪ)