bilibili代碼彈幕初階入門教程

1、前言高級彈幕不難 . 基礎(chǔ)的部分非常簡單. 只需要你花上一點時間就可以輕松上手. 重要的是需要對作品的理解以及對時間的把握. 無論什么彈幕只需要一顆有愛的心就夠了 . 彈幕需要是愛與人參. 所以我希望大家不要去使用高級彈幕去做不好的事情.目錄第一章 初步了解高級彈幕變量創(chuàng)建文本彈幕對象彈幕對象運動的設(shè)置繪圖彈幕對象創(chuàng)建以及設(shè)置顏色樣式設(shè)置beginFill 指定一種顏色進行填充lineGradientStyle beginGradientFill指定一種線條樣式, 填充樣式的漸變lineStyle 指定線條樣式圖形的繪制繪制一條直線繪制一條二次貝塞爾曲線繪制一個圓繪制一個橢圓繪制一個矩形繪制一

2、個圓角矩形第二章 使用其他工具工具庫hue將 0-360 的值映射到色相環(huán)rgb將RGB1映射到色彩值上formatTimes 格式化播放時間timer 延遲執(zhí)行函數(shù)interval定時重復(fù)執(zhí)行函數(shù)distance計算坐標距離rand 返回一個前閉后開的整數(shù)Function 函數(shù)的創(chuàng)建與使用播放器控制視頻時間跳轉(zhuǎn)至跳轉(zhuǎn)到指定av 號指定頁視頻第一章 初步了解高級彈幕第一節(jié)變量廢話不多說.我們先來看一句最基本的彈幕 .一 I Ivar a = 1; I五二行而至隨而彘標忌疝二日詢一一：m而猛諱嬴在后面的過程中可以給 “a”重新賦值.然后就是變量名“ a” 了，這玩意理解成名字就行了 .至于關(guān)于變

3、量名的規(guī)則有些關(guān)鍵字與保留字是不允許創(chuàng)建的.保留字，關(guān)鍵字第三個是運算符=，首先等于號并不是數(shù)學(xué)中的等于意思 .而是給聲明的變量a賦值. 將等號右邊的值賦予給左邊.第四個“ 1就是一個值了 .結(jié)尾的分號表示該語句結(jié)束.看到這里相信大家已經(jīng)對這句彈幕有了基礎(chǔ)的了解.這句話的意思就是：聲明變量 a”并且初始化其值為數(shù)字1.寫高級彈幕的時候請嚴格注意大小寫.var變量名=表達式；第二節(jié)創(chuàng)建文本彈幕對象.首先要知道bili的播放器的大小.像素為單位.正常模式：寬541高384寬屏模式：寬950搞528全屏模式與網(wǎng)頁全屏模式根據(jù)顯示器分辨率來確定在高級彈幕中在實際彈幕時間會在發(fā)布時間軸填寫的時間基礎(chǔ)上減

4、去約秒.所以請注意時間軸的問題高級彈幕中創(chuàng)建新的文本彈幕對象要用到createComment (,)這個語句.請看實例var a = $.createComment(text ,x:100);該彈幕的意思就是創(chuàng)建一個變量a并創(chuàng)建一個新彈幕對象賦于a.我們可以這么理解createComment.他的括號內(nèi)有2個參數(shù).text ”是彈幕內(nèi)容.x:100 是該彈幕參數(shù) x軸上的位置是100.當(dāng)然括號內(nèi)的不可能只有x這一個參數(shù).我們可以用到的有.x 新創(chuàng)建元件的X軸座標y 新創(chuàng)建元件的Y軸座標z 新創(chuàng)建元件的Z軸座標lifeTime 一元件的生存時間(以秒為單位)注：一旦設(shè)置不可更改alpha 一元件

5、的透明度color 文字類元件的色彩fontsize 文字類元件的大小parent 一元件的父元件(進階應(yīng)用)motion 一元件移動策略scale -縮放那么我們來定義一個稍微復(fù)雜點的高級彈幕例：var c = $.createComment(text,x:100,y:100,lifeTime:10,fontsize:20,color:0 x666666,alpha:）；I I（注策藪W而旋受函反不二靠訐二桎裴SMil#）大家可以預(yù)覽一下這條彈幕.就是在x軸100,y軸100的位置創(chuàng)建一個內(nèi)容是text的彈幕.該彈幕生存時間為10秒.字體大小為20號.十六進制顏色為灰色.透明度.那么.到了這

6、里大家應(yīng)該已經(jīng)知道怎么去在一個點創(chuàng)建彈幕并設(shè)置該彈幕各項參數(shù)接下來就來說一下在創(chuàng)建后各項屬性的更改與設(shè)置現(xiàn)在.聲明變量c并創(chuàng)建了一個彈幕內(nèi)容為 測試”的彈幕.它的x軸為50,y軸為100.例：；var c = $.createComment（ 測試,x:50,y:100）;那么如果我們現(xiàn)在需要讓他的位置x軸不變y軸變更到50.那么我們這個時候就需要直接更改彈幕的某一個參數(shù).只需要在彈幕后面加上.=50;（注：更改顏色的語句不是而是.注意大小寫）此外還有比較常用的就是旋轉(zhuǎn)3個軸的設(shè)置.,rotationY,rotationZ.例：=90;另還有些參數(shù)也可以設(shè)置.詳細參考訓(xùn)練題：.聲明變量c并創(chuàng)建

7、一條彈幕對象.其內(nèi)容為空.其屬性為X軸為軸為190.生存時間5秒.字體顏色為0 xff0000,透明度為.字體大小為15號.更改c的x軸位置為200.透明度更改為1.顏色為0 xfff000.彈幕對象運動的設(shè)置在上一個章節(jié)中學(xué)習(xí)了如何創(chuàng)建文本對象和設(shè)置文本對象的參數(shù).這次就講如何讓創(chuàng)建的彈幕對象運動起來.這里我們要用到motion.下面請看一個例子var c = $.createComment( 移動測試, motion:x:fromValue:100,toValue:250,lifeTime:3 , lifeTime:3)；II讓我們來分析這條彈幕.首先上已經(jīng)了解過了createCommen

8、t的用法.那么我直接來看到多出來的這個屬性 motion.motion: x:fromValue:100,toValue:250,lifeTime:3在這里面其中 x為需要移動的參數(shù).x中的fromValue是x的起始位置toValue是結(jié)束位 置.lifeTime 是這個運動過程所花費的時間 .（注：如果在motion里面有起始值并且在 motion 外也設(shè)置的值，那么將顯示motion里面的設(shè)置位置）此外motion支持多屬性同時運動例：var c = $.createComment( 移動測試, motion:x:fromValue:100,toValue:250,lifeTime:3,

9、 Ialpha:fromValue:0,toValue:1,liftTime:3,lifeTime:3);II這次除了移動x軸還添加了一個透明度從0到1的變化.下面我們說一下在motion中有哪些是可以做變化的.x:移動x軸位置.y:移動y軸位置.alpha :透明度變換（有效值0-1 ）.fontsize :字體大小變換（不推薦使用.字號的變換較明顯.rotationX, rotationY, rotationX:旋轉(zhuǎn) x 軸，旋轉(zhuǎn) Y 軸，旋轉(zhuǎn) Z 軸.其中的屬性值有：必填 可選 可選 可選 可選fromValu e起始移動屬性值toValue結(jié)束移動屬性值如留空則不移動lifeTime以

10、秒為單位的移動生存時間如留空則與整體生存時間TstartDelay以毫秒為單位的起始移動延時時間（毫秒為單位）easing詳細請看補間效果可選 repeat效果重復(fù)次數(shù)下面我們來看一個相對復(fù)雜的例子IIIIvar c = $.createComment( 移動測試, motion:x:fromValue:100,toValue:250,lifeTime:3,startDelay:500, y:fromValue:50,toValue:250,lifteTime:3, alpha:fromValue:0,toValue:1,lifeTime:,repeat:6 , lifeTime:3 TOC

11、o 1-5 h z HYPERLINK l bookmark24 o Current Document I1I ); HYPERLINK l bookmark36 o Current Document II HYPERLINK l bookmark38 o Current Document IIII在這個例子里面我們用到了startDelay 這個屬性.我們把這個代碼拆開分了3段來看.首先x軸的是從100移動到250.移動時間3秒.然后起始移動時間是500毫秒.也就是說x軸是在500毫秒后開始移動的.然后是y軸從50移動到250移動時間3秒.最后是透明度從0到1變化時間為秒.重復(fù)執(zhí)行6次.把這

12、三個參數(shù)整合在一起就變成了.移動測試從x： 100,y： 50的位置開始移動，并且透明度最開始是0.由于x有一個起始移動時間.但是y軸跟透明度變化已經(jīng)開始.所以首先“移動測 試會先漸入的向下移動.500毫秒后x開始移動這個時候 y軸的移動還沒有停第一次的透明 度改變已經(jīng)結(jié)束.所以x,y軸這個時候是同時移動的.最后結(jié)果回是往右下移動并且透明度 會重復(fù)的從0到1.雖然可以使用 repeat這個屬性執(zhí)行重復(fù)的操作.但是這個是遠遠不能滿足復(fù)雜的移動效果 的.然而去創(chuàng)建很多 motion也是很麻煩的.這里我就需要用到 motionGroup 了.motionGroup 能執(zhí)行多個motion連續(xù)運動.我

13、們來看一個實例.! 一tI：var c = $.createComment(彈幕測試,1x:100,y:50,motionGroup:x:fromValue:100,toValue:200,lifeTime:1,alpha:fromValue:0,toValue:1,lifeTime :1,I y:fromValue:50,toValue:150,lifeTime:1,alpha:fromValue:1,toValue:0,lifeTime: 1 TOC o 1-5 h z IIII );) IIIIII以上彈幕就是使用一個組將兩個移動連接在了一起一 J.需要注意的是 motionGroup的

14、冒號后面的是英文中括號.并且每一次移動包括透明度都最好加上lifeTime 并且每一個motion中的lifeTime 的時間必須一致.每一次motion之間用英文逗號相隔.最后一個結(jié)尾無符號.繪圖彈幕對象創(chuàng)建以及設(shè)置使用命令：createShape例子：I Ivar g = $.createShape(x:50,y:50,lifeTime:3,alpha:);IIIII一王匠而還二木周而鹵弦而互添而萬麗而彳mSBJT一吊舊 H 商彳廠,1湎應(yīng)設(shè)置等方法同 creatComment).繪圖需要使用到的：curveTo使用當(dāng)前線條樣式繪制一條二次貝塞爾曲線drawCircle繪制一個圓.draw

15、Ellipse繪制一個橢圓drawRect繪制一個矩形drawRoundRect繪制一個圓角矩形lineTo 繪制一條直線beginFill指定一種顏色進行填充lineStyle指定線條樣式lineGradientStyle指定一種線條樣式的漸變beginGradientFill指定一種填充樣式的漸變我們來一個個的來了解.首先要了解的并不是怎么去繪制而是設(shè)定繪制的樣式顏色樣式設(shè)置beginFill指定一種顏色進行填充這里用到：beginFill指定一種顏色進行填充在beginFill 里面有2個參數(shù).第一個是十六進制的顏色，第二個是填充的透明度(可選).實例： IIvar g = $.crea

16、teShape(x:50,y:50,lifeTime:3,alpha:);I II這里用的一長串就是設(shè)置g的填充顏色以及透明度.兩個都是有效的.graphics則是是提供繪圖的 API.以后使用的時候都會用到這個.后面小括號內(nèi)就是參數(shù)了 .注：graphics前面的g必須是創(chuàng)建圖形對象的名字.lineGradientStyle beginGradientFill指定一種線條樣式，填充樣式的漸變這里需要用到：lineGradientStyle指定一種線條樣式的漸變beginGradientFill指定一種填充樣式的漸變詳細請看：鏈接III linear, 0XFF0000, 0 x00FF00,

17、0 x0000FF,1,1,1,0 x00,0 x7f,0 xff, $.createGradientBox(20, 20, 0, 0, 0),reflect,rgb,0);I IIItype上例參數(shù)linear用于指定要使用哪種漸變類型的GradientType 類的通或。colors 上例參數(shù)0 xFF0000, 0 x00FF00,0 x0000FF要在漸變中使用的RGB十六進制顏色值數(shù)組(例如，紅色為 0 xFF0000 ,藍色為0 x0000FF等等)。alphas 上例參數(shù)1,1,1 colors數(shù)組中對應(yīng)顏色的 alpha 值數(shù)組；有效值為 0到100。如果值小于 0 , Fla

18、sh playe將使用0。如果值大于100 , Flash Player 將使用100。Ratios 上例參數(shù)0 x00,0 x7f,0 xff顏色分布比率的數(shù)組；有效值為 0到255。該值定義100%采樣的顏色所在位置的寬度百分比。值0表示漸變框中的左側(cè)位置，255表示漸變框中的右側(cè)位置。該值表示漸變框中的位置，而不是最終漸變的坐標空間，坐標空間可能比漸變框?qū)捇蛘閏olors參數(shù)中的每個值指定一個值。matrix上例參數(shù) $.createGradientBox(20, 20, 0, 0, 0)一個由 Matrix 類定義的轉(zhuǎn)換矩陣。Matrix 類包括createGradientBox(

19、) 方法，通過該方法可以方便地設(shè)置矩陣，以 便與 beginGradientFill()方法一起使用，亦可使用 $.createGradientBox() 。createGradientBox(20, 20, 0, 0, 0) 中 5 個數(shù)值分別是. width 一漸變框的寬度。height 漸變框的高度。rotation 旋轉(zhuǎn)量(以弧度為單位)。tx 一沿x軸向右平移的距離(以像素為單位)。此值將偏移 width 參數(shù)的一半。ty 一沿y軸向下平移的距離(以像素為單位)。此值將偏移height 參數(shù)的一半。spreadMethod上例參數(shù)reflect用于指定要使用哪種spread 方法的i

20、nterpolationMethod上例參數(shù)rgb用于指定要使用哪個值的值：linearRGB 或rgb例如，假設(shè)有兩種顏色之間的簡單線性漸變( spreadMethod參數(shù)設(shè)置為reflect )。 focalPointRatio 上例參數(shù)0一個控制漸變的焦點位置的數(shù)字。0表示焦點位于中心。1表示焦點位于漸變圓的一條邊界上。-1表示焦點位于漸變圓的另一條邊界上。小于-1或大于1的值將舍入為-1或1。實際運用：I-var g = $.createShape(x:50,y:50,lifeTime:5);linear, 0 xFF0000, 0 x00FF00,0 x0000FF,1,1,1,0

21、x00,0 x7f,0 xff, null,reflect,0);在實際運用中后面幾個可以不填寫或者值為null但是其中的colors ,alphas, Ratios 數(shù)組必須存在并且對應(yīng)數(shù)組長度.另Ratios數(shù)組內(nèi)數(shù)值必須從小到大lineStyle指定線條樣式這里用到：lineStyle 指定線條樣式I0 x000000, 1, false, vertical,none, miter, 10）;I I I IIthickness上例參數(shù)1一個整數(shù)，以磅為單位表示線條的粗細；有效值為0到255。如果未指定數(shù)字，或者未定義該參數(shù)，則不繪制線條。如果傳遞的值小于 0,則默認值為0。值0表示極細的

22、粗細；最大粗細為255。如果傳遞的值大于255 ,則默認值為255。color 上例參數(shù) 0 x000000線條的十六進制顏色值（例如，紅色為0 xFF0000 ,藍色為0X0000FF等）。如果未指明值，則默認值為0 x000000 （黑色）。可選。alpha上例參數(shù)1表示線條顏色的Alpha值的數(shù)字；有效值為0到1。如果未指明值，則默認值為1 （純色）。如果值小于0 ,則默認值為0。如果值大于1 ,則默認值為1。pixelHinting 上例參數(shù)false用于指定是否提示筆觸采用完整像素的布爾值。scaleMode 上例參數(shù)vertical用于指定要使用哪種縮放模式的LineScaleMo

23、de 類的值：normal -在縮放對象時總是縮放線條的粗細（默認值）。none - 從不縮放線條粗細。vertical -如果僅 垂直縮放對象，則不縮放線條粗細。horizontal -*如果僅 水平縮放對象，則不縮放線條粗細。caps 上例參數(shù)none用于指定線條末端處端點類型的CapsStyle 類的值。有效值為：none、round 和square.如果未指示值，則 Flash 使用圓頭端點。joints 上例參數(shù)miter Jointstyle類的值，指定用于拐角的連接外觀的類型。有效值為：bevel、miter和round 。 如果未指示值，則 Flash 使用圓角連接。miter

24、Limit上例參數(shù)10一個表示將在哪個限制位置切斷尖角的數(shù)字。有效值的范圍是1到255 （超出該范圍的值將舍入為1或255 ）。miterLimit 值：小于此角度將被切斷：90度 TOC o 1-5 h z 260度430度815度實例：I IIvar g = $.createShape（x:100,y:100,lifeTime:5）;0 x000000, 1, false, vertical,none, miter, 10）;II1.4.2 圖形的繪制這里用到curveTo使用當(dāng)前線條樣式繪制一條二次貝塞爾曲線drawCircle繪制一個圓.drawEllipse繪制一個橢圓drawRec

25、t繪制一個矩形drawRoundRect繪制一個圓角矩形lineTo使用當(dāng)前線條樣式繪制一條直線moveTo移動繪畫位置到一個點這里先說明繪畫位置的問題.使用createShape命令內(nèi)參數(shù)軸的位置為初始繪畫位置 使用moveTo命令可以移動當(dāng)前繪畫位置.例移動繪畫位置到 x軸100,y軸100的位置.繪制一條直線命令:lineTo();參數(shù)：lineTo(x,y);參數(shù)說明：x:相對于父顯示對象的水平坐標.y:相對于父顯示對象的垂直坐標.例：=$.createShape(x:100,y:100,lifeTime:5);以上彈幕看不到直線的？因為繪制線條之前必須設(shè)置線條樣式或者設(shè)置填充樣式繪制

26、一個 封閉圖形.正確的使用方法：var g = $.createShape(x:100,y:100,lifeTime:5);0 x000000, 1, false, vertical,none, miter, 10);說明：該直線繪制直線的位置并不是播放器的x:200 , y:200而是相對與createShape中100,100的基礎(chǔ)上的x:200 , y:200,也就是實際位置在播放器的x:300,y:300.設(shè)置填充樣式繪制一個封閉圖形：var g = $.createShape(x:200,y:200,lifeTime:5);當(dāng)需要繪制多條不連續(xù)的直線時則需要使用到moveTo();例

27、var g = $.createShape(x:200,y:200,lifeTime:5);0 x0000FF, 1, false, vertical,none, miter, 10);1.4.2繪制一條二次貝塞爾曲線命令：curveTo();參數(shù)：curveTo( controlX , control Y, anchorX , anchorY );參數(shù)說明：controlX :指定控制點相對于父顯示對象注冊點的水平位置control Y:指定控制點相對于父顯示對象注冊點的垂直位置anchorX :指定下一個錨點相對于父顯示對象注冊點的水平位置anchorY :指定下一個錨點相對于父顯示對象注

28、冊點的垂直位置這里我們先不看例子.先來理解一下什么是控制點，什么是錨點.詳細請看圖以這樣一個三角來確定繪制曲線.實例：IIIIvar g = $.createShape(x:100,y:100,lifeTime:5);0 x0000FF, 1, false, vertical,none, miter”, 10);1.4.2 繪制一個圓命令：drawCircle ();參數(shù)：drawCircle ( x, y, radius );參數(shù)說明：x:相對于父顯示對象注冊點的水平位置y:相對于父顯示對象注冊點的垂直位置radius :圓的半徑實例：IIIvar g = $.createShape(x:1

29、00,y:100,lifeTime:5);I1.4.2 繪制一個橢圓命令:drawEllipse ();參數(shù)：drawEllipse ( x, y, width,height );參數(shù)說明：x:相對于父顯示對象注冊點的水平位置y:相對于父顯示對象注冊點的垂直位置width :橢圓的寬度height :橢圓的高度var g = $.createShape(x:100,y:100,lifeTime:5);I iI1.4.2 繪制一個矩形命令：drawRect ();參數(shù)：drawRect ( x, y, width,height );參數(shù)說明：x:相對于父顯示對象注冊點的水平位置y：相對于父顯示對

30、象注冊點的垂直位置width :矩形的寬度height :矩形的高度實例： TOC o 1-5 h z IIIIvar g = $.createShape(x:100,y:100,lifeTime:5);LI _I1.4.2繪疝一個向鋁危放命令：drawRoundRect ();參數(shù)：drawRoundRect ( x, y, width,height, ellipseWidth, ellipseHeight );參數(shù)說明：x:相對于父顯示對象注冊點的水平位置y:相對于父顯示對象注冊點的垂直位置width :矩形的寬度height :矩形的高度ellipseWidth :繪制圓角的寬度.ell

31、ipseHeigh t:繪制圓角的高度.實例： TOC o 1-5 h z rIIvar g = $.createShape(x:100,y:100,lifeTime:5);iiLiII至R有繪桶而鹵極欣麗司了一放落.這殺需函電山而是很高級!幕設(shè)亶參藪手而是前以先前設(shè)定的變量代替參數(shù).例：I1IIvar width = 30;var g = $.createShape(x:100,y:100,lifeTime:5);IIIIIII a-M h nmjJ這樣寫是完全沒問題.文本對象也是完全可以這么使用的.至此高級彈幕里最最基礎(chǔ)的部分也已經(jīng)告了一段落.接下來的教程中講重點講創(chuàng)建后具體使用方面的知識

32、.怎么運用其他工具讓高級彈幕更上一層樓.第二章使用其他工具工具庫使用命令：hue：將0-360的值映射到色相環(huán)上rgb :將RGB映射到色彩值上formatTimes :格式化播放時間delay :延遲執(zhí)行函數(shù)interval :定時執(zhí)行函數(shù)distance :計算座標距離rand : rand 返回一個偽隨機數(shù) n , 其中 min = n max 。2.1.1 hue 將0-360的值映射到色相環(huán)上命令：()；參數(shù)：(V)；參數(shù)說明：例361等同255后的余V：取值范圍：一個正整數(shù).0-360,如果超過360將自動換成除以360后的余數(shù).與1；例：IIIvar v = 140;var co

33、lor = (v);var g = $.createShape(x:100,y:100,lifeTime:5);I I-2：1：2 ;g一落-rg麗成ij日面彩相王一命令：()；參數(shù)：(r,g,b);參數(shù)說明：r: RGB中紅色的值.取值范圍：一個正整數(shù)，0-255,如果超過255將自動換成除以 數(shù).g: RGB中綠色的值.同上b: RGB中藍色的值.同上n no 尸尸 nnff 尸尸Lim l hfi n ho n ho nm n hi l . .fT1 .f in1 hi . -. - i ivar color = (255,255,255);var g = $.createShape(x

34、:100,y:100,lifeTime:5);II formatTimes格式化播放時間命令：Utils. formatTimes ();參數(shù)： Utils. formatTimes (time);參數(shù)說明：time : 一個數(shù)字.格式化后將變成00:00的文本形式.例：IIIvar t = 1000);:var c =視頻時間：+t;var g = $.createComment(c,x:100,y:100,lifeTime:5);timer延遲執(zhí)行函數(shù)命令：timer ();參數(shù)：timer (f,time);參數(shù)說明：也 要延遲執(zhí)彳T的函數(shù).time :延遲執(zhí)行的時間.以毫秒為單位例：t

35、imer(function()var g = $.createShape(x:100,y:100,lifeTime:5);interval定面重復(fù)坂行國數(shù)命令：interval ();參數(shù)：interval(f,time,times);參數(shù)說明：f:要延遲執(zhí)彳T的函數(shù).time :延遲執(zhí)行的時間.以毫秒為單位times :執(zhí)行函數(shù)的次數(shù).例：var g = $.createShape(x:100,y:100,lifeTime:5);說明：每隔1秒繪制的圓向右移 40像素.distance計算坐標距離命令：();參數(shù)：(x1,y1,x2,y2);參數(shù)說明：x1:計算起始坐標x軸y1x2y2計算起

36、始坐標y軸 計算結(jié)束坐標x軸計算結(jié)束坐標y軸var d = (100,100,200,200);I II Ivar g = $.createShape(x:100,y:100,lifeTime:5);0 x0000FF, 1, false, vertical,none, miter, 10);I創(chuàng)建新的Point (一個點).命令：$.createPoint ();參數(shù)：$.createPoint (x,y);參數(shù)說明：x:坐標x軸y:坐標y軸例：var p1 = $.createPoint (100,100);var p2 = $.createPoint (200,200);var d =,;var g = $.createShape(x:100,y:100,lifeTime:5);0 x0000FF, 1, false, vertical,none, miter, 10);解釋：創(chuàng)建2個新的Point對象并計算坐標距離.并繪制一條長為此距離的直線rand返回一個前閉后開的整數(shù)命令：（）；參