关键词不能为空

当前您在: 主页 > 英语 >

bilibili高级弹幕代码初阶教程

作者:高考题库网
来源:https://www.bjmy2z.cn/gaokao
2021-01-26 08:54
tags:

-

2021年1月26日发(作者:luma)
目录



第一章

初步了解高级弹幕


变量

创建文本弹幕对象


弹幕对象运动的设置


绘图弹幕对象创建以及设置

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.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
返回一个前闭后开的整数

Function
函数的创建与使用


播放器控制

2.3.1
视频时间跳转至

2.3.2
跳转到指定
av
号指定页视频

































第一章

初步了解高级弹幕


第一节

变量

废话不多说
.
我们先来看一句最基本的弹幕
.

var a = 1;

首先一次个关键字是”
var

.
该关键字的意 思就是声明一个变量
.
变量说的简单点就是
在后面的过程中可以给


a


重新赋值
.

然后就是变量名”
a
”了
,
这玩意理解成名字就行了
.
至于关于变量名的规则 有些关键字
与保留字是不允许创建的
.
保留字,关键字

第三个是运 算符”
=

,
首先等于号并不是数学中的等于意思
.
而是给 声明的变量
a
赋值
.
将等号右边的值赋予给左边
.

第四个”
1
”就是一个值了
.
结尾的分号表示该语句结束
.


看到这里相信大家已经对这句弹幕有了基础的了解
.
这句话的意思就是:

声明变量”
a
”并且初始化其值为数字
1.

写高级弹幕的时候请严格注意大小写
.

var
变量名
=
表达式
;



第二节

创建文本弹幕对象
.


首先要知道
bili
的播 放器的大小
.
像素为单位
.

正常模式:宽
541

384

宽屏模式:宽
950

528

全屏模式与网页全屏模式根据显示器分辨率来确定
.

在高级弹幕中在

实际弹幕时间会在发布时间轴填写的时间基础上减去约秒
.
所以请注
意时间轴的问题


高级弹幕中创建新的文本弹幕对象要用 到
createComment



这个语句
.
请 看实例


var a = $$.createComment(


该弹幕的意思就是

创建一个变量
a
并创建一个新弹幕对象赋于
a.


我们可以这么理解
createComment.
他的括号内有
2
个参数< br>.

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:

});

(
注:参数之间以英文逗号区分< br>,
最后一个参数结尾无逗号
)

大家可以预览一下这条弹幕
.
就是在
x

100,y

100
的位置创建一个内 容是
text

弹幕
.
该弹幕生存时间为
10
秒< br>.
字体大小为
20

.
十六进制颜色为灰色
.
透明度
.


那么
.
到了这里大家应该已经知道怎么去在 一个点创建弹幕并设置该弹幕各项参数
.

接下来就来说一下在创建后各项属性的更改与设置
.


现在
.
声明变量
c
并创建了一个弹幕内容为

测试

的弹 幕
.
它的
x
轴为
50,y
轴为
100.

例:

var c = $$.createComment(
测试



那么如果我们现在需要 让他的位置
x
轴不变
y
轴变更到
50.
那么我们这个时候就 需要直接更
改弹幕的某一个参数
.
只需要在弹幕后面加上
.

= 50;

(注:更改颜色的语句不是而是
.
注意大小写)

此外还有比较常用的就是旋转
3
个轴的设置
.

,rotationY,rotationZ.


:

=90;


另还有些参数也可以设置
.
详细参考


训练题:

1.

声明变量
c
并创建一 条弹幕对象
.
其内容为空
.
其属性为
X
轴为轴为
1 90.
生存时间
5

.
字体颜色为
0xff0000,透明度为
.
字体大小为
15

.

2.

更改
c

x
轴位置为
200.透明度更改为
1.
颜色为
0xfff000.









弹幕对象运动的设置


在上一个章节中学习了如何创建文本对象和设置文本对象的参数
.
这次就讲 如何让创建的弹
幕对象运动起来
.
这里我们要用到
motion.
下 面请看一个例子
.


var c = $$.createComment(
移动测试


motion:{

x:{fromValue:100,toValue:250,lifeTime:3}

},

lifeTime:3

});


让我们来分析这条弹幕
.

首先上已经了解过了
createCom ment
的用法
.
那么我直接来看到多出来的这个属性
motion.

motion:{ x:{fromValue:100,toValue:250,lifeTime:3}}


在这里面其中
x
为需要移动的参数
.x
中的
fromVal ue

x
的起始位置
toValue
是结束位

. lifeTime
是这个运动过程所花费的时间
.
(

:
如 果在
motion
里面有起始值并且在
motion
外也设置的值
,
那么将显示
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
的变化< br>.

下面我们说一下在
motion
中有哪些是可以做变化的
.

x
:
移动
x
轴位置
.

y
:
移动
y
轴位置
.

alpha
:
透明度变换(有效值
0-1

.
< br>fontsize
:
字体大小变换(不推荐使用
.
字号的变换较明显< br>.

rotationX, rotationY, rotationX
:< br>旋转
x

,
旋转
Y

,
旋转
Z

.

其中的属性值有
:

必填


fromValu
e


起始移动属性值

可选


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:,repeat:6}
},

lifeTime:3

});


在这个例子里面我们用到了
startDelay
这个属性
.
我们把 这个代码拆开分了
3
段来看
.


首先
x
轴的是从
100
移动到
250.
移动时间
3

.< br>然后起始移动时间是
500
毫秒
.
也就是说
x
轴是在
500
毫秒后开始移动的
.

然后是
y
轴从
50
移动到
250
移动时间
3

.

最 后是透明度从
0

1
变化时间为秒
.
重复执行
6< br>次
.


把这三个参数整合在一起就变成了
.
移动测 试从
x

100,y

50
的位置开始移动
,并且透明度
最开始是
0.
由于
x
有一个起始移动时间
.
但是
y
轴跟透明度变化已经开始
.
所以首先

移动测


会先渐入的向下移动
.500
毫秒后
x
开始移动 这个时候
y
轴的移动还没有停第一次的透明
度改变已经结束
.
所以< br>x,y
轴这个时候是同时移动的
.
最后结果回是往右下移动并且透明度
会重复的从
0

1..


虽然可以使用
repe at
这个属性执行重复的操作
.
但是这个是远远不能满足复杂的移动效果
的< br>.
然而去创建很多
motion
也是很麻烦的
.
这里我就需要 用到
motionGroup

.motionGroup
能执行多个
motion
连续运动
.

我们来看一个实例
.

var c = $$.createComment(
弹幕测试


x:100,y:50,

motionGroup:[

{x:{fro mValue:100,toValue:200,lifeTime:1},alpha:{fromValu e:0,toValue:1,lifeTime
:1}},

{y:{fromVa lue:50,toValue:150,lifeTime:1},alpha:{fromValue:1, toValue:0,lifeTime:
1}}

]

});)


以上弹幕就是使用一个组将两个移动连接在了一起→↓
.
需要注意的是
motionGroup
的冒号
后面的是英文中括号
.
并且每一次移动包括透明度都最好加上
lifeTime
并且每一个
mot ion
中的
lifeTime
的时间必须一致
..
每一次
m otion
之间用英文逗号相隔
.
最后一个结尾无符号
.




绘图弹幕对象创建以及设置


使用命令:
createShape

例子:

var g = $$.createShape({x:50,y:50,lifeTime:3,alpha:});

首先创建一个新的图形对象
.
里面可以设置的内容同文本对象
(位置
,
生存时间
,
透明度
,
运动
设置等方法同
crea tComment

.


绘图需要使用到的:

curveTo

使用当前线条样式绘制一条二次贝塞尔曲线

drawCircle

绘制一个圆
.

drawEllipse

绘制一个椭圆

drawRect

绘制一个矩形

drawRoundRect

绘制一个圆角矩形

lineTo

绘制一条直线

beginFill
指定一种颜色进行填充

lineStyle

指定线条样式

lineGradientStyle

指定一种线条样式的渐变

beginGradientFill

指定一种填充样式的渐变

我们来一个个的来了解
.
首先要了解的并不是怎么去绘制而是设定绘制的样式

1.4.1
颜色样式设置

1.4.1.1 beginFill
指定一种颜色进行填充

这里用到:

beginFill
指定一种颜色进行填充


beginFill
里面有
2< br>个参数
.
第一个是十六进制的颜色
,
第二个是填充的透明度
( 可选)
.


实例:

var g = $$.createShape({x:50,y:50,lifeTime:3,alpha:});

这里用的一长串就是设置
g
的填充颜色以及透明度
.
两个都是有效的
.

graphics
则是是提供绘图的
API.
以后使 用的时候都会用到这个
.
后面小括号内就是参数了
.

注:
graphics
前面的
g
必须是创建图形对象的名字
.


1.4.1.2 lineGradientStyle beginGradientFill
指定一种线条样式
,
填充样式的渐变


这里需要用到:

lineGradientStyle

指定一种线条样式的渐变

beginGradientFill

指定一种填充样式的渐变

详细请看:链接


$$.createGradientBox(20, 20, 0, 0, 0),


type

上例参数


用于指定要使用哪种渐变类型的
GradientType
类的值:





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


上例参数


用于指定要使用哪种
spread
方法的

interpolationMethod

上例参数


用于指定要使用哪个值的

值:
linearRGB


rgb

例如,假设有两种颜色之间的简单线性渐变(
spreadMethod
参数设置为
reflect




focalPointRatio

上例参数


一个控制渐变的焦点位置的数字。
0
表示焦点位于中
心。
1
表示焦点位于渐变圆的一条边界上。
-1
表示焦点位于渐变圆的另一条边界上。



-1
或大于
1
的值将舍入为
-1

1





实际运用:

var g = $$.createShape({x:50,y:50,lifeTime:5});


null,

在实际运用中后面几个可以不填写或者值为
null
但是其中的
colors ,alphas, Ratios

组必须存在并且对应数组长度
.

Ratios
数组内数值必须从小到大


1.4.1.3 lineStyle
指定线条样式

这里用到:

-


-


-


-


-


-


-


-



本文更新与2021-01-26 08:54,由作者提供,不代表本网站立场,转载请注明出处:https://www.bjmy2z.cn/gaokao/570984.html

bilibili高级弹幕代码初阶教程的相关文章