bilibili高级弹幕代码初阶教程文档格式.docx
《bilibili高级弹幕代码初阶教程文档格式.docx》由会员分享,可在线阅读,更多相关《bilibili高级弹幕代码初阶教程文档格式.docx(21页珍藏版)》请在冰豆网上搜索。
2、1、2rgb将RGB值映射到色彩值上
2、1、3formatTimes格式化播放时间
2、1、4timer延迟执行函数
2、1、5interval定时重复执行函数
2、1、6distance计算坐标距离
2、1、7rand返回一个前闭后开得整数
2、2Function函数得创建与使用
2、3播放器控制
2、3、1视频时间跳转至
2、3、2跳转到指定av号指定页视频
1、1第一节变量
废话不多说、我们先来瞧一句最基本得弹幕、
vara=1;
首先一次个关键字就是”var”、该关键字得意思就就是声明一个变量、变量说得简单点就就是在后面得过程中可以给“a”重新赋值、
然后就就是变量名”a”了,这玩意理解成名字就行了、至于关于变量名得规则有些关键字与保留字就是不允许创建得、保留字,关键字
第三个就是运算符”=”,首先等于号并不就是数学中得等于意思、而就是给声明得变量a赋值、将等号右边得值赋予给左边、
第四个”1”就就是一个值了、结尾得分号表示该语句结束、
瞧到这里相信大家已经对这句弹幕有了基础得了解、这句话得意思就就是:
声明变量”a”并且初始化其值为数字1、
写高级弹幕得时候请严格注意大小写、
var变量名=表达式;
1、2第二节创建文本弹幕对象、
首先要知道bili得播放器得大小、像素为单位、
正常模式:
宽541高384
宽屏模式:
宽950搞528
全屏模式与网页全屏模式根据显示器分辨率来确定、
在高级弹幕中在实际弹幕时间会在发布时间轴填写得时间基础上减去约0、2秒、所以请注意时间轴得问题
高级弹幕中创建新得文本弹幕对象要用到createment("
"
{})这个语句、请瞧实例
vara=$、createment("
text"
{x:
100});
该弹幕得意思就就是创建一个变量a并创建一个新弹幕对象赋于a、
我们可以这么理解createment、她得括号内有2个参数、”text”就是弹幕内容、{x:
100}就是该弹幕参数x轴上得位置就是100、
当然括号内得不可能只有x这一个参数、我们可以用到得有、
x—新创建元件得X轴座标
y—新创建元件得Y轴座标
z—新创建元件得Z轴座标
lifeTime—元件得生存时间(以秒为单位)注:
一旦设置不可更改
alpha—元件得透明度
color—文字类元件得色彩
fontsize—文字类元件得大小
parent—元件得父元件(进阶应用)
motion—元件移动策略
scale—缩放
那么我们来定义一个稍微复杂点得高级弹幕、
例:
varc=$、createment("
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、
50,y:
那么如果我们现在需要让她得位置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、
在上一个章节中学习了如何创建文本对象与设置文本对象得参数、这次就讲如何让创建得弹幕对象运动起来、这里我们要用到motion、下面请瞧一个例子、
移动测试"
motion:
{
x:
{fromValue:
100,toValue:
250,lifeTime:
3}
},
3
让我们来分析这条弹幕、
首先上已经了解过了createment得用法、那么我直接来瞧到多出来得这个属性motion、
{x:
3}}
在这里面其中x为需要移动得参数、x中得fromValue就是x得起始位置toValue就是结束位置、lifeTime就是这个运动过程所花费得时间、(注:
如果在motion里面x、y有起始值并且在motion外也设置x、y得值,那么将显示motion里面得设置位置)
此外motion支持多属性同时运动、
3},
alpha:
0,toValue:
1,liftTime:
这次除了移动x轴还添加了一个透明度从0到1得变化、
下面我们说一下在motion中有哪些就是可以做变化得、
移动x轴位置、
y:
移动y轴位置、
透明度变换(有效值01)、
字体大小变换(不推荐使用、字号得变换较明显、
rotationX,rotationY,rotationX:
旋转x轴,旋转Y轴,旋转Z轴、
其中得属性值有:
必填fromValue起始移动属性值
可选toValue结束移动属性值如留空则不移动
可选lifeTime以秒为单位得移动生存时间如留空则与整体生存时间一致
可选startDelay以毫秒为单位得起始移动延时时间(毫秒为单位)
可选easing详细请瞧补间效果
可选repeat效果重复次数
下面我们来瞧一个相对复杂得例子
3,startDelay:
500},
y:
50,toValue:
250,lifteTime:
1,lifeTime:
0、5,repeat:
6}
在这个例子里面我们用到了startDelay这个属性、我们把这个代码拆开分了3段来瞧、
首先x轴得就是从100移动到250、移动时间3秒、然后起始移动时间就是500毫秒、也就就是说x轴就是在500毫秒后开始移动得、
然后就是y轴从50移动到250移动时间3秒、
最后就是透明度从0到1变化时间为0、5秒、重复执行6次、
把这三个参数整合在一起就变成了、移动测试从x:
50得位置开始移动,并且透明度最开始就是0、由于x有一个起始移动时间、但就是y轴跟透明度变化已经开始、所以首先"
会先渐入得向下移动、500毫秒后x开始移动这个时候y轴得移动还没有停第一次得透明度改变已经结束、所以x,y轴这个时候就是同时移动得、最后结果回就是往右下移动并且透明度会重复得从0到1、、
虽然可以使用repeat这个属性执行重复得操作、但就是这个就是远远不能满足复杂得移动效果得、然而去创建很多motion也就是很麻烦得、这里我就需要用到motionGroup了、motionGroup能执行多个motion连续运动、
我们来瞧一个实例、
弹幕测试"
50,
motionGroup:
[
{x:
200,lifeTime:
1},alpha:
1}},
{y:
150,lifeTime:
1,toValue:
0,lifeTime:
1}}
]
)
以上弹幕就就是使用一个组将两个移动连接在了一起→↓、需要注意得就是motionGroup得冒号后面得就是英文中括号、并且每一次移动包括透明度都最好加上lifeTime并且每一个motion中得lifeTime得时间必须一致、、每一次motion之间用英文逗号相隔、最后一个结尾无符号、
使用命令:
createShape
例子:
varg=$、createShape({x:
50,lifeTime:
3,alpha:
0、5});
首先创建一个新得图形对象、里面可以设置得内容同文本对象(位置,生存时间,透明度,运动设置等方法同creatment)、
绘图需要使用到得:
curveTo使用当前线条样式绘制一条二次贝塞尔曲线
drawCircle绘制一个圆、
drawEllipse绘制一个椭圆
drawRect绘制一个矩形
drawRoundRect绘制一个圆角矩形
lineTo绘制一条直线
beginFill指定一种颜色进行填充
lineStyle指定线条样式
lineGradientStyle指定一种线条样式得渐变
beginGradientFill指定一种填充样式得渐变
我们来一个个得来了解、首先要了解得并不就是怎么去绘制而就是设定绘制得样式
1、4、1颜色样式设置
这里用到:
在beginFill里面有2个参数、第一个就是十六进制得颜色,第二个就是填充得透明度(可选)、
实例:
g、graphics、beginFill(0xff0000,0、5);
g