发布时间 : 星期一 文章bilibili高级弹幕初阶教程更新完毕开始阅读a5384472680203d8cf2f24de
目录
第一章 初步了解高级弹幕
1.1 变量
1.2创建文本弹幕对象 1.3 弹幕对象运动的设置
1.4 绘图弹幕对象创建以及设置 1.4.1 颜色样式设置
1.4.1.1 beginFill 指定一种颜色进行填充
1.4.1.2 lineGradientStyle beginGradientFill 指定一种线条样式,填充样式的渐变 1.4.1.3 lineStyle 指定线条样式 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.1Utils 工具库
2.1.1 hue将0-360的值映射到色相环 2.1.2 rgb将RGB值映射到色彩值上 2.1.3 formatTimes格式化播放时间 2.1.4 timer 延迟执行函数
2.1.5 interval 定时重复执行函数 2.1.6 distance 计算坐标距离
2.1.7 rand 返回一个前闭后开的整数 2.2 Function 函数的创建与使用 2.3 播放器控制
2.3.1视频时间跳转至
2.3.2 跳转到指定av号指定页视
第一章 初步了解高级弹幕
1.1 第一节 变量
废话不多说.我们先来看一句最基本的弹幕. var a = 1;
首先一次个关键字是”var”.该关键字的意思就是声明一个变量.变量说的简单点就是在后面的过程中可以给 “a” 重新赋值.
然后就是变量名”a”了,这玩意理解成名字就行了.至于关于变量名的规则有些关键字与保留字是不允许创建的.保留字，关键字
第三个是运算符”=”,首先等于号并不是数学中的等于意思.而是给声明的变量a赋值.将等号右边的值赋予给左边.
第四个”1”就是一个值了.结尾的分号表示该语句结束.
看到这里相信大家已经对这句弹幕有了基础的了解.这句话的意思就是： 声明变量”a”并且初始化其值为数字1. 写高级弹幕的时候请严格注意大小写. var 变量名 = 表达式;
1.2 第二节 创建文本弹幕对象.
首先要知道bili的播放器的大小.像素为单位. 正常模式：宽541 高384 宽屏模式：宽950 搞528
全屏模式与网页全屏模式根据显示器分辨率来确定.
在高级弹幕中在 实际弹幕时间会在发布时间轴填写的时间基础上减去约0.2秒.所以请注意时间轴的问题
高级弹幕中创建新的文本弹幕对象要用到createComment（\）这个语句.请看实例
var a = $.createComment(\
该弹幕的意思就是 创建一个变量a并创建一个新弹幕对象赋于a.
我们可以这么理解createComment.他的括号内有2个参数.”text”是弹幕内容.｛x:100｝是该弹幕参数x轴上的位置是100.
当然括号内的不可能只有x这一个参数.我们可以用到的有. x — 新创建元件的X轴座标 y — 新创建元件的Y轴座标 z — 新创建元件的Z轴座标
lifeTime — 元件的生存时间(以秒为单位)注：一旦设置不可更改
alpha — 元件的透明度 color — 文字类元件的色彩 fontsize — 文字类元件的大小
parent — 元件的父元件 (进阶应用) motion — 元件移动策略 scale — 缩放
那么我们来定义一个稍微复杂点的高级弹幕. 例：
var c = $.createComment(\x:100,y:100, lifeTime:10, fontsize:20, color:0x666666, alpha:0.8 });
(注：参数之间以英文逗号区分,最后一个参数结尾无逗号)
大家可以预览一下这条弹幕.就是在x轴100,y轴100的位置创建一个内容是text的弹幕.该弹幕生存时间为10秒.字体大小为20号.十六进制颜色为灰色.透明度0.8.
那么.到了这里大家应该已经知道怎么去在一个点创建弹幕并设置该弹幕各项参数. 接下来就来说一下在创建后各项属性的更改与设置.
现在.声明变量c并创建了一个弹幕内容为\测试\的弹幕.它的x轴为50,y轴为100. 例：
var c = $.createComment(\测试\
那么如果我们现在需要让他的位置x轴不变y轴变更到50.那么我们这个时候就需要直接更改弹幕的某一个参数.只需要在弹幕后面加上. c.y = 50;
（注：更改颜色的语句不是c.color而是c.textColor.注意大小写） 此外还有比较常用的就是旋转3个轴的设置. c.rotationX,rotationY,rotationZ. 例:
c.rotationX=90;
另还有些参数也可以设置.详细参考
训练题：
1. 声明变量c并创建一条弹幕对象.其内容为空.其属性为X轴为270.Y轴为190.生存时间
5秒.字体颜色为0xff0000,透明度为0.5.字体大小为15号. 2. 更改c的x轴位置为200.透明度更改为1.颜色为0xfff000.
1.3 弹幕对象运动的设置
在上一个章节中学习了如何创建文本对象和设置文本对象的参数.这次就讲如何让创建的弹幕对象运动起来.这里我们要用到motion.下面请看一个例子.
var c = $.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里面x.y有起始值并且在motion外也设置x.y的值,那么将显示motion里面的设置位置)
此外motion支持多属性同时运动. 例：
var c = $.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）.