here-comes-the-moon-react

在同一位置逐帧渐变展示每个元素。如果提供了合适的元素，渐变每个元素就像播放一段动画。

Installation

npm install --save here-comes-the-moon-react

Props

• defaultI，number，默认帧的序列，默认 0；
• breakI，number[]，暂停帧的序列列表，默认 [0, 4]；
• moons，ReactNode[]，帧元素，默认 ["🌑", "🌘", "🌗", "🌖", "🌕", "🌔", "🌓", "🌒"]；
• frameTm，number，切换元素之间的间隔时间（ms），默认 48；
• dur，number，元素渐变的时间（ms），默认 208；
• onEnd，() => void，一段帧的播放结束后调用的函数；
• moonClassName，string，每个元素的样式。

Ref

组件通过 ref 向外部提供了几个函数：

• play，播放，根据 breakI 判断是否结束动画；
• stop，暂停播放；
• toggle，切换元素切换的方向，切换从前向后或从后向前。

Example

import Moon from "here-comes-the-moon-react";
import { useRef } from "react";

export default function Example() {
  const moonRef = useRef();
  return <>
    <Moon ref={moonRef} breakI={[0, 4]} moons={["🌑", "🌘", "🌗", "🌖", "🌕", "🌔", "🌓", "🌒"]} />
    <button onClick={() => {moonRef.current.play()}}>play</button>
    <button onClick={() => {moonRef.current.stop()}}>stop</button>
    <button onClick={() => {moonRef.current.toggle()}}>toggle</button>
  </>;
}

原理

查看原理

CHANGELOG

查看更新日志。

版本规则

查看语义化版本 2.0.0。

协议

查看 MIT License。

支持与赞助

请随意 Issue、PR 和 Star，您也可以支付该项目，支付金额由您从该项目中获得的收益自行决定。