bilibili高級(jí)彈幕初階教程

《bilibili高級(jí)彈幕初階教程》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、目錄第一章初步了解高級(jí)彈幕1.1變量1.2創(chuàng)建文本彈幕對(duì)象1.3彈幕對(duì)象運(yùn)動(dòng)的設(shè)置1.4繪圖彈幕對(duì)象創(chuàng)建以及設(shè)置1.4.1顏色樣式設(shè)置1.4.1.1beginFill指定一種顏色進(jìn)行填充1.4.1.2lineGradientStylebeginGradientFill指定一種線條樣式,填充樣式的漸變1.4.1.3lineStyle指定線條樣式1.4.2圖形的繪制1.4.2.1繪制一條直線1.4.2.2繪制一條二次貝塞爾曲線1.4.2.3繪制一個(gè)圓1.4.2.4繪制一個(gè)橢圓1.4.2.5繪制一個(gè)矩形1.4.2.5繪制一個(gè)圓角矩形第二

2、章使用其他工具2.1Utils工具庫(kù)2.1.1hue將0-360的值映射到色相環(huán)2.1.2rgb將RGB值映射到色彩值上2.1.3formatTimes格式化播放時(shí)間2.1.4timer延遲執(zhí)行函數(shù)2.1.5interval定時(shí)重復(fù)執(zhí)行函數(shù)2.1.6distance計(jì)算坐標(biāo)距離2.1.7rand返回一個(gè)前閉后開(kāi)的整數(shù)2.2Function函數(shù)的創(chuàng)建與使用2.3播放器控制2.3.1視頻時(shí)間跳轉(zhuǎn)至2.3.2跳轉(zhuǎn)到指定av號(hào)指定頁(yè)視第一章初步了解高級(jí)彈幕1.1第一節(jié)變量廢話不多說(shuō).我們先來(lái)看一句最基本的彈幕.vara=1;首先一次個(gè)關(guān)鍵

3、字是”var”.該關(guān)鍵字的意思就是聲明一個(gè)變量.變量說(shuō)的簡(jiǎn)單點(diǎn)就是在后面的過(guò)程中可以給“a”重新賦值.然后就是變量名”a”了,這玩意理解成名字就行了.至于關(guān)于變量名的規(guī)則有些關(guān)鍵字與保留字是不允許創(chuàng)建的.保留字，關(guān)鍵字第三個(gè)是運(yùn)算符”=”,首先等于號(hào)并不是數(shù)學(xué)中的等于意思.而是給聲明的變量a賦值.將等號(hào)右邊的值賦予給左邊.第四個(gè)”1”就是一個(gè)值了.結(jié)尾的分號(hào)表示該語(yǔ)句結(jié)束.看到這里相信大家已經(jīng)對(duì)這句彈幕有了基礎(chǔ)的了解.這句話的意思就是：聲明變量”a”并且初始化其值為數(shù)字1.寫(xiě)高級(jí)彈幕的時(shí)候請(qǐng)嚴(yán)格注意大小寫(xiě).var變量名=表達(dá)式;1

4、.2第二節(jié)創(chuàng)建文本彈幕對(duì)象.首先要知道bili的播放器的大小.像素為單位.正常模式：寬541高384寬屏模式：寬950搞528全屏模式與網(wǎng)頁(yè)全屏模式根據(jù)顯示器分辨率來(lái)確定.在高級(jí)彈幕中在實(shí)際彈幕時(shí)間會(huì)在發(fā)布時(shí)間軸填寫(xiě)的時(shí)間基礎(chǔ)上減去約0.2秒.所以請(qǐng)注意時(shí)間軸的問(wèn)題高級(jí)彈幕中創(chuàng)建新的文本彈幕對(duì)象要用到createComment（"",{}）這個(gè)語(yǔ)句.請(qǐng)看實(shí)例vara=$.createComment("text",{x:100});該彈幕的意思就是創(chuàng)建一個(gè)變量a并創(chuàng)建一個(gè)新彈幕對(duì)象賦于a.我們可以這么理解createComment.

5、他的括號(hào)內(nèi)有2個(gè)參數(shù).”text”是彈幕內(nèi)容.｛x:100｝是該彈幕參數(shù)x軸上的位置是100.當(dāng)然括號(hào)內(nèi)的不可能只有x這一個(gè)參數(shù).我們可以用到的有.x—新創(chuàng)建元件的X軸座標(biāo)y—新創(chuàng)建元件的Y軸座標(biāo)z—新創(chuàng)建元件的Z軸座標(biāo)lifeTime—元件的生存時(shí)間(以秒為單位)注：一旦設(shè)置不可更改alpha—元件的透明度color—文字類元件的色彩fontsize—文字類元件的大小parent—元件的父元件(進(jìn)階應(yīng)用)motion—元件移動(dòng)策略scale—縮放那么我們來(lái)定義一個(gè)稍微復(fù)雜點(diǎn)的高級(jí)彈幕.例：varc=$.createComment

6、("text",{x:100,y:100,lifeTime:10,fontsize:20,color:0x666666,alpha:0.8});(注：參數(shù)之間以英文逗號(hào)區(qū)分,最后一個(gè)參數(shù)結(jié)尾無(wú)逗號(hào))大家可以預(yù)覽一下這條彈幕.就是在x軸100,y軸100的位置創(chuàng)建一個(gè)內(nèi)容是text的彈幕.該彈幕生存時(shí)間為10秒.字體大小為20號(hào).十六進(jìn)制顏色為灰色.透明度0.8.那么.到了這里大家應(yīng)該已經(jīng)知道怎么去在一個(gè)點(diǎn)創(chuàng)建彈幕并設(shè)置該彈幕各項(xiàng)參數(shù).接下來(lái)就來(lái)說(shuō)一下在創(chuàng)建后各項(xiàng)屬性的更改與設(shè)置.現(xiàn)在.聲明變量c并創(chuàng)建了一個(gè)彈幕內(nèi)容為"測(cè)試"的彈幕

7、.它的x軸為50,y軸為100.例：varc=$.createComment("測(cè)試",{x:50,y:100});那么如果我們現(xiàn)在需要讓他的位置x軸不變y軸變更到50.那么我們這個(gè)時(shí)候就需要直接更改彈幕的某一個(gè)參數(shù).只需要在彈幕后面加上.c.y=50;（注：更改顏色的語(yǔ)句不是c.color而是c.textColor.注意大小寫(xiě)）此外還有比較常用的就是旋轉(zhuǎn)3個(gè)軸的設(shè)置.c.rotationX,rotationY,rotationZ.例:c.rotationX=90;另還有些參數(shù)也可以設(shè)置.詳細(xì)參考訓(xùn)練題：1.聲明變量c并創(chuàng)建一條彈

8、幕對(duì)象.其內(nèi)容為空.其屬性為X軸為270.Y軸為190.生存時(shí)間5秒.字體顏色為0xff0000,透明度為0.5.字體大小為15號(hào).2.更改c的x軸位置為200.透明度更改為1.顏色為0xfff000.1.3彈幕對(duì)象運(yùn)動(dòng)的設(shè)置在上一個(gè)章節(jié)中學(xué)習(xí)了如