Formily过渡动画：表单切换与加载效果

Formily过渡动画：表单切换与加载效果

【免费下载链接】formily 📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3 项目地址: https://gitcode.com/gh_mirrors/fo/formily

在现代Web应用中，流畅的过渡动画（Transition Animation）不仅能提升用户体验，还能直观反馈操作状态。作为高性能表单解决方案，Formily通过组件设计与样式系统内置了丰富的动画效果，本文将详解如何在实际项目中应用这些能力。

动画系统架构

Formily的动画实现采用"组件逻辑+样式定义"的分离架构，核心动画逻辑分散在以下模块中：

• 基础动画定义：packages/antd/src/form-item/animation.less定义了表单提示信息的显示/隐藏动画
• 交互反馈样式：packages/antd/src/array-base/style.less实现了数组项操作的过渡效果
• 组件状态管理：packages/next/src/form-step/index.tsx控制分步表单的切换逻辑

核心动画原理

Formily使用CSS3的transition和animation属性实现动画效果，通过LESS变量系统确保样式一致性。以表单帮助信息动画为例，采用了 translateY 变换和 opacity 过渡的组合：

/* 源自 [packages/antd/src/form-item/animation.less](https://link.gitcode.com/i/ada74556200a26f6b9db071526c014eb#L1-L13) */
@keyframes antShowHelpIn {
  0% {
    transform: translateY(-5px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

分步表单切换动画

分步表单（Step Form）是最能体现过渡动画价值的场景之一。当用户在不同表单步骤间切换时，平滑的过渡效果能有效减轻认知负担。

实现方式

Formily通过FormStep组件实现分步切换，核心逻辑位于packages/next/src/form-step/index.tsx。该组件通过控制current状态值，配合CSS过渡实现步骤切换：

// 关键状态管理代码 [packages/next/src/form-step/index.tsx](https://link.gitcode.com/i/bdf4d5a502f58dbff25a3e6536b4a056#L111-L115)
const formStep: IFormStep = model({
  current: defaultCurrent,
  setCurrent(key: number) {
    setDisplay(key)
    formStep.current = key
  },
  // ...
})

使用示例

在Schema配置中定义分步表单结构，动画效果会自动生效：

{
  "type": "object",
  "properties": {
    "step1": {
      "type": "object",
      "x-component": "StepPane",
      "x-component-props": { "title": "基本信息" },
      "properties": {
        "name": { "type": "string", "title": "姓名" }
      }
    },
    "step2": {
      "type": "object",
      "x-component": "StepPane",
      "x-component-props": { "title": "联系方式" },
      "properties": {
        "phone": { "type": "string", "title": "电话" }
      }
    }
  }
}

表单元素交互动画

除了步骤切换，Formily还为各类表单元素提供了精细的交互动画，主要包括：

数组项操作动画

数组控件（Array Control）的添加/删除/排序操作都配有过渡效果，定义在packages/antd/src/array-base/style.less：

/* 数组项删除按钮过渡 [packages/antd/src/array-base/style.less](https://link.gitcode.com/i/d536de6b71b28469465d00cf129ef4a5#L8) */
.@{array-base-prefix-cls}-remove {
  transition: all 0.25s ease-in-out;
  /* ... */
}

表单验证反馈

当表单验证状态变化时，错误提示会通过淡入效果引起用户注意，动画定义在packages/antd/src/form-item/animation.less。这种动画既保证了提示的可见性，又不会过于突兀。

自定义动画效果

虽然Formily提供了默认动画，但实际项目中常需要根据品牌风格定制。有两种主要定制方式：

覆盖LESS变量

通过修改LESS变量改变动画参数，如调整过渡时长：

// 自定义动画时长
@form-item-help-animation-duration: 0.5s;

扩展动画组件

通过高阶组件方式包装现有组件，添加自定义动画逻辑：

import { FormItem } from '@formily/antd'
import { motion } from 'framer-motion'

const AnimatedFormItem = ({ children, ...props }) => (
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    transition={{ duration: 0.3 }}
  >
    <FormItem {...props}>{children}</FormItem>
  </motion.div>
)

性能优化建议

动画虽好，但过度使用会影响性能。使用Formily动画时建议：

1. 避免同时触发过多动画 - 尤其在数组控件中，一次添加多个项时可批量处理
2. 优先使用transform和opacity - 这两个属性的动画性能最优
3. 控制动画时长 - 表单动画建议控制在0.2-0.5秒内，参考packages/antd/src/array-base/style.less中的0.25秒配置

总结

Formily通过组件化设计将复杂的动画逻辑封装为易用的API，开发者无需深入动画实现细节即可创建专业的表单动效。核心动画定义在以下文件中，建议深入阅读以充分利用Formily的动画能力：

• packages/antd/src/form-item/animation.less - 表单元素动画基础
• packages/next/src/form-step/index.tsx - 分步表单控制逻辑
• docs/guide/scenes/step-form.zh-CN.md - 分步表单使用文档

合理应用这些动画效果，能让你的表单界面既美观又易用，为用户提供愉悦的填写体验。

【免费下载链接】formily 📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3 项目地址: https://gitcode.com/gh_mirrors/fo/formily