天天看點

百度黑洞效果實作原理

我們在Baidu裡搜尋關鍵字黑洞後,有一個異步的請求加載blackhole.js. 所有的動畫都有這個blackhole.js實作。

百度黑洞效果實作原理

具體的動畫實作也是用API requestAnimationFrame來做的,現在網上看到的各種HTML5的酷炫效果很多都是通過這個API實作的。

百度黑洞效果實作原理

Baidu 預先準備了一張黑洞的背景圖檔,通過requestAnimationFrame 定期修改這張背景圖檔的寬,高和Z序坐标,實作我們肉眼上看見的黑洞效果。

百度黑洞效果實作原理

至于其他圖示被黑洞吸入的效果原理也類似,大家有興趣可以自己debug。

看附件這個video就懂了。

百度支援的關鍵字還有很多,大家可以試試搜尋“旋轉”。

繼續閱讀