第一章 初步了解高级弹幕
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号指定页视频

看到这里相信大家已经对这句弹幕有了基础的了解.这句话的意思就是：
声明变量”a”并且初始化其值为数字1.
写高级弹幕的时候请严格注意大小写.
var 变量名 = 表达式;

1.2 第二节 创建文本弹幕对象.
首先要知道bili的播放器的大小.像素为单位.
正常模式：宽541 高384
宽屏模式：宽950 搞528
全屏模式与网页全屏模式根据显示器分辨率来确定.
在高级弹幕中在 实际弹幕时间会在发布时间轴填写的时间基础上减去约0.2秒.所以请注意时间轴的问题
高级弹幕中创建新的文本弹幕对象要用到createComment（"",{}）这个语句.请看实例
var a = $.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 — 缩放
那么我们来定义一个稍微复杂点的高级弹幕.
例：
var c = $.createComment("text",{
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:50,y:100});
那么如果我们现在需要让他的位置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号.
更改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）.
fontsize:字体大小变换（不推荐使用.字号的变换较明显.
rotationX, rotationY, rotationX:旋转x轴,旋转Y轴,旋转Z轴.
其中的属性值有:
必填 fromValue
起始移动属性值
可选 toValue 结束移动属性值
如留空则不移动
可选 lifeTime 以秒为单位的移动生存时间
如留空则与整体生存时间一致
可选 startDelay
以毫秒为单位的起始移动延时时间（毫秒为单位）
可选 easing 详细请看补间效果
可选 repeat 效果重复次数
下面我们来看一个相对复杂的例子
var 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:0.5,repeat:6}
},
lifeTime:3
});


在这个例子里面我们用到了startDelay这个属性.我们把这个代码拆开分了3段来看.
首先x轴的是从100移动到250.移动时间3秒.然后起始移动时间是500毫秒.也就是说x轴是在500毫秒后开始移动的.
然后是y轴从50移动到250移动时间3秒.
最后是透明度从0到1变化时间为0.5秒.重复执行6次.
把这三个参数整合在一起就变成了.移动测试从x：100,y：50的位置开始移动,并且透明度最开始是0.由于x有一个起始移动时间.但是y轴跟透明度变化已经开始.所以首先"移动测试"会先渐入的向下移动.500毫秒后x开始移动这个时候y轴的移动还没有停第一次的透明度改变已经结束.所以x,y轴这个时候是同时移动的.最后结果回是往右下移动并且透明度会重复的从0到1..


虽然可以使用repeat这个属性执行重复的操作.但是这个是远远不能满足复杂的移动效果的.然而去创建很多motion也是很麻烦的.这里我就需要用到motionGroup了.motionGroup能执行多个motion连续运动.
我们来看一个实例.
var c = $.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之间用英文逗号相隔.最后一个结尾无符号.

1.4 绘图弹幕对象创建以及设置
使用命令：createShape
例子：
var g = $.createShape({x:50,y:50,lifeTime:3,alpha:0.5});
首先创建一个新的图形对象.里面可以设置的内容同文本对象（位置,生存时间,透明度,运动设置等方法同creatComment）.
绘图需要使用到的：
curveTo 使用当前线条样式绘制一条二次贝塞尔曲线
drawCircle 绘制一个圆.
drawEllipse 绘制一个椭圆
drawRect 绘制一个矩形
drawRoundRect 绘制一个圆角矩形
lineTo 绘制一条直线
beginFill 指定一种颜色进行填充
lineStyle 指定线条样式
lineGradientStyle 指定一种线条样式的渐变
beginGradientFill 指定一种填充样式的渐变
我们来一个个的来了解.首先要了解的并不是怎么去绘制而是设定绘制的样式
1.4.1颜色样式设置
1.4.1.1 beginFill
指定一种颜色进行填充
这里用到：
beginFill 指定一种颜色进行填充
beginFill里面有2个参数.第一个是十六进制的颜色,第二个是填充的透明度（可选）.
实例：
var g = $.createShape({x:50,y:50,lifeTime:3,alpha:0.5});
g.graphics.beginFill(0xff0000,0.5);
g.graphics.beginFill(0xff0000);
这里用的一长串就是设置g的填充颜色以及透明度.两个都是有效的.
graphics则是是提供绘图的API.以后使用的时候都会用到这个.后面小括号内就是参数了.
注：graphics前面的g必须是创建图形对象的名字.


1.4.1.2 lineGradientStyle beginGradientFill 指定一种线条样式,填充样式的渐变
这里需要用到：
lineGradientStyle 指定一种线条样式的渐变
beginGradientFill 指定一种填充样式的渐变
详细请看：链接
g.graphics.beginGradientFill("linear",
[0xFF0000, 0x00FF00,0x0000FF],[1,1,1],[0x00,0x7f,0xff] ,
$.createGradientBox(20, 20, 0, 0, 0),"reflect","rgb",0);
type 上例参数"linear" 用于指定要使用哪种渐变类型的 GradientType 类的值：GradientType.LINEAR 或 GradientType.RADIAL。
colors 上例参数[0xFF0000, 0x00FF00,0x0000FF] 要在渐变中使用的 RGB 十六进制颜色值数组（例如，红色为 0xFF0000，蓝色为 0x0000FF 等等）。
alphas 上例参数[1,1,1] colors 数组中对应颜色的 alpha 值数组；有效值为 0 到100。 如果值小于 0，Flash playe将使用 0。 如果值大于
100，Flash Player 将使用 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。
实际运用：
var g = $.createShape({x:50,y:50,lifeTime:5});
g.graphics.beginGradientFill("linear",
[0xFF0000, 0x00FF00,0x0000FF],[1,1,1],[0x00,0x7f,0xff] , null,"reflect",0);
g.graphics.drawCircle(0,0,50);
g.graphics.endFill();
在实际运用中后面几个可以不填写或者值为null但是其中的colors ,alphas, Ratios数组必须存在并且对应数组长度.另Ratios数组内数值必须从小到大

1.4.2.1 绘制一条直线
命令：lineTo();
参数：lineTo(x,y);
参数说明：
x:相对于父显示对象的水平坐标.
y:相对于父显示对象的垂直坐标.
例：
var g =
$.createShape({x:100,y:100,lifeTime:5});
g.graphics.lineTo(200,200);
g.graphics.endFill();
以上弹幕看不到直线的？因为绘制线条之前必须设置线条样式或者设置填充样式绘制一个封闭图形.
正确的使用方法：
var g =
$.createShape({x:100,y:100,lifeTime:5});
g.graphics.lineStyle(1, 0x000000,
1, false, "vertical","none", "miter", 10);
g.graphics.lineTo(200,200);
g.graphics.endFill();
说明:该直线绘制直线的位置并不是播放器的x:200，y:200而是相对与createShape中100，100的基础上的x:200，y:200.也就是实际位置在播放器的x:300,y:300.
设置填充样式绘制一个封闭图形：
var g = $.createShape({x:200,y:200,lifeTime:5});
g.graphics.beginFill(0xff0000);
g.graphics.lineTo(200,200);
g.graphics.lineTo(100,200);
g.graphics.lineTo(100,100);
g.graphics.endFill();
当需要绘制多条不连续的直线时则需要使用到moveTo();
例
var g = $.createShape({x:200,y:200,lifeTime:5});g.graphics.lineStyle(1, 0x0000FF, 1, false, "vertical","none", "miter", 10);g.graphics.lineTo(100,100);g.graphics.moveTo(0,0);g.graphics.lineTo(-100,100);g.graphics.endFill();

1.4.2.2 绘制一条二次贝塞尔曲线
命令：curveTo();
参数：curveTo(controlX, controlY, anchorX, anchorY);
参数说明：
controlX: 指定控制点相对于父显示对象注册点的水平位置
controlY: 指定控制点相对于父显示对象注册点的垂直位置
anchorX: 指定下一个锚点相对于父显示对象注册点的水平位置
anchorY: 指定下一个锚点相对于父显示对象注册点的垂直位置
这里我们先不看例子.先来理解一下什么是控制点,什么是锚点.详细请看图.
以这样一个三角来确定绘制曲线.
实例:
var g = $.createShape({x:100,y:100,lifeTime:5});g.graphics.lineStyle(1, 0x0000FF, 1, false, "vertical","none", "miter", 10);g.graphics.curveTo(50,-50,100,0);g.graphics.endFill();
1.4.2.3 绘制一个圆
命令：drawCircle ();
参数：drawCircle (x, y, radius);
参数说明：
x: 相对于父显示对象注册点的水平位置
y: 相对于父显示对象注册点的垂直位置
radius: 圆的半径
实例:
var g = $.createShape({x:100,y:100,lifeTime:5});g.graphics.beginFill(0xff0000);g.graphics.drawCircle(0,0,30);
g.graphics.endFill();