# danmaku
-------------------------
danmaku component

## 适用设备

- pc端
- 移动端

## 安装

```javascript
npm install amazepage --save
```

## 怎样使用

### 数据 data

弹幕的数据部分可以通过两种方式进行传入（如果存在data会自动忽略src的值）

- 第一种: 直接传入data参数（数组）

```javascript
var data = [
    '感觉自己萌萌哒~',
    '感觉自己萌萌哒~',
    '感觉自己萌萌哒~',
    '感觉自己萌萌哒~',
    '感觉自己萌萌哒~',
    '感觉自己萌萌哒~',
    '感觉自己萌萌哒~',
    '感觉自己萌萌哒~'
]
```

- 第二种: 传入src属性（请求url的形式）

```javascript
<Danmaku src={API}/>

//API返回的格式
{
    "status": number, // 状态
    "message": string, // 消息
    "timestamp": string, // 时间戳
    "data": object // 数据
}
```

### 参数 config

- `color`: 设置弹幕的颜色 
- `fontSize`: 设置弹幕的字体大小
- `speed`: 设置弹幕的移动速度
- `alpha`: 设置弹幕透明度
- `lineSpacing`: 设置弹幕行间距

### 回调函数

- `onEnd`: 弹幕全部执行完毕时触发

### 示例

```javascript
var React = require('react')
var Danmaku = require('amazepage').Danmaku

//弹幕的内容
var data = [
    '感觉自己萌萌哒~',
    '感觉自己萌萌哒~',
    '感觉自己萌萌哒~',
    '感觉自己萌萌哒~',
    '感觉自己萌萌哒~',
    '感觉自己萌萌哒~',
    '感觉自己萌萌哒~',
    '感觉自己萌萌哒~'
]

var config = {
    color: '#340BC8', //设置弹幕颜色
    fontSize: '30px', //设置弹幕字体大小
    speed: 10, //设置弹幕移动速度
    alpha: 0.9, //设置弹幕透明度
    lineSpacing: 5 //设置弹幕行间距
}

function handleEnd() {
    console.log('弹幕全部执行完毕！')
}

document.addEventListener('DOMContentLoaded', function () {
    React.render(<Danmaku data={data} config={config} onEnd={handleEnd}/>, document.body);
})
```