優化動畫瘋彈幕

作者:hbl91707(深海異音)

< Feedback on 優化動畫瘋彈幕

Review: Good - script works

§
Posted: 3.4.2018
Edited: 3.4.2018

優化腳本的運行邏輯

把一些用setTimeout();檢查的地方改為觸發執行
減少CPU無意義空轉的情況
由於找不到你的Github所以只能把修改後腳本放上來
請自行用WinMerge等軟件檢查修改處
請在這裡下載修改後腳本

主要是修改三處用setTimeout();的地方
第一是改用MutationObserver檢查document.getElementsByClassName("vjs-danmu")[0]存在
只有在DOM變化時才會檢查
document.getElementsByClassName("vjs-danmu")[0]存在並執行了fun_creat_canvas();後便會移除MutationObserver檢查項

第二是改用ResizeObserver檢查document.getElementsByClassName("vjs-danmu")[0]的大小
改用Object.defineProperty();設定getter/setter函數去檢查document.getElementsByClassName("DanmuOpacityRange")[0].value的值
因為分開檢查
執行函數也拆分為fun_auto_size();fun_set_opacity();
但由於ResizeObserver是比較新的函數
只有Chrome 64+才支持
在不能用ResizeObserver時會改回setInterval();定時檢查

第三是改用requestAnimationFrame();取代fun_div_to_canvas();中的setTimeout();
令執行周期配合螢幕的fps
也是Chrome的建議做法

§
Posted: 4.4.2018
Edited: 8.4.2018

發錯了,請看下個回覆

§
Posted: 4.4.2018
Edited: 4.4.2018

新增HiDPI適配
主要就是把Canvas尺寸放大window.devicePixelRatio
但是在Safari上有預放大問題
所以再根據Safari預放大倍率ctx.webkitBackingStorePixelRatio縮小
文字處理也會相應放大縮小其位置及大小
然後用CSS定位其在頁面的大小
令其在頁面的大小不變
這樣在HiDPI下不會因為放大而模糊

§
Posted: 5.4.2018
Edited: 9.4.2018

修正透明度Range拖動無效的bug
發現用Object.defineProperty();設定getter/setter會令被設定的Range拖動無效
所以還是用回傳統的input和change事件處理
找Class name DanmuOpacityRange能找完所有透明度Range
再用for迴圈把所有Range都加上input和change事件
這樣無論那條Range拖動都會觸發fun_set_opacity();

Post reply

Sign in to post a reply.