@fx1422/semi-animation-vue

基于 Semi Design 的 Vue 3 动画组件库。提供了一系列精美的动画效果，可用于过渡、加载、提示等场景。

安装

# 使用 npm
npm install @fx1422/semi-animation-vue

# 使用 yarn
yarn add @fx1422/semi-animation-vue

# 使用 pnpm
pnpm add @fx1422/semi-animation-vue

使用方法

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import { SemiAnimation } from '@fx1422/semi-animation-vue'

const app = createApp(App)
app.use(SemiAnimation)
app.mount('#app')

按需引入

import { FadeIn, SlideIn } from '@fx1422/semi-animation-vue'

在组件中使用

<template>
  <div>
    <!-- 使用全局注册的动画 -->
    <semi-fade-in>
      <div>淡入内容</div>
    </semi-fade-in>

    <!-- 使用按需引入的动画 -->
    <slide-in>
      <div>滑入内容</div>
    </slide-in>
  </div>
</template>

<script setup lang="ts">
import { FadeIn, SlideIn } from '@fx1422/semi-animation-vue'
</script>

动画属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | duration | number | 300 | 动画持续时间（毫秒） | | delay | number | 0 | 动画延迟时间（毫秒） | | easing | string | 'ease' | 动画缓动函数 | | direction | string | 'normal' | 动画方向 | | fill | string | 'forwards' | 动画填充模式 | | iterations | number | 1 | 动画重复次数 |

示例

基础动画

<template>
  <div>
    <!-- 淡入动画 -->
    <semi-fade-in>
      <div>淡入内容</div>
    </semi-fade-in>

    <!-- 滑入动画 -->
    <semi-slide-in>
      <div>滑入内容</div>
    </semi-slide-in>

    <!-- 缩放动画 -->
    <semi-scale-in>
      <div>缩放内容</div>
    </semi-scale-in>
  </div>
</template>

自定义动画参数

<template>
  <div>
    <semi-fade-in
      :duration="500"
      :delay="200"
      easing="ease-in-out"
      :iterations="2"
    >
      <div>自定义动画参数</div>
    </semi-fade-in>
  </div>
</template>

组合动画

<template>
  <div>
    <semi-fade-in>
      <semi-slide-in>
        <div>组合动画效果</div>
      </semi-slide-in>
    </semi-fade-in>
  </div>
</template>

可用动画

Semi Design 提供了丰富的动画效果，包括但不限于：

• 淡入淡出（FadeIn/FadeOut）
• 滑入滑出（SlideIn/SlideOut）
• 缩放（ScaleIn/ScaleOut）
• 旋转（RotateIn/RotateOut）
• 弹跳（BounceIn/BounceOut）
• 闪烁（Flash）
• 抖动（Shake）
• 脉冲（Pulse）

动画场景

页面过渡

<template>
  <div>
    <semi-fade-in>
      <div class="page-content">
        <h1>页面标题</h1>
        <p>页面内容</p>
      </div>
    </semi-fade-in>
  </div>
</template>

加载状态

<template>
  <div>
    <semi-pulse v-if="loading">
      <div class="loading-spinner">加载中...</div>
    </semi-pulse>
  </div>
</template>

提示信息

<template>
  <div>
    <semi-bounce-in v-if="showMessage">
      <div class="message">操作成功！</div>
    </semi-bounce-in>
  </div>
</template>

性能优化

1. 使用 v-if 而不是 v-show 来控制动画组件的显示
2. 避免在动画过程中进行大量 DOM 操作
3. 使用 will-change 属性提示浏览器优化动画性能
4. 合理设置动画持续时间和延迟时间

版本兼容

• Vue 3.x
• TypeScript 4.x+

相关链接

• Semi Design 官网
• Semi Design GitHub
• Vue 3 文档

许可证

MIT