更新记录

1.0.0（2025-09-04）

更新浪漫背景

平台兼容性

uni-app(4.07)

uni-app x(4.07)

其他

恋爱魔法 - UniApp 浪漫动画组件

插件简介

恋爱魔法 是一款专为恋爱、交友类应用设计的浪漫动画组件。
它可以在页面中呈现心形、花瓣和孔明灯等动画效果，为应用增添互动性与趣味性。
适合用于聊天、互动、节日活动、浪漫主题页面等场景。

功能特点

• 爱心、花瓣、灯笼等多种浪漫特效
• 可配置生成数量与生成间隔
• 支持点击触发烟花动画
• 支持多页面重复使用，无需额外初始化
• 完全基于 Vue 2 + UniApp 开发，轻量、性能优化

标签

恋爱、互动、浪漫、动画、社交、节日特效

安装方式

将组件文件 QixiEffect.vue 拷贝到项目 components 目录下，然后在页面中引入即可。

使用方法

1. 页面局部引入

<template>
  <view>
    <!-- 插入浪漫动画组件 -->
    <qixi-effect />
  </view>
</template>

<script>
import QixiEffect from '@/components/QixiEffect.vue';

export default {
  components: { QixiEffect }
}
</script>
2. 多页面使用

组件可以在任意页面中重复使用，无需额外初始化

默认包含心形、花瓣和灯笼动画

3. 可选属性配置
<qixi-effect
  :maxHearts="10"
  :heartInterval="600"
  :petalInterval="700"
/>

属性  类型  默认值 描述
maxHearts   Number  12  页面同时存在的最大心形数量
heartInterval   Number  500 心形生成间隔（毫秒）
petalInterval   Number  500 花瓣生成间隔（毫秒）
4. 方法调用（可选）

通过 ref 调用组件方法：

<qixi-effect ref="qixiEffect" />

<script>
export default {
  methods: {
    explodeHeart() {
      this.$refs.qixiEffect.triggerFirework('heart', 0);
    }
  }
}
</script>

triggerFirework(type, index)：点击或手动触发烟花动画

type 可为 'heart' 或 'lantern'

index 对应当前渲染元素的索引

适用场景

聊天消息背景动画

互动活动页面

节日或主题促销页面

交友/恋爱类应用的特效展示

注意事项

组件基于 CSS 动画，请确保在移动端和 H5 页面中均可使用

页面中不要一次性渲染过多心形或花瓣，避免性能下降

使用 ref 调用方法时，请确保组件已挂载