Floating text

React 伤害飘字组件：事件发生时从目标上弹出文字，上浮并淡出；暴击字号更大，呈橙色。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/floating-text

示例

命中、暴击与修复

floating-text-hits.tsx

import { useRef } from "react";import { Button } from "@/components/zero/button";import {  FloatingTextLayer,  useFloatingText,} from "@/components/zero/floating-text";import { CrateIcon } from "@/components/zero/icons/crate";export default function FloatingTextHits() {  const floats = useFloatingText();  // a little scatter, so hits in a row do not stack on one spot  const hits = useRef(0);  const at = () => {    hits.current += 1;    return {      x: 120 + ((hits.current * 37) % 70) - 35,      y: 76 - (hits.current % 3) * 14,    };  };  return (    <div className="grid justify-items-center gap-5">      <div className="relative grid h-36 w-60 place-items-center border-(length:--zero-stroke-thin) border-zero-line bg-zero-void">        <CrateIcon className="size-16 text-zero-text-2" />        <FloatingTextLayer floats={floats} />      </div>      <div className="flex flex-wrap justify-center gap-3">        <Button          size="sm"          variant="secondary"          onClick={() => floats.spawn({ text: "−18", ...at() })}        >          Hit        </Button>        <Button          size="sm"          variant="secondary"          onClick={() => floats.spawn({ text: "−54", kind: "crit", ...at() })}        >          Critical        </Button>        <Button          size="sm"          variant="secondary"          onClick={() => floats.spawn({ text: "+30", kind: "heal", ...at() })}        >          Repair        </Button>        <Button          size="sm"          variant="secondary"          onClick={() =>            floats.spawn({ text: "Sealed!", kind: "info", ...at() })          }        >          Seal        </Button>      </div>    </div>  );}

行为

useFloatingText() 维护飘字列表；FloatingTextLayer 将列表绘制在设置了定位的父元素之上；spawn() 在指定位置生成一条飘字。每条飘字按 float 过渡弹出、上浮、淡出，随后自行移除。damage 为普通样式；crit 字号更大，使用传说稀有度的橙色，弹出的力度更强；heal 为绿色；info 为强调色。

飘字层仅作装饰，对读屏软件隐藏：真实数值需在读屏软件能读到的地方另行提供，例如 Gauge。开启「减少动态效果」时，飘字在原地淡出。

属性

useFloatingText().spawn

属性	类型	默认值	说明
text	string	—	显示的文字。
x / y	number	—	相对飘字层左上角的位置，单位 px。
kind	"damage" \| "crit" \| "heal" \| "info"	"damage"	样式。

FloatingTextLayer

属性	类型	默认值	说明
floats	ReturnType<typeof useFloatingText>	—	要绘制的列表。