[English](./README.md) | 简体中文

# @ray-js/recording-amplitude-animation

[![latest](https://img.shields.io/npm/v/@ray-js/recording-amplitude-animation/latest.svg)](https://www.npmjs.com/package/@ray-js/recording-amplitude-animation) [![download](https://img.shields.io/npm/dt/@ray-js/recording-amplitude-animation.svg)](https://www.npmjs.com/package/@ray-js/recording-amplitude-animation)

> 音频振幅动画

## 安装

```sh
$ npm install @ray-js/recording-amplitude-animation
// 或者
$ yarn add @ray-js/recording-amplitude-animation
```

## 开发

```sh
# 安装依赖
yarn

# 实时编译Demo代码
yarn start:tuya
```

## 使用

使用时引用动画实例`AnimateActionInstance`, 调用`AnimateActionInstance.update`以持续更新动画

> 参数

- `animateId`与组件参数`animateId`需保持一致
- `percent`为 Number 类型, 范围为 0-1

```tsx
import { AnimateActionInstance } from '@ray-js/recording-amplitude-animation';
AnimateActionInstance.update({ percent, animateId });
```

完整使用如下
注意：同一个页面下仅可使用一个 RayRecordingAmplitudeAnimation

```tsx
import React, { useEffect, useRef, useState } from 'react';
import RayRecordingAmplitudeAnimation, {
  AnimateActionInstance,
} from '@ray-js/recording-amplitude-animation';
import { View } from '@ray-js/ray';

export default () => {
  const MY_ANIM_ID = 'anim1';
  const intervalRef = useRef(null);
  const [play, setPlay] = useState(true);

  const handleClick = useCallback(() => {
    setPlay(!play);
  }, [play]);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      // 模拟音频振幅百分比数据输入, percent范围 0-1
      AnimateActionInstance.update({ percent: Math.random(), animateId: MY_ANIM_ID });
    }, 100);
  }, []);

  return (
    <View>
      <Button onClick={handleClick}>{play ? 'Stop' : 'Play'}</Button>
      <RayRecordingAmplitudeAnimation
        width={300}
        height={200}
        animateId={MY_ANIM_ID}
        speed={2}
        barWidth={3}
        barColor="#00f"
        play={play}
      />
    </View>
  );
};
```