更新记录

v0.1.0（2025-12-23） 下载此版本

首次上传

平台兼容性

uni-app(3.6.15)

uniapp-lantern-release

一个基于 UniApp 的 放花灯 组件，适用于 H5，其他平台暂未测试。组件通过 requestAnimationFrame 实现花灯从底部向上飘动，并叠加左右摇摆动画，适合节日、活动氛围展示。

预览

安装使用

1. 下载项目并引入组件
2. 在页面中引入 lantern-release 组件
3. 按需修改样式和配置参数
4. 通过 ref 调用动画控制方法

示例代码

<template>
  <button @click="handleAddLight">放花灯</button>

  <LanternRelease imageUrl="/static/lantern-release/lantern.png" :speed="3" :swing="20" :width="'200px'"
    :height="'220px'" :startPosition="-220" ref="lanternRef" />
</template>

<script setup>
import { ref } from "vue";
import LanternRelease from "../../components/lantern-release/lantern-release.vue";

const lanternRef = ref();

function handleAddLight() {
  lanternRef.value?.startAnimation();
}
</script>

<style scoped></style>

API

参数

事件

实例方法

通过 ref 可调用以下方法控制花灯动画

许可协议

MIT License，请查看项目根目录下的 LICENSE 文件。