mirror of
https://github.com/qier222/YesPlayMusic.git
synced 2025-03-01 01:37:23 +08:00
32 lines
809 B
TypeScript
32 lines
809 B
TypeScript
import { css, cx, keyframes } from '@emotion/css'
|
|
|
|
const wave = keyframes`
|
|
0% { transform: scaleY(1) }
|
|
50% { transform: scaleY(0.2) }
|
|
100% { transform: scaleY(1)}
|
|
`
|
|
const animation = css`
|
|
transform-origin: bottom;
|
|
animation: ${wave} 1s ease-in-out infinite;
|
|
`
|
|
const delay = ['-100ms', '-500ms', '-1200ms', '-1000ms', '-700ms']
|
|
|
|
const Wave = ({ playing }: { playing: boolean }) => {
|
|
return (
|
|
<div className='grid h-3 grid-cols-5 items-end gap-0.5'>
|
|
{[...new Array(5).keys()].map(i => (
|
|
<div
|
|
key={i}
|
|
className={cx('h-full w-0.5 bg-brand-600', animation)}
|
|
style={{
|
|
animationDelay: delay[i],
|
|
animationPlayState: playing ? 'running' : 'paused',
|
|
}}
|
|
></div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Wave
|