bilibili代码弹幕初阶入门教程(转载)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
宽屏模式：宽950搞528
全屏模式与网页全屏模式根据显示器分辨率来确定.
在高级弹幕中在实际弹幕时间会在发布时间轴填写的时间基础上减去约0.2秒.所以请注意时间轴的问题
高级弹幕中创建新的文本弹幕对象要用到createComment（"",{}）这个语句.请看实例
var a = $.createComment("text",{x:100});
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号.
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格式化播放时间
废话不多说.我们先来看一句最基本的弹幕.
var a = 1;
首先一次个关键字是”var”.该关键字的意思就是声明一个变量.变量说的简单点就是在后面的过程中可以给“a”重新赋值.
然后就是变量名”a”了,这玩意理解成名字就行了.至于关于变量名的规则有些关键字与保留字是不允许创建的.保留字，关键字
第三个是运算符”=”,首先等于号并不是数学中的等于意思.而是给声明的变量a赋值.将等号右边的值赋予给左边.
该弹幕的意思就是创建一个变量a并创建一个新弹幕对象赋于a.
我们可以这么理解createComment.他的括号内有2个参数.”text”是弹幕内容.｛x:100｝是该弹幕参数x轴上的位置是100.
当然括号内的不可能只有x这一个参数.我们可以用到的有.
x—新创建元件的X轴座标
y—新创建元件的Y轴座标
z—新创建元件的Z轴座标
在这里面其中x为需要移动的参数.x中的fromValue是x的起始位置toValue是结束位置.lifeTime是这个运动过程所花费的时间.(注:如果在motion里面x.y有起始值并且在motion外也设置x.y的值,那么将显示motion里面的设置位置)
那么.到了这里大家应该已经知道怎么去在一个点创建弹幕并设置该弹幕各项参数.
接下来就来说一下在创建后各项属性的更改与设置.
现在.声明变量c并创建了一个弹幕内容为"测试"的弹幕.它的x轴为50,y轴为100.
例：
var c = $.createComment("测试",{x:50,y:100});
那么如果我们现在需要让他的位置x轴不变y轴变更到50.那么我们这个时候就需要直接更改弹幕的某一个参数.只需要在弹幕后面加上.
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第一节变量
lifeTime—元件的生存时间(以秒为单位)注：一旦设置不可更改
alpha—元件的透明度
color—文字类元件的色彩
fontsize—文字类元件的大小
parent—元件的父元件(进阶应用)
motion—元件移动策略
scale—缩放
那么我们来定义一个稍微复杂点的高级弹幕.
例：
varc= $.createComment("text",{
2.更改c的x轴位置为200.透明度更改为1.颜色为0xfff000.
1.3弹幕对象运动的设置
在上一个章节中学习了如何创建文本对象和设置文本对象的参数.这次就讲如何让创建的弹幕对象运动起来.这里我们要用到motion.下面请看一个例子.
var c = $.createComment("移动测试",{
x:100,y:100,
lifeTime:10,
fontsize:20,
or:0x666666,
alpha:0.8
});
(注：参数之间以英文逗号区分,最后一个参数结尾无逗号)
大家可以预览一下这条弹幕.就是在x轴100,y轴100的位置创建一个内容是text的弹幕.该弹幕生存时间为10秒.字体大小为20号.十六进制颜色为灰色.透明度0.8.
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绘制一条直线
motion:{
x:{fromValue:100,toValue:250,lifeTime:3}
},
lifeTime:3
});
让我们来分析这条弹幕.
首先上已经了解过了createComment的用法.那么我直接来看到多出来的这个属性motion.
motion:{x:{fromValue:100,toValue:250,lifeTime:3}}
前言
高级弹幕不难.基础的部分非常简单.只需要你花上一点时间就可以轻松上手.重要的是需要对作品的理解以及对时间的把握.无论什么弹幕只需要一颗有爱的心就够了.弹幕需要是爱与人参.所以我希望大家不要去使用高级弹幕去做不好的事情.
第一章初步了解高级弹幕
1.1变量
1.2创建文本弹幕对象
1.3弹幕对象运动的设置
第四个”1”就是一个值了.结尾的分号表示该语句结束.
看到这里相信大家已经对这句弹幕有了基础的了解.这句话的意思就是：
声明变量”a”并且初始化其值为数字1.
写高级弹幕的时候请严格注意大小写.
var 变量名 = 表达式;
1.2第二节创建文本弹幕对象.
首先要知道bili的播放器的大小.像素为单位.
正常模式：宽541高384
全屏模式与网页全屏模式根据显示器分辨率来确定.
在高级弹幕中在实际弹幕时间会在发布时间轴填写的时间基础上减去约0.2秒.所以请注意时间轴的问题
高级弹幕中创建新的文本弹幕对象要用到createComment（"",{}）这个语句.请看实例
var a = $.createComment("text",{x:100});
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号.
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格式化播放时间
废话不多说.我们先来看一句最基本的弹幕.
var a = 1;
首先一次个关键字是”var”.该关键字的意思就是声明一个变量.变量说的简单点就是在后面的过程中可以给“a”重新赋值.
然后就是变量名”a”了,这玩意理解成名字就行了.至于关于变量名的规则有些关键字与保留字是不允许创建的.保留字，关键字
第三个是运算符”=”,首先等于号并不是数学中的等于意思.而是给声明的变量a赋值.将等号右边的值赋予给左边.
该弹幕的意思就是创建一个变量a并创建一个新弹幕对象赋于a.
我们可以这么理解createComment.他的括号内有2个参数.”text”是弹幕内容.｛x:100｝是该弹幕参数x轴上的位置是100.
当然括号内的不可能只有x这一个参数.我们可以用到的有.
x—新创建元件的X轴座标
y—新创建元件的Y轴座标
z—新创建元件的Z轴座标
在这里面其中x为需要移动的参数.x中的fromValue是x的起始位置toValue是结束位置.lifeTime是这个运动过程所花费的时间.(注:如果在motion里面x.y有起始值并且在motion外也设置x.y的值,那么将显示motion里面的设置位置)
那么.到了这里大家应该已经知道怎么去在一个点创建弹幕并设置该弹幕各项参数.
接下来就来说一下在创建后各项属性的更改与设置.
现在.声明变量c并创建了一个弹幕内容为"测试"的弹幕.它的x轴为50,y轴为100.
例：
var c = $.createComment("测试",{x:50,y:100});
那么如果我们现在需要让他的位置x轴不变y轴变更到50.那么我们这个时候就需要直接更改弹幕的某一个参数.只需要在弹幕后面加上.
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第一节变量
lifeTime—元件的生存时间(以秒为单位)注：一旦设置不可更改
alpha—元件的透明度
color—文字类元件的色彩
fontsize—文字类元件的大小
parent—元件的父元件(进阶应用)
motion—元件移动策略
scale—缩放
那么我们来定义一个稍微复杂点的高级弹幕.
例：
varc= $.createComment("text",{
2.更改c的x轴位置为200.透明度更改为1.颜色为0xfff000.
1.3弹幕对象运动的设置
在上一个章节中学习了如何创建文本对象和设置文本对象的参数.这次就讲如何让创建的弹幕对象运动起来.这里我们要用到motion.下面请看一个例子.
var c = $.createComment("移动测试",{
x:100,y:100,
lifeTime:10,
fontsize:20,
or:0x666666,
alpha:0.8
});
(注：参数之间以英文逗号区分,最后一个参数结尾无逗号)
大家可以预览一下这条弹幕.就是在x轴100,y轴100的位置创建一个内容是text的弹幕.该弹幕生存时间为10秒.字体大小为20号.十六进制颜色为灰色.透明度0.8.
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绘制一条直线
motion:{
x:{fromValue:100,toValue:250,lifeTime:3}
},
lifeTime:3
});
让我们来分析这条弹幕.
首先上已经了解过了createComment的用法.那么我直接来看到多出来的这个属性motion.
motion:{x:{fromValue:100,toValue:250,lifeTime:3}}
前言
高级弹幕不难.基础的部分非常简单.只需要你花上一点时间就可以轻松上手.重要的是需要对作品的理解以及对时间的把握.无论什么弹幕只需要一颗有爱的心就够了.弹幕需要是爱与人参.所以我希望大家不要去使用高级弹幕去做不好的事情.
第一章初步了解高级弹幕
1.1变量
1.2创建文本弹幕对象
1.3弹幕对象运动的设置
第四个”1”就是一个值了.结尾的分号表示该语句结束.
看到这里相信大家已经对这句弹幕有了基础的了解.这句话的意思就是：
声明变量”a”并且初始化其值为数字1.
写高级弹幕的时候请严格注意大小写.
var 变量名 = 表达式;
1.2第二节创建文本弹幕对象.
首先要知道bili的播放器的大小.像素为单位.
正常模式：宽541高384