bilibili代码弹幕初阶入门教程.docx
《bilibili代码弹幕初阶入门教程.docx》由会员分享，可在线阅读，更多相关《bilibili代码弹幕初阶入门教程.docx（18页珍藏版）》请在冰豆网上搜索。
bilibili代码弹幕初阶入门教程
前言
高级弹幕不难.基础的部分非常简单.只需要你花上一点时间就可以轻松上手.重要的是需要对作品的理解以及对时间的把握.无论什么弹幕只需要一颗有爱的心就够了.弹幕需要是爱与人参.所以我希望大家不要去使用高级弹幕去做不好的事情.
第一章初步了解高级弹幕
变量
创建文本弹幕对象
弹幕对象运动的设置
绘图弹幕对象创建以及设置
1.4.1颜色样式设置
1.4.1.1beginFill指定一种颜色进行填充
1.4.1.2lineGradientStylebeginGradientFill指定一种线条样式,填充样式的渐变
1.4.1.3lineStyle指定线条样式
1.4.2图形的绘制
1.4.2.1绘制一条直线
1.4.2.2绘制一条二次贝塞尔曲线
1.4.2.3绘制一个圆
1.4.2.4绘制一个椭圆
1.4.2.5绘制一个矩形
1.4.2.5绘制一个圆角矩形
第二章使用其他工具
工具库
2.1.1hue将0-360的值映射到色相环
2.1.2rgb将RGB值映射到色彩值上
2.1.3formatTimes格式化播放时间
2.1.4timer延迟执行函数
2.1.5interval定时重复执行函数
2.1.6distance计算坐标距离
2.1.7rand返回一个前闭后开的整数
Function函数的创建与使用
播放器控制
2.3.1视频时间跳转至
2.3.2跳转到指定av号指定页视频
第一章初步了解高级弹幕
第一节变量
废话不多说.我们先来看一句最基本的弹幕.
vara=1;
首先一次个关键字是”var”.该关键字的意思就是声明一个变量.变量说的简单点就是在后面的过程中可以给“a”重新赋值.
然后就是变量名”a”了,这玩意理解成名字就行了.至于关于变量名的规则有些关键字与保留字是不允许创建的.保留字，关键字
第三个是运算符”=”,首先等于号并不是数学中的等于意思.而是给声明的变量a赋值.将等号右边的值赋予给左边.
第四个”1”就是一个值了.结尾的分号表示该语句结束.
看到这里相信大家已经对这句弹幕有了基础的了解.这句话的意思就是：
声明变量”a”并且初始化其值为数字1.
写高级弹幕的时候请严格注意大小写.
var变量名=表达式;
第二节创建文本弹幕对象.
首先要知道bili的播放器的大小.像素为单位.
正常模式：
宽541高384
宽屏模式：
宽950搞528
全屏模式与网页全屏模式根据显示器分辨率来确定.
在高级弹幕中在实际弹幕时间会在发布时间轴填写的时间基础上减去约秒.所以请注意时间轴的问题
高级弹幕中创建新的文本弹幕对象要用到createComment（"",{}）这个语句.请看实例
vara=$.createComment（"text",{x:
100}）;
该弹幕的意思就是创建一个变量a并创建一个新弹幕对象赋于a.
我们可以这么理解createComment.他的括号内有2个参数.”text”是弹幕内容.｛x:
100｝是该弹幕参数x轴上的位置是100.
当然括号内的不可能只有x这一个参数.我们可以用到的有.
x—新创建元件的X轴座标
y—新创建元件的Y轴座标
z—新创建元件的Z轴座标
lifeTime—元件的生存时间（以秒为单位）注：
一旦设置不可更改
alpha—元件的透明度
color—文字类元件的色彩
fontsize—文字类元件的大小
parent—元件的父元件（进阶应用）
motion—元件移动策略
scale—缩放
那么我们来定义一个稍微复杂点的高级弹幕.
例：
varc=$.createComment（"text",{
x:
100,y:
100,
lifeTime:
10,
fontsize:
20,
color:
0x666666,
alpha:
}）;
（注：
参数之间以英文逗号区分,最后一个参数结尾无逗号）
大家可以预览一下这条弹幕.就是在x轴100,y轴100的位置创建一个内容是text的弹幕.该弹幕生存时间为10秒.字体大小为20号.十六进制颜色为灰色.透明度.
那么.到了这里大家应该已经知道怎么去在一个点创建弹幕并设置该弹幕各项参数.
接下来就来说一下在创建后各项属性的更改与设置.
现在.声明变量c并创建了一个弹幕内容为"测试"的弹幕.它的x轴为50,y轴为100.
例：
varc=$.createComment（"测试",{x:
50,y:
100}）;
那么如果我们现在需要让他的位置x轴不变y轴变更到50.那么我们这个时候就需要直接更改弹幕的某一个参数.只需要在弹幕后面加上.
=50;
（注：
更改颜色的语句不是而是.注意大小写）
此外还有比较常用的就是旋转3个轴的设置.
rotationY,rotationZ.
例:
=90;
另还有些参数也可以设置.详细参考
训练题：
1.声明变量c并创建一条弹幕对象.其内容为空.其属性为X轴为轴为190.生存时间5秒.字体颜色为0xff0000,透明度为.字体大小为15号.
2.更改c的x轴位置为200.透明度更改为1.颜色为0xfff000.
弹幕对象运动的设置
在上一个章节中学习了如何创建文本对象和设置文本对象的参数.这次就讲如何让创建的弹幕对象运动起来.这里我们要用到motion.下面请看一个例子.
varc=$.createComment（"移动测试",{
motion:
{
x:
{fromValue:
100,toValue:
250,lifeTime:
3}
},
lifeTime:
3
}）;
让我们来分析这条弹幕.
首先上已经了解过了createComment的用法.那么我直接来看到多出来的这个属性motion.
motion:
{x:
{fromValue:
100,toValue:
250,lifeTime:
3}}
在这里面其中x为需要移动的参数.x中的fromValue是x的起始位置toValue是结束位置.lifeTime是这个运动过程所花费的时间.（注:
如果在motion里面有起始值并且在motion外也设置的值,那么将显示motion里面的设置位置）
此外motion支持多属性同时运动.
例：
varc=$.createComment（"移动测试",{
motion:
{
x:
{fromValue:
100,toValue:
250,lifeTime:
3},
alpha:
{fromValue:
0,toValue:
1,liftTime:
3}
},
lifeTime:
3
}）;
这次除了移动x轴还添加了一个透明度从0到1的变化.
下面我们说一下在motion中有哪些是可以做变化的.
x:
移动x轴位置.
y:
移动y轴位置.
alpha:
透明度变换（有效值0-1）.
fontsize:
字体大小变换（不推荐使用.字号的变换较明显.
rotationX,rotationY,rotationX:
旋转x轴,旋转Y轴,旋转Z轴.
其中的属性值有:
必填fromValue起始移动属性值
可选toValue结束移动属性值如留空则不移动
可选lifeTime以秒为单位的移动生存时间如留空则与整体生存时间一致
可选startDelay以毫秒为单位的起始移动延时时间（毫秒为单位）
可选easing详细请看补间效果
可选repeat效果重复次数
下面我们来看一个相对复杂的例子
varc=$.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
}）;
在这个例子里面我们用到了startDelay这个属性.我们把这个代码拆开分了3段来看.
首先x轴的是从100移动到250.移动时间3秒.然后起始移动时间是500毫秒.也就是说x轴是在500毫秒后开始移动的.
然后是y轴从50移动到250移动时间3秒.
最后是透明度从0到1变化时间为秒.重复执行6次.
把这三个参数整合在一起就变成了.移动测试从x：
100,y：
50的位置开始移动,并且透明度最开始是0.由于x有一个起始移动时间.但是y轴跟透明度变化已经开始.所以首先"移动测试"会先渐入的向下移动.500毫秒后x开始移动这个时候y轴的移动还没有停第一次的透明度改变已经结束.所以x,y轴这个时候是同时移动的.最后结果回是往右下移动并且透明度会重复的从0到1..
虽然可以使用repeat这个属性执行重复的操作.但是这个是远远不能满足复杂的移动效果的.然而去创建很多motion也是很麻烦的.这里我就需要用到motionGroup了.motionGroup能执行多个motion连续运动.
我们来看一个实例.
varc=$.createComment（"弹幕测试",{
x:
100,y:
50,
motionGroup:
[
{x:
{fromValue:
100,toValue:
200,lifeTime:
1},alpha:
{fromValue:
0,toValue:
1,lifeTime:
1}},
{y:
{fromValue:
50,toValue:
150,lifeTime:
1},alpha:
{fromValue:
1,toValue:
0,lifeTime:
1}}
]
}）;）
以上弹幕就是使用一个组将两个移动连接在了一起→↓.需要注意的是motionGroup的冒号后面的是英文中括号.并且每一次移动包括透明度都最好加上lifeTime并且每一个motion中的lifeTime的时间必须一致..每一次motion之间用英文逗号相隔.最后一个结尾无符号.
绘图弹幕对象创建以及设置
使用命令：
createShape
例子：
varg=$.createShape（{x:
50,y:
50,lifeTime:
3,alpha:
}）;
首先创建一个新的图形对象.里面可以设置的内容同文本对象（位置,生存时间,透明度,运动设置等方法同creatComment）.
绘图需要使用到的：
curveTo使用当前线条样式绘制一条二次贝塞尔曲线
drawCircle绘制一个圆.
drawEllipse绘制一个椭圆
drawRect绘制一个矩形
drawRoundRect绘制一个圆角矩形
lineTo绘制一条直线
beginFill指定一种颜色进行填充
lineStyle指定线条样式
lineGradientStyle指定一种线条样式的渐变
beginGradientFill指定一种填充样式的渐变
我们来一个个的来了解.首先要了解的并不是怎么去绘制而是设定绘制的样式
1.4.1颜色样式设置
1.4.1.1beginFill指定一种颜色进行填充
这里用到：
beginFill指定一种颜色进行填充
在beginFill里面有2个参数.第一个是十六进制的颜色,第二个是填充的透明度（可选）.
实例：
varg=$.createShape（{x:
50,y:
50,lifeTime:
3,alpha:
}）;
这里用的一长串就是设置g的填充颜色以及透明度.两个都是有效的.
graphics则是是提供绘图的API.以后使用的时候都会用到这个.后面小括号内就是参数了.
注：
graphics前面的g必须是创建图形对象的名字.
1.4.1.2lineGradientStylebeginGradientFill指定一种线条样式,填充样式的渐变
这里需要用到：
lineGradientStyle指定一种线条样式的渐变
beginGradientFill指定一种填充样式的渐变
详细请看：
链接
"linear",[0xFF0000,0x00FF00,0x0000FF],[1,1,1],[0x00,0x7f,0xff],$.createGradientBox（20,20,0,0,0）,"reflect","rgb",0）;
type上例参数"linear"用于指定要使用哪种渐变类型的GradientType类的值：
或。
colors上例参数[0xFF0000,0x00FF00,0x0000FF]要在渐变中使用的RGB十六进制颜色值数组（例如，红色为0xFF0000，蓝色为0x0000FF等等）。
alphas上例参数[1,1,1]colors数组中对应颜色的alpha值数组；有效值为0到100。
如果值小于0，Flashplaye将使用0。
如果值大于100，FlashPlayer将使用100。
Ratios上例参数[0x00,0x7f,0xff]颜色分布比率的数组；有效值为0到255。
该值定义100%采样的颜色所在位置的宽度百分比。
值0表示渐变框中的左侧位置，255表示渐变框中的右侧位置。
该值表示渐变框中的位置，而不是最终渐变的坐标空间，坐标空间可能比渐变框宽或窄。
为colors参数中的每个值指定一个值。
matrix上例参数$.createGradientBox（20,20,0,0,0）一个由Matrix类定义的转换矩阵。
Matrix类包括createGradientBox（）方法，通过该方法可以方便地设置矩阵，以便与beginGradientFill（）方法一起使用，亦可使用$.createGradientBox（）。
createGradientBox（20,20,0,0,0）中5个数值分别是.
width—渐变框的宽度。
height—渐变框的高度。
rotation—旋转量（以弧度为单位）。
tx—沿x轴向右平移的距离（以像素为单位）。
此值将偏移width参数的一半。
ty—沿y轴向下平移的距离（以像素为单位）。
此值将偏移height参数的一半。
spreadMethod上例参数"reflect"用于指定要使用哪种spread方法的
interpolationMethod上例参数"rgb"用于指定要使用哪个值的值：
linearRGB或rgb
例如，假设有两种颜色之间的简单线性渐变（spreadMethod参数设置为reflect）。
focalPointRatio上例参数"0"一个控制渐变的焦点位置的数字。
0表示焦点位于中心。
1表示焦点位于渐变圆的一条边界上。
-1表示焦点位于渐变圆的另一条边界上。
小于-1或大于1的值将舍入为-1或1。
实际运用：
varg=$.createShape（{x:
50,y:
50,lifeTime:
5}）;
"linear",[0xFF0000,0x00FF00,0x0000FF],[1,1,1],[0x00,0x7f,0xff],null,"reflect",0）;
在实际运用中后面几个可以不填写或者值为null但是其中的colors,alphas,Ratios数组必须存在并且对应数组长度.另Ratios数组内数值必须从小到大
1.4.1.3lineStyle指定线条样式
这里用到：
lineStyle指定线条样式
0x000000,1,false,"vertical","none","miter",10）;
thickness上例参数1一个整数，以磅为单位表示线条的粗细；有效值为0到255。
如果未指定数字，或者未定义该参数，则不绘制线条。
如果传递的值小于0，则默认值为0。
值0表示极细的粗细；最大粗细为255。
如果传递的值大于255，则默认值为255。
color上例参数0x000000线条的十六进制颜色值（例如，红色为0xFF0000，蓝色为0x0000FF等）。
如果未指明值，则默认值为0x000000（黑色）。
可选。
alpha上例参数1表示线条颜色的Alpha值的数字；有效值为0到1。
如果未指明值，则默认值为1（纯色）。
如果值小于0，则默认值为0。
如果值大于1，则默认值为1。
pixelHinting上例参数false用于指定是否提示笔触采用完整像素的布尔值。
scaleMode上例参数"vertical"用于指定要使用哪种缩放模式的LineScaleMode类的值：
normal--在缩放对象时总是缩放线条的粗细（默认值）。
none--从不缩放线条粗细。
vertical--如果仅垂直缩放对象，则不缩放线条粗细。
horizontal--*如果仅水平缩放对象，则不缩放线条粗细。
caps上例参数"none"用于指定线条末端处端点类型的CapsStyle类的值。
有效值为：
none、round和square.如果未指示值，则Flash使用圆头端点。
joints上例参数"miter"JointStyle类的值，指定用于拐角的连接外观的类型。
有效值为：
bevel、miter和round。
如果未指示值，则Flash使用圆角连接。
miterLimit上例参数10一个表示将在哪个限制位置切断尖角的数字。
有效值的范围是1到255（超出该范围的值将舍入为1或255）。
miterLimit值：
小于此角度将被切断：
90度
260度
430度
815度
实例：
varg=$.createShape（{x:
100,y:
100,lifeTime:
5}）;
0x000000,1,false,"vertical","none","miter",10）;
1.4.2图形的绘制
这里用到
curveTo使用当前线条样式绘制一条二次贝塞尔曲线
drawCircle绘制一个圆.
drawEllipse绘制一个椭圆
drawRect绘制一个矩形
drawRoundRect绘制一个圆角矩形
lineTo使用当前线条样式绘制一条直线
moveTo移动绘画位置到一个点
这里先说明绘画位置的问题.
使用createShape命令内参数轴的位置为初始绘画位置.
使用moveTo命令可以移动当前绘画位置.
例
移动绘画位置到x轴100,y轴100的位置.
1.4.2.1绘制一条直线
命令：
lineTo（）;
参数：
lineTo（x,y）;
参数说明：
x:
相对于父显示对象的水平坐标.
y:
相对于父显示对象的垂直坐标.
例：
varg=$.createShape（{x:
100,y:
100,lifeTime:
5}）;
以上弹幕看不到直线的？
因为绘制线条之前必须设置线条样式或者设置填充样式绘制一个封闭图形.
正确的使用方法：
varg=$.createShape（{x:
100,y:
100,lifeTime:
5}）;
0x000000,1,false,"vertical","none","miter",10）;
说明:
该直线绘制直线的位置并不是播放器的x:
200，y:
200而是相对与createShape中100，100的基础上的x:
200，y:
200.也就是实际位置在播放器的x:
300,y:
300.
设置填充样式绘制一个封闭图形：
varg=$.createShape（{x:
200,y:
200,lifeTime:
5}）;
当需要绘制多条不连续的直线时则需要使用到moveTo（）;
例
varg=$.createShape（{x:
200,y:
200,lifeTime:
5}）;
0x0000FF,1,false,"vertical","none","miter",10）;
1.4.2绘制一条二次贝塞尔曲线
命令：
curveTo（）;
参数：
curveTo（controlX,controlY,anchorX,anchorY）;
参数说明：
controlX:
指定控制点相对于父显示对象注册点的水平位置
controlY:
指定控制点相对于父显示对象注册点的垂直位置
anchorX:
指定下一个锚点相对于父显示对象注册点的水平位置
anchorY:
指定下一个锚点相对于父显示对象注册点的垂直位置
这里我们先不看例子.先来理解一下什么是控制点,什么是锚点.详细请看图.
以这样一个三角来确定绘制曲线.
实例:
varg=$.createShape（{x:
100,y:
100,lifeTime:
5}）;
0x0000FF,1,false,"vertical","none","miter",10）;
1.4.2绘制一个圆
命令：
drawCircle（）;
参数：
drawCircle（x,y,radius）;
参数说明：
x:
相对于父显示对象注册点的水平位置
y:
相对于父显示对象注册点的垂直位置
radius:
圆的半径
实例:
varg=$.createShape（{x:
100,y:
100,lifeTime:
5}）;
1.4.2绘制一个椭圆
命令：
drawEllipse（）;
参数：
drawEllipse（x,y,width,height）;
参数说明：
x:
相对于父显示对象注册点的水平位置
y:
相对于父显示对象注册点的垂直位置
width:
椭圆的宽度
height:
椭圆的高度
实例:
varg=$.createShape（{x:
100,y:
100,lifeTime:
5}）;
1.4.2绘制一个矩形
命令：
drawRect（）;
参数：
drawRect（x,y,width,height）;
参数说明：
x:
相对于父显示对象注册点的水平位置
y:
相对于父显示对象注册点的垂直位置
width:
矩形的宽度
height:
矩形的高度
实例:
varg=$.createShape（{x:
100,y:
100,lifeTime:
5}）;
1.4.2绘制一个圆角矩形
命令：
drawRoundRect（）;
参数：
drawRoundRect（x,y,width,height,ellipseWidth,ellipseHeight）;
参数说明：
x:
相对于父显示对象注册点的水平位置
y:
相对于父显示对象注册点的垂直位置
width:
矩形的宽度
height:
矩形的高度
ellipseWidth:
绘制圆角的宽度.
ellipseHeight:
绘制圆角的高度.
实例:
varg=$.createShape（{x:
100,y:
100,lifeTime:
5}）;
至此关于绘制的图像也基本到了一段落.这里需要说明的是在高级弹幕设置参数中都是可以先前设定的变量代替参数.例：
varwidth=30;
var
升级会员 