This repository has been archived by the owner on Feb 17, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
api.html
9 lines (9 loc) · 31.5 KB
/
api.html
1
2
3
4
5
6
7
8
9
<html><head>
<meta charset="UTF-8">
<title>Document</title>
<link href="document/documents.css" rel="stylesheet">
<link href="document/style.css" rel="stylesheet">
</head>
<body>
<div class="main"><div class="tm-doc scrolled" style="padding-left: 133.667px; padding-right: 133.667px;"><h1>API 文档</h1><p>本文档提供了目前所有 API 的使用说明。</p><p>为了编写一个弹幕,你需要编辑一个 brg 文件。这个文件使用 JavaScript 作为脚本,文件将输出一个 Barrage 对象。在这个 Barrage 对象中,你不仅可以定义弹幕和子弹的配置,还可以精细地控制每一个子弹在每时每刻的行为。不过不用担心,我们也提供了丰富的 API,使得你可以非常方便地控制所有的一切。</p><blockquote class=""><p>提示:如果不加特殊说明,本文中所有的时间都以毫秒为单位,本文中的所有角度以 π 弧度为单位。</p></blockquote><h2>更新周期 <span class="comment">Update Cycle</span></h2><p>在我们的软件中,无论是子弹,自机,敌机还是整片的弹幕都是 UpdateObject,即更新对象。它通过更新周期来进行管理。了解对象的更新周期可以帮助我们充分地认识弹幕和子弹具有的特性,有利于避免失误和提高性能。</p><p>任何一个更新对象都包含下列形式的更新周期:</p><h3>1. timestamp</h3><p>这是一个更新周期的开始,对象的时间戳将被更新。</p><h3>2. nextTick</h3><p>这个阶段将完成对象的 nextTick 任务,比如子弹的<code>destroy()</code>方法的在弹幕对象中的回调等。它们可以通过<code>setNextTick()</code>函数来设置。</p><h3>3. interval</h3><p>这个阶段将完成对象的 interval 任务,举个例子,弹幕的周期性发射一般都在这里实现。它们可以通过<code>setInterval()</code>函数来设置。</p><h3>4. mutate</h3><p>这个阶段将执行<code>mutate()</code>回调函数,用户可以在这里进行子弹速度的更新,或者处理一些难以用<code>setInterval()</code>描述的任务。</p><h3>5. listen</h3><p>这个阶段将逐一判断对象的每一个监视器是否被触发。如果被触发了则会调用相应的回调函数。</p><h3>6. display</h3><p>这个阶段将完成对象的显示相关的任务,包括图形的渲染等。对于弹幕来说,其拥有的所有子弹的生命周期也将在这里进行一轮触发。</p><h3>7. timeline</h3><p>这是一个更新周期的结束,对象的时间轴将被更新。</p><hr class="double"><p>一个更新对象本身具有下面的 API:</p><div class="usage"><blockquote><span>setNextTick(<em>callback</em>)</span> <br><span> 为更新对象的下个更新周期设定一个回调函数。</span> <br></blockquote></div><blockquote class="g"><p>状态: 稳定。此 API 将会一直存在。</p></blockquote><ul><li><span>callback: 回调函数,带有 2 个参数:</span><ul><li><span>time: 当前对象的时间戳。</span></li><li><span>delta: 上个更新周期距今的时间。</span></li><li><span>返回值: 如果该函数有返回值且为真,那么该任务将被保留至下一个更新周期。否则该任务会被删除。</span></li></ul></li></ul><hr class="normal"><div class="usage"><blockquote><span>setInterval(<em>interval</em>, <em>times</em>, <em>period</em>, <em>start</em>, <em>callback</em>)</span> <br><span> 为更新对象设定一个计时回调。设定开始后的每个<em>period</em>中,从<em>start</em>起将每隔<em>interval</em>触发一次<em>callback</em>,共计触发不超过<em>times</em>次。</span> <br><span> 至少带有 2 个参数<em>interval</em>和<em>callback</em>。从第三个参数起依次是<em>times</em>,<em>period</em>,<em>start</em>。</span> <br></blockquote></div><blockquote class="g"><p>状态: 稳定。此 API 将会一直存在。</p></blockquote><ul><li><span>interval: 每次执行回调的时间间隔。</span></li><li><span>times: 每个周期中执行回调的次数,默认为<code>Infinity</code>。</span></li><li><span>period: 回调唤醒的一个周期,默认为<code>Infinity</code>。</span></li><li><span>start: 每个周期中回调触发的开始时间,默认为<code>0</code>。</span></li><li><span>callback: 回调函数,带有 4 个参数:</span><ul><li><span>time: 当前对象的时间戳。</span></li><li><span>delta: 上个更新周期距今的时间。</span></li><li><span>iCount: 当前 period 中的 interval 数,从<code>0</code>开始计数。</span></li><li><span>pCount: 当前的 period 数,从<code>0</code>开始计数。</span></li></ul></li><li><span>返回值: 一个实数,表示这个更新对象的编号。</span></li></ul><hr class="normal"><div class="usage"><blockquote><span>removeInterval(<em>id</em>)</span> <br><span> 删除编号为 id 计时回调。</span> <br></blockquote></div><blockquote class="g"><p>状态: 稳定。此 API 将会一直存在。</p></blockquote><ul><li><span>id: 要删除的计时回调的编号。</span></li><li><span>返回值: <code>true|false</code>,表示要删除的计时回调是否存在。</span></li></ul><hr class="normal"><div class="usage"><blockquote><span>setTimeout(<em>timeout</em>, <em>callback</em>)</span> <br><span> 为更新对象设定一个定时回调。</span> <br></blockquote></div><blockquote class="g"><p>状态: 稳定。此 API 将会一直存在。</p></blockquote><ul><li><span>timeout: 下一次执行距离目前的时间。</span></li><li><span>callback: 回调函数,带有 2 个参数:</span><ul><li><span>time: 当前对象的时间戳。</span></li><li><span>delta: 上个更新周期距今的时间。</span></li></ul></li></ul><hr class="normal"><div class="usage"><blockquote><span>triggerEvent(<em>event</em>, <em>...args</em>)</span> <br><span> 触发一个名为<em>event</em>的事件的回调函数。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><ul><li><span>event: 事件的名称。</span></li><li><span>args: 事件附带的参数表(一般情况下只有 0 或者 1 个)。</span></li><li><span>返回值: 这个事件的回调函数的返回值。</span></li></ul><hr class="normal"><div class="usage"><blockquote><span>triggerEventOnce(<em>event</em>, <em>...args</em>)</span> <br><span> 触发一个名为<em>event</em>的事件的回调函数。该函数仅会触发 1 次,触发结束后该回调函数将被删除。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><ul><li><span>event: 事件的名称。</span></li><li><span>args: 事件附带的参数表(一般情况下只有 0 或者 1 个)。</span></li><li><span>返回值: 这个事件的回调函数的返回值。</span></li></ul><h2>生命周期 <span class="comment">Life Cycle</span></h2><p>同更新周期类似,这里的任何对象都有一个生命周期。尽管生命周期的意义不如更新周期那么大,但是它也是一个非常基础的概念。为生命周期提供的支持目前仅有<code>mounted()</code>函数一个,在生命周期的其他阶段可以尝试使用 events 来解决。</p><h3>1. create</h3><p>这个阶段负责对象的构造和初始化工作。</p><h3>2. mount</h3><p>这个阶段负责对象的编组分配,图层的排列,与渲染器的绑定,时间戳和时间轴的初始化工作。这个阶段完成后会调用回调函数<code>mounted()</code>。这个函数的唯一一个参数是该对象的父对象。对于子弹和参考点来说这个父对象就是创建它们的弹幕对象,对于弹幕对象则没有这个参数。</p><h3>3. update</h3><p>这个阶段便是对象的更新周期,包括运动,渲染,触发各种事件等等都在这里进行。</p><h3>4. destroy</h3><p>这个阶段中对象将被解绑,从而最后离开页面。</p><h2>弹幕 <span class="comment">Barrage</span></h2><p>弹幕对象是一个 brg 文件的基础。它管理了一段时间内一批子弹的总和。</p><div class="usage"><blockquote><span>new Barrage({<em>reference</em>, <em>methods</em>, <em>mounted</em>, <em>mutate</em>, <em>events</em>, <em>listener</em>})</span> <br><span> 构造一个新的弹幕对象。</span> <br></blockquote></div><blockquote class="g"><p>状态: 稳定。此 API 将会一直存在。</p></blockquote><ul><li><span>reference: 弹幕对象中涉及的参考点对象。</span></li><li><span>methods: 要构造的弹幕对象的一些方法。</span></li><li><span>mounted: 弹幕被挂载时触发的回调函数。</span></li><li><span>mutate: 弹幕每个更新周期的回调函数。带有 2 个参数:</span><ul><li><span>time: 当前弹幕对象的时间戳。</span></li><li><span>delta: 上个更新周期距今的时间。</span></li></ul></li><li><span>events: 弹幕遭遇事件的回调函数列表。</span></li><li><span>listener: 为弹幕提供的监听器列表。</span></li></ul><div class="usage"><blockquote><span>emitBullets(<em>start</em>, <em>end</em>, <em>step</em>, <em>callback</em>)</span> <br><span> 在当前弹幕中发射一批子弹。</span> <br><span> 至少带有 1 个参数<em>callback</em>。从第二个参数起依次是<em>end</em>,<em>start</em>,<em>stop</em>。</span> <br></blockquote></div><blockquote class="g"><p>状态: 稳定。此 API 将会一直存在。</p></blockquote><ul><li><span>start: 起始 index,默认值为<code>0</code>。</span></li><li><span>end: 终止 index,默认值为<code>1</code>。</span></li><li><span>step: 步长,默认值为<code>1</code>。</span></li><li><span>callback: 回调函数,参数是 index:</span><ul><li><span>index: 当前的循环变量。</span></li><li><span>返回值: 要创建的子弹对象。</span></li></ul></li><li><span>callback 也可以直接是子弹对象本身。</span></li></ul><div class="usage"><blockquote><span>setReference(<em>key</em>, <em>reference</em>)</span> <br><span> 新建或覆盖一个名为<em>key</em>的参考点。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><ul><li><span>key: 参考点的名字。</span></li><li><span>reference: 参考点对象。也可以使用<code>null</code>以删除原来的参考点。</span></li></ul><h2>类点 <span class="comment">Pseudo-point</span></h2><p>大部分时候我们为了处理方便,我们并不需要直接调用点对象的构造函数,而是采用类点来声明一个参考点或子弹,而由弹幕对象来负责对应参考点和子弹的 create 和 mount 流程。因此我们需要介绍一下类点的声明语法。</p><p>你可能在下列地方用到类点:</p><ul><li><span>Barrage 对象的 reference 声明中。</span></li><li><span>Barrage 对象的 emitBullets 和 setReference 函数中。</span></li></ul><p>类点是对象字面量,可以具有下列属性:</p><div class="usage"><blockquote><span>point.state</span> <br><span> 子弹或参考点的初始状态。其属性参见下面的介绍。</span> <br></blockquote><blockquote><span>point.events</span> <br><span> 子弹或参考点的事件回调列表。同 Barrage 类似。</span> <br></blockquote><blockquote><span>point.listener</span> <br><span> 子弹或参考点的监听器列表。同 Barrage 类似。</span> <br></blockquote><blockquote><span>point.mounted</span> <br><span> 子弹或参考点的挂载回调函数。带有 1 个参数 barrage,即当前子弹或参考点所在的弹幕对象。</span> <br></blockquote><blockquote><span>point.mutate</span> <br><span> 子弹或参考点的更新回调函数。带有 2 个参数 time 和 delta。同 Barrage 类似。</span> <br></blockquote><blockquote><span>point.display</span> <br><span> 子弹或参考点的渲染函数。带有 2 个参数 time 和 delta。</span> <br></blockquote></div><blockquote class=""><p>注意:对于弹幕构造函数中参考点的<code>mounted()</code>函数,它的调用处于父对象的 create 阶段,因此其还没有和渲染器进行绑定,而子弹则没有这个问题。如果想要在参考点构造时访问渲染器或其他弹幕属性,可以使用<code>setReference()</code>函数。</p></blockquote><p>下面的属性只能供子弹对象构造时使用:</p><div class="usage"><blockquote><span>point.layer</span> <br><span> 子弹的图层编号。渲染时图层号更大的子弹会出现在更上方;图层号相同的子弹,后构造的子弹出现在更上方。图层号的默认值为<code>0</code>。</span> <br></blockquote></div><hr class="normal"><p>上述 state 中你可以写任何属性作为子弹或参考点对象的初始化,但是有一些属性是具有特殊含义的:</p><div class="usage"><blockquote><span>state.x</span> <br><span> 对象的 x 相对坐标,默认为<code>0</code>。</span> <br></blockquote><blockquote><span>state.y</span> <br><span> 对象的 y 相对坐标,默认为<code>0</code>。</span> <br></blockquote><blockquote><span>state.radius</span> <br><span> 对象的默认渲染半径和子弹的默认碰撞半径。被用于 display 函数和子弹碰撞事件中。如果你覆写了那些函数或者设定了 show 和 solid 属性为<code>false</code>,则这个参数不是必需的。</span> <br></blockquote><blockquote><span>state.color</span> <br><span> 对象的默认渲染颜色。如果你覆写了 display 函数或将 show 属性设置为了<code>false</code>,则这个参数不是必需的。</span> <br></blockquote><blockquote><span>state.show</span> <br><span> 对象是否显示。设置成<code>false</code>可以避免调用 display 函数。</span> <br></blockquote><blockquote><span>state.face</span> <br><span> 对象的朝向。设置这个属性可以改变这个对象上建立的坐标系的旋转角度。</span> <br></blockquote></div><p>下面的属性仅供子弹对象构造时使用:</p><div class="usage"><blockquote><span>state.solid</span> <br><span> 子弹是否检测碰撞。设置成<code>false</code>可以避免调用一切系统默认的 hitSelf 事件,但它将不会阻止自定义碰撞事件的检测和触发。</span> <br></blockquote><blockquote><span>state.rel</span> <br><span> 子弹所处坐标系。它是一个字符串,表示选取当前弹幕中哪一个 reference 作为坐标系。默认为<code>'base'</code>。如果找不到这个坐标系则默认使用 canvas 坐标系。除了在 reference 中定义的键以外,另一些键也是支持的,比如<code>'self'</code>自机坐标系等等。对于由点对象生成的子弹,它还有一个保留选项,即<code>'src'</code>,表示生成它的坐标系。</span> <br></blockquote><blockquote><span>state.style</span> <br><span> 子弹的样式。我们提供了一些内置的子弹样式,它们会改变子弹的默认事件,回调和渲染函数等,但它们的优先级仍然比用户定义的要低。设置 style 可以引入对应的子弹样式。</span> <br></blockquote></div><p>部分属性的使用依赖于其他的属性,另一些属性可以作为一些原生方法的默认属性,在此仅作简要的介绍:</p><div class="usage"><blockquote><span>state.rho</span> <br><span> 对象的极径,当使用了极坐标相关函数时是必需的。</span> <br></blockquote><blockquote><span>state.theta</span> <br><span> 对象的极角,当使用了极坐标相关函数时是必需的。</span> <br></blockquote><blockquote><span>state.bdColor</span> <br><span> 对象的边界颜色,当使用了<code>'border'</code>等样式时是必需的。</span> <br></blockquote><blockquote><span>state.innerR</span> <br><span> 对象的外部半径,当使用了<code>'border'</code>等样式是是必需的。</span> <br></blockquote><blockquote><span>state.glColor</span> <br><span> 对象的边界颜色,当使用了<code>'glow'</code>等样式时是必需的。</span> <br></blockquote><blockquote><span>state.outerR</span> <br><span> 对象的外部半径,当使用了<code>'glow'</code>等样式是是必需的。</span> <br></blockquote></div><p>诸如此类的还有一些。我们将在样式部分继续介绍。</p><h2>点 <span class="comment">Point</span></h2><p>点类是重要的基类,我们的自机,敌机,子弹,参考点都是点类下的对象。</p><p>我们为点对象提供了以下原生方法:</p><div class="usage"><blockquote><span>getDistance(<em>point</em>)</span> <br><span> 获得当前点到另一个点的距离。</span> <br></blockquote></div><blockquote class="g"><p>状态: 稳定。此 API 将会一直存在。</p></blockquote><ul><li><span>point: 另一个点或坐标系对象,无论它们是否处于同一坐标系中。</span></li></ul><hr class="normal"><div class="usage"><blockquote><span>getTheta(<em>point</em>)</span> <br><span> 获得当前点到另一个点的向量的幅角。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><ul><li><span>point: 另一个点或坐标系对象,无论它们是否处于同一坐标系中。</span></li></ul><hr class="normal"><div class="usage"><blockquote><span>movePolar(<em>rho</em>, <em>theta</em>)</span> <br><span> 将直角坐标中的点移动长度为<em>rho</em>,角度为<em>theta</em>的向量。</span> <br></blockquote></div><blockquote class="g"><p>状态: 稳定。此 API 将会一直存在。</p></blockquote><ul><li><span>rho: 要移动的向量的长度。默认为当前点的 rho 属性。</span></li><li><span>theta: 要移动的向量的角度。默认为当前点的 theta 属性。</span></li></ul><hr class="normal"><div class="usage"><blockquote><span>smooth(<em>source</em>, <em>destination</em>, <em>progress</em>)</span> <br><span> 将当前点控制在<em>source</em>和<em>destination</em>之间平滑地过渡。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><ul><li><span>source: 起始点对象。</span></li><li><span>destination: 终止点对象。</span></li><li><span>progress: 一个 0 到 1 之间的参数,表明当前进度。</span></li></ul><hr class="normal"><div class="usage"><blockquote><span>getGradient(<em>color1</em>, <em>radius1</em>, <em>color2</em>, <em>radius2</em>)</span> <br><span> 获得一种中心渐变色。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><ul><li><span>color1: 第一种颜色。</span></li><li><span>color2: 第二种颜色。</span></li><li><span>radius1: 第一种颜色对应的半径。</span></li><li><span>radius2: 第二种颜色对应的半径。</span></li><li><span>返回值: 一个渐变色对象,可用于颜色填充。</span></li></ul><hr class="normal"><div class="usage"><blockquote><span>fillCircle(<em>fill</em>, <em>radius</em>)</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><ul><li><span>fill: 要填充的颜色,可以是颜色或者渐变,默认值为当前点的 color 属性。</span></li><li><span>radius: 要填充区域的半径,默认值为当前点的 radius 属性。</span></li></ul><hr class="normal"><div class="usage"><blockquote><span>emitBullets(<em>start</em>, <em>end</em>, <em>step</em>, <em>callback</em>)</span> <br><span> 在当前弹幕中发射一批子弹。语法同 Barrage 完全相同,这里就不再赘述了。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><blockquote class=""><p>注意:用这个方法生成的子弹会和在弹幕对象中生成的子弹有一些不同,它会额外多一个名为 src 的参考点,即子弹诞生时当前点对象的位置。</p></blockquote><hr class="normal"><div class="usage"><blockquote><span>copy()</span> <br><span> 生成当前点的一个坐标系实例。参考下面的“坐标系”章节。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><h2>坐标系 <span class="comment">Coordinate</span></h2><p>坐标系和点具有很多的共性。因此在程序的很多地方他们是可以互相转换的。那我们为什么还需要一个坐标系类呢?因为程序中我们的点都是动态的,但一个子弹被发射出去以后,我们更多地是希望它与它的发射源进行解耦,仅仅保留它诞生的坐标即可(不然发射源就会带着它的子弹跑了)。这时候,坐标系对象就能很好地帮助我们解决这个问题。因为坐标系对象是静态的,它没有更新周期。因此广泛地使用在子弹的参考点中,以实现自机狙等功能。事实上,每个子弹的 ref 都是静态点的列表。</p><p>坐标系对象有以下的方法:</p><div class="usage"><blockquote><span>resolve(<em>x, y</em>|<em>point</em>)</span> <br><span> 将当前坐标系中的点解释成绝对坐标。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><ul><li><span>point: 如果只有 1 个参数,则读入一个当前坐标系中的点对象。</span></li><li><span>x, y: 如果有 2 个参数,则读入当前坐标系中某个点的 x, y 坐标。</span></li><li><span>返回值: 一个 location 对象,即输入点的绝对坐标。</span></li></ul><hr class="normal"><div class="usage"><blockquote><span>locate(<em>x, y</em>|<em>point</em>)</span> <br><span> 将任何坐标系中的点在该坐标系中进行定位。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><ul><li><span>point: 如果只有 1 个参数,则读入一个任何坐标系中的点对象。</span></li><li><span>x, y: 如果有 2 个参数,则读入某个点的 x, y 绝对坐标。</span></li><li><span>返回值: 一个 location 对象,即输入点在当前坐标系中的坐标。</span></li></ul><h2>位置 <span class="comment">Location</span></h2><p>坐标系对象的一些方法会返回一个位置对象,用来描述一个点的坐标。位置对象是一个长度为 2 的数组,两个元素分别为坐标的 x 和 y 参数。除此以外,它还拥有下面的属性:</p><div class="usage"><blockquote><span>location.x = location[0]</span> <br><span> 当前点的 x 坐标。</span> <br></blockquote><blockquote><span>location.y = location[1]</span> <br><span> 当前点的 y 坐标。</span> <br></blockquote><blockquote><span>location.rho</span> <br><span> 当前点的距离原点的距离。</span> <br></blockquote><blockquote><span>location.theta</span> <br><span> 当前点的在坐标系中的幅角。</span> <br></blockquote></div><h2>子弹 <span class="comment">Bullet</span></h2><p>子弹类是点类的子类。子弹类额外增加了一些事件和方法:</p><div class="usage"><blockquote><span>destroy()</span> <br><span> 清除一枚子弹。</span> <br></blockquote></div><blockquote class="g"><p>状态: 稳定。此 API 将会一直存在。</p></blockquote><hr class="normal"><div class="usage"><blockquote><span>polarLocate(<em>rho</em>, <em>theta</em>)</span> <br><span> 将极径为<em>rho</em>,极角为<em>theta</em>的点定位到当前直角坐标。</span> <br></blockquote></div><blockquote class="g"><p>状态: 稳定。此 API 将会一直存在。</p></blockquote><ul><li><span>rho: 要定位的点的极径。默认为当前点的 rho 属性。</span></li><li><span>theta: 要定位的点的极角。默认为当前点的 theta 属性。</span></li></ul><blockquote class=""><p>注意:如果此时的 rel 本身就含有 theta 属性,则极轴会默认指向 theta 方向。</p></blockquote><hr class="normal"><div class="usage"><blockquote><span>drawTemplate(<em>style</em>)</span> <br><span> 调用内置的绘图函数。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><ul><li><span>style: 绘图函数的样式。目前仅支持<code>'border'</code>一种样式。</span></li></ul><h3>原生事件</h3><ul><li><span>leave: 当子弹离开渲染区域过远时触发。</span></li><li><span>border: 当子弹碰撞到屏幕边缘是触发。</span></li><li><span>hitSelf: 当子弹命中自机时触发。</span></li></ul><h2>其他 <span class="comment">Utility</span></h2><p>Utility 库提供了其他的一些简单的 API,你可以使用下面的方法引入它:</p><div class="usage"><blockquote><span>const { Utility } = API</span> <br></blockquote></div><p>这个库提供了以下函数:</p><div class="usage"><blockquote><span>rgb(<em>red</em>, <em>green</em>, <em>blue</em>)</span> <br><span> 用三种颜色生成一个 rgb 字符串。</span> <br></blockquote><blockquote><span>rgba(<em>red</em>, <em>green</em>, <em>blue</em>, <em>alpha</em>)</span> <br><span> 用三种颜色以及透明度生成一个 rgba 字符串。</span> <br></blockquote></div><blockquote class="r"><p>状态: 不建议。此 API 可能处于即将弃用的状态或存在较大的问题。</p></blockquote><ul><li><span>red: 红色系数。</span></li><li><span>green: 绿色系数。</span></li><li><span>blue: 蓝色系数。</span></li><li><span>alpha: 透明度。</span></li><li><span>返回值: 一个 css 字符串。</span></li></ul><blockquote class=""><p>注意:所有参数都应该是 0 到 1 之间的实数。</p></blockquote><hr class="normal"><div class="usage"><blockquote><span>interval(<em>period</em>, <em>previous</em>, <em>current</em>)</span> <br><span> 判断<em>previous</em>和<em>current</em>两个时刻之间是否跨越了<em>period</em>周期。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><ul><li><span>period: 周期长度。</span></li><li><span>previous: 上一时刻。</span></li><li><span>current: 下一时刻。</span></li><li><span>返回值: <code>true|false</code>判断的结果。</span></li></ul><hr class="normal"><div class="usage"><blockquote><span>smooth(<em>x1</em>, <em>x2</em>, <em>t</em>)</span> <br><span> 提供<em>x1</em>和<em>x2</em>两点间的一种较为平滑的过渡。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><ul><li><span>x1: 起始值。</span></li><li><span>x2: 终止值。</span></li><li><span>t: 一个 0 到 1 之间的参数,表明当前进度。</span></li><li><span>返回值: t 参数下的 x 值。</span></li></ul><hr class="normal"><div class="usage"><blockquote><span>rpm()</span> <br><span> 提供一个随机的正负 1。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><ul><li><span>返回值: <code>1|-1</code>。</span></li></ul><h2>色彩 <span class="comment">Color</span></h2><p>Color 库提供了一些色彩相关的 API,你可以使用下面的方法引入它:</p><div class="usage"><blockquote><span>const { Color } = API</span> <br></blockquote></div><p>尽管 Color 是一个类,我们仍然建议使用 Color 的静态方法而不是构造函数来创建它的实例:</p><div class="usage"><blockquote><span>Color.rgba(<em>red</em>, <em>green</em>, <em>blue</em>, <em>alpha</em>)</span> <br><span> 创建一个 rgb 颜色,允许额外包含一个 <em>alpha</em> 不透明度属性。这里的参数均为 0 到 1 之间的实数。</span> <br></blockquote><blockquote><span>Color.hsla(<em>hue</em>, <em>saturation</em>, <em>lightness</em>, <em>alpha</em>)</span> <br><span> 创建一个 hsl 颜色,允许额外包含一个 <em>alpha</em> 不透明度属性。这里的 <em>hue</em> 可以是任意角度,其他参数均为 0 到 1 之间的实数。</span> <br></blockquote><blockquote><span>Color.hsva(<em>hue</em>, <em>saturation</em>, <em>value</em>, <em>alpha</em>)</span> <br><span> 创建一个 hsv 颜色,允许额外包含一个 <em>alpha</em> 不透明度属性。这里的 <em>hue</em> 可以是任意角度,其他参数均为 0 到 1 之间的实数。</span> <br></blockquote><blockquote><span>Color.from(<em>name</em>)</span> <br><span> 创建一个名称为<em>name</em>的系统内置颜色。这里的<em>name</em>不区分大小写。</span> <br></blockquote><blockquote><span>Color.hex(<em>code</em>)</span> <br><span> 创建一个十六进制代码为<em>code</em>的颜色。<em>code</em>的开头可以有一个<code>#</code>,也可以没有。<em>code</em>支持 3, 4, 6, 8 位颜色代码。不区分大小写。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><hr class="normal"><p>除此以外,Color 库还有以下的静态方法:</p><div class="usage"><blockquote><span>Color.blend(<em>color1</em>, <em>prop1</em>, <em>color2</em>, <em>prop2</em>, ...)</span> <br><span> 将<em>color1</em>,<em>color2</em>等颜色按照对应的<em>prop</em>进行混合,返回新的颜色。</span> <br><span> 最后一种颜色的<em>prop</em>可以缺省,默认为 1 减去之前的所有<em>prop</em>之和。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><hr class="normal"><p>已经创建的 Color 实例拥有下面的方法:</p><div class="usage"><blockquote><span>blend(<em>color</em>, <em>prop</em>)</span> <br><span> 将当前颜色与<em>color</em>进行混合。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><ul><li><span>color: 要混合的颜色。</span></li><li><span>prop: 要混合颜色的占比,默认为 0.5。</span></li><li><span>返回值: 混合后的新颜色。</span></li></ul><blockquote class=""><p>注意这个函数与<code>Color.blend()</code>静态方法的区别。</p></blockquote><hr class="normal"><div class="usage"><blockquote><span>lighter(<em>scale</em>)</span> <br><span> 将当前颜色变淡。</span> <br></blockquote><blockquote><span>darker(<em>scale</em>)</span> <br><span> 将当前颜色变暗。</span> <br></blockquote></div><blockquote class="g"><p>状态: 稳定。此 API 将会一直存在。</p></blockquote><ul><li><span>scale: 变化的程度系数,为 0 到 1 之间的实数。设为 0 时没有变化,设为 1 时变为白色或黑色。默认为 0.5。</span></li><li><span>返回值: 变化后的新颜色。</span></li></ul><hr class="normal"><div class="usage"><blockquote><span>inverse()</span> <br><span> 将当前颜色反色。此操作不会改变透明度。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><ul><li><span>返回值: 变化后的新颜色。</span></li></ul><hr class="normal"><div class="usage"><blockquote><span>alpha(<em>alpha</em>)</span> <br><span> 设置颜色的不透明度。</span> <br></blockquote><blockquote><span>opacify(<em>scale</em>)</span> <br><span> 将当前颜色变得更不透明。</span> <br></blockquote><blockquote><span>transparentize(<em>scale</em>)</span> <br><span> 将当前颜色变得更透明。</span> <br></blockquote></div><blockquote class="b"><p>状态: 实验。此 API 可能会更改语法或被取代。</p></blockquote><ul><li><span>alpha: 要设置的不透明度,为 0 到 1 之间的实数,默认为 0.5。</span></li><li><span>scale: 变化的程度系数,为 0 到 1 之间的实数。设为 0 时没有变化,设为 1 时完全透明或不透明。默认为 0.5。</span></li><li><span>返回值: 变化后的新颜色。</span></li></ul></div></div>
</body></html>