LuminaFloating

一个React动画组件，可以在页面上生成浮动元素，如心形、星星等图片，然后朝目标元素飞去。

安装

npm install lumina-floating

使用方法

import React, { useState } from 'react';
import { LuminaFloating } from 'lumina-floating';
import heartImage from './heart.png';

function App() {
  const [isAnimating, setIsAnimating] = useState(false);
  const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });

  const handleClick = (event) => {
    if (isAnimating) return;

    const rect = event.currentTarget.getBoundingClientRect();
    setStartPosition({
      x: rect.left,
      y: rect.top
    });
    setIsAnimating(true);
  };

  const handleAnimationComplete = () => {
    setIsAnimating(false);
  };

  return (
    <div>
      <button onClick={handleClick}>
        点击触发动画
      </button>

      {isAnimating && (
        <LuminaFloating
          startX={startPosition.x}
          startY={startPosition.y}
          imageUrl={heartImage}
          count={10}
          onComplete={handleAnimationComplete}
        >
          <div className="target-element">
            目标元素
          </div>
        </LuminaFloating>
      )}
    </div>
  );
}

属性

属性名	类型	默认值	描述
startX	number	必填	动画开始的X坐标
startY	number	必填	动画开始的Y坐标
imageUrl	string	必填	浮动元素的图片URL
count	number	10	浮动元素的数量
beatTime	number	0.8	跳动动画的持续时间(秒)
positiveSequence	boolean	false	是否正序，false是倒序
randomOffsetX	number	40	随机偏移量X轴，0是不偏移
randomOffsetY	number	50	随机偏移量Y轴，0是不偏移
flyToTargetDuration	number	0.8	飞向目标元素的动画时间(秒)
jumpDelay	number	0.3	跳动动画的随机延迟最大值(秒)
flyDelay	number	0.1	飞行动画的间隔时间(秒)
jumpingAnimationClass	string	'jumping-animation'	自定义跳动动画类名
jumpingAnimationType	1 \| 2	1	动画类型：1=默认跳动，2=散开
flyToTargetClass	string	'fly-to-target'	自定义飞行动画类名
floatingItemClass	string	'floating-item'	自定义浮动元素类名
onComplete	() => void	undefined	动画完成后的回调函数
children	ReactNode	必填	子元素，将作为飞行目标

动画类型

组件支持两种动画类型：

默认跳动动画（jumpingAnimationType={1}）
散开动画（jumpingAnimationType={2}），类似于钻石/金币收集效果

自定义样式

您可以通过传递自定义的CSS类名来修改动画样式：

<LuminaFloating
  startX={startPosition.x}
  startY={startPosition.y}
  imageUrl={heartImage}
  jumpingAnimationClass="my-jumping-animation"
  flyToTargetClass="my-fly-animation"
  floatingItemClass="my-floating-item"
>
  <div className="target">目标</div>
</LuminaFloating>

许可证

MIT

Package detail

lumina-animate

readme

LuminaFloating

安装

使用方法

属性

动画类型

自定义样式

许可证