English | [简体中文](./README-zh_CN.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)

> Audio amplitude animation

## Installation

```sh
$ npm install @ray-js/recording-amplitude-animation
# or
$ yarn add @ray-js/recording-amplitude-animation
```

## Develop

```sh
# install deps
yarn

# watch compile demo
yarn start:tuya
```

## Usage

When using, reference the animation instance `AnimateActionInstance`, call `AnimateActionInstance.update` to continuously update the animation

> Parameters

- `animateId` must be consistent with the component parameter `animateId`
- `percent` is of Number type, ranging from 0-1

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

The complete usage is as follows
Note: Only one RayRecordingAmplitudeAnimation can be used on the same page

```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(() => {
      // Simulate audio amplitude percentage data input, percent range 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>
  );
};
```