页面转场应用

---

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

适配的第三方库地址：

• shared_preferences: https://pub.dev/packages/shared_preferences

一、项目概述

运行效果图

1.1 应用简介

页面转场应用是一款专注于页面转场动画效果的展示与配置工具，帮助开发者直观地了解和应用各种页面转场效果。应用内置十种常用转场动画类型，支持自定义转场时长、动画曲线、滑动方向等参数，让页面切换更加生动流畅。

应用以活力的粉红色为主色调，象征动感与活力。涵盖转场预览、转场库、设置管理三大模块。用户可以预览各种转场效果、快速切换转场类型、自定义转场参数，实现个性化的页面转场体验。

1.2 核心功能

功能模块	功能描述	实现方式
转场预览	实时预览转场效果	PageRouteBuilder
转场库	十种转场动画类型	枚举定义
时长设置	自定义转场时长	Slider控件
动画曲线	六种动画曲线选择	Curves类
滑动方向	四个方向滑动转场	Alignment
自定义参数	缩放比例与旋转角度	参数配置
快速切换	一键切换转场类型	快捷按钮
设置持久化	保存用户配置	SharedPreferences

1.3 转场类型定义

序号	转场名称	Emoji	描述	特点
1	淡入淡出	🌓	渐变透明度实现平滑过渡	简洁优雅
2	滑动	👉	从指定方向滑入滑出	经典实用
3	缩放	🔍	从小到大或从大到小缩放	聚焦效果
4	旋转	🔄	带旋转效果的转场	动感十足
5	尺寸变化	📐	尺寸渐变过渡	平滑自然
6	淡入滑动	🎬	淡入与滑动组合效果	双重动画
7	淡入缩放	🎭	淡入与缩放组合效果	层次丰富
8	iOS风格	📱	iOS原生滑动转场	苹果风格
9	Material风格	🤖	Material共享元素转场	安卓风格
10	自定义	✨	用户自定义转场参数	灵活多变

1.4 动画曲线定义

序号	曲线名称	描述	效果
1	标准	easeInOut	先加速后减速
2	缓入	easeIn	开始时加速
3	缓出	easeOut	结束时减速
4	线性	linear	匀速运动
5	弹跳	bounceInOut	弹跳效果
6	弹性	elasticInOut	弹性回弹

1.5 滑动方向定义

序号	方向名称	起始位置	描述
1	从左	右侧	页面从左侧滑入
2	从右	左侧	页面从右侧滑入
3	从上	下方	页面从上方滑入
4	从下	上方	页面从下方滑入

1.6 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
数据存储	SharedPreferences	>= 2.0.0
转场动画	PageRouteBuilder	内置
目标平台	鸿蒙OS / Web	API 21+

1.7 项目结构

lib/
└── main_page_transition.dart
    ├── PageTransitionApp               # 应用入口
    ├── TransitionType                  # 转场类型枚举
    ├── SlideDirection                  # 滑动方向枚举
    ├── TransitionSettings              # 转场设置模型
    ├── TransitionStorage               # 设置存储服务
    ├── HomePage                        # 主页面（底部导航）
    ├── _buildTransitionPage            # 转场预览页
    ├── _buildLibraryPage               # 转场库页
    ├── _buildSettingsPage              # 设置页
    ├── _createRoute                    # 创建路由方法
    └── DemoPage                        # 演示页面

---

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 转场执行流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 转场类型枚举 (TransitionType)

enum TransitionType {
  fade('淡入淡出', Icons.fade, '渐变透明度实现平滑过渡'),
  slide('滑动', Icons.swipe, '从指定方向滑入滑出'),
  scale('缩放', Icons.zoom_in, '从小到大或从大到小缩放'),
  rotation('旋转', Icons.rotate_right, '带旋转效果的转场'),
  size('尺寸变化', Icons.aspect_ratio, '尺寸渐变过渡'),
  fadeSlide('淡入滑动', Icons.transition_fade, '淡入与滑动组合效果'),
  fadeScale('淡入缩放', Icons.transform, '淡入与缩放组合效果'),
  cupertino('iOS风格', Icons.phone_iphone, 'iOS原生滑动转场'),
  material('Material风格', Icons.android, 'Material共享元素转场'),
  custom('自定义', Icons.auto_awesome, '用户自定义转场参数');

  final String label;
  final IconData icon;
  final String description;
  const TransitionType(this.label, this.icon, this.description);
}

3.1.2 滑动方向枚举 (SlideDirection)

enum SlideDirection {
  left('从左', Alignment.centerRight),
  right('从右', Alignment.centerLeft),
  top('从上', Alignment.bottomCenter),
  bottom('从下', Alignment.topCenter);

  final String label;
  final Alignment startAlignment;
  const SlideDirection(this.label, this.startAlignment);
}

3.1.3 转场设置模型 (TransitionSettings)

class TransitionSettings {
  final TransitionType type;
  final Duration duration;
  final Curve curve;
  final SlideDirection slideDirection;
  final double customScale;
  final double customRotation;

  const TransitionSettings({
    this.type = TransitionType.fade,
    this.duration = const Duration(milliseconds: 300),
    this.curve = Curves.easeInOut,
    this.slideDirection = SlideDirection.right,
    this.customScale = 0.8,
    this.customRotation = 0.1,
  });

  TransitionSettings copyWith({
    TransitionType? type,
    Duration? duration,
    Curve? curve,
    SlideDirection? slideDirection,
    double? customScale,
    double? customRotation,
  }) {
    return TransitionSettings(
      type: type ?? this.type,
      duration: duration ?? this.duration,
      curve: curve ?? this.curve,
      slideDirection: slideDirection ?? this.slideDirection,
      customScale: customScale ?? this.customScale,
      customRotation: customRotation ?? this.customRotation,
    );
  }
}

3.1.4 转场类型使用分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 转场预览页结构

3.2.3 转场库页结构

3.2.4 设置页结构

3.3 路由构建逻辑

3.4 数据存储逻辑

---

四、UI设计规范

4.1 配色方案

应用以活力的粉红色为主色调，象征动感与活力：

颜色类型	色值	用途
主色	#E91E63 (Pink)	导航、主题元素
辅助色	#F06292	渐变背景
背景色	#FAFAFA	页面背景
卡片背景	#FFFFFF	信息卡片
强调色	#E91E63	按钮高亮
成功色	#4CAF50	完成状态

4.2 转场类型配色

转场类型	推荐色值	视觉效果
淡入淡出	#9E9E9E	灰色
滑动	#2196F3	蓝色
缩放	#4CAF50	绿色
旋转	#FF9800	橙色
自定义	#9C27B0	紫色

4.3 字体规范

元素	字号	字重	颜色
页面标题	20px	Bold	白色
转场名称	24px	Bold	白色
卡片标题	16px	Bold	#000000
卡片描述	12px	Regular	#666666
设置标签	14px	Regular	#000000
数值显示	14px	Bold	主色

4.4 组件规范

4.4.1 转场预览卡片

┌─────────────────────────────────────┐
│                                     │
│           🎬 淡入滑动                │
│                                     │
│          时长: 300ms                 │
│                                     │
└─────────────────────────────────────┘

        ┌─────────────────┐
        │  ▶ 预览转场效果  │
        └─────────────────┘

        ⏩ 快速切换转场

4.4.2 转场类型卡片

┌─────────────────────────────────────┐
│  🌓  淡入淡出                   ✓   │
│      渐变透明度实现平滑过渡           │
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│  👉  滑动                            │
│      从指定方向滑入滑出               │
└─────────────────────────────────────┘

4.4.3 设置卡片

┌─────────────────────────────────────┐
│  时长设置                              │
│                                     │
│  转场时长                    300ms   │
│  ├───●──────────────────────┤       │
│  100                          1000  │
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│  动画曲线                              │
│                                     │
│  ┌──────┐ ┌──────┐ ┌──────┐        │
│  │ 标准 │ │ 缓入 │ │ 缓出 │        │
│  └──────┘ └──────┘ └──────┘        │
│  ┌──────┐ ┌──────┐ ┌──────┐        │
│  │ 线性 │ │ 弹跳 │ │ 弹性 │        │
│  └──────┘ └──────┘ └──────┘        │
└─────────────────────────────────────┘

4.4.4 演示页面

┌─────────────────────────────────────┐
│  ← 演示页面                           │
├─────────────────────────────────────┤
│                                     │
│                                     │
│           ┌─────────────┐           │
│           │             │           │
│           │     ✓      │           │
│           │             │           │
│           │  转场成功！  │           │
│           │             │           │
│           │ 点击返回按钮 │           │
│           │ 查看返回转场 │           │
│           │             │           │
│           └─────────────┘           │
│                                     │
│                                     │
│           ┌─────────────┐           │
│           │  ← 返回     │           │
│           └─────────────┘           │
│                                     │
└─────────────────────────────────────┘

---

五、核心功能实现

5.1 淡入淡出转场实现

PageRoute _createFadeRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
    transitionDuration: _settings.duration,
    reverseTransitionDuration: _settings.duration,
  );
}

5.2 滑动转场实现

PageRoute _createSlideRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return SlideTransition(
        position: Tween<Offset>(
          begin: _getSlideOffset(),
          end: Offset.zero,
        ).animate(CurvedAnimation(
          parent: animation,
          curve: _settings.curve,
        )),
        child: child,
      );
    },
    transitionDuration: _settings.duration,
    reverseTransitionDuration: _settings.duration,
  );
}

5.3 组合转场实现

PageRoute _createFadeSlideRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: SlideTransition(
          position: Tween<Offset>(
            begin: _getSlideOffset(),
            end: Offset.zero,
          ).animate(CurvedAnimation(
            parent: animation,
            curve: _settings.curve,
          )),
          child: child,
        ),
      );
    },
    transitionDuration: _settings.duration,
    reverseTransitionDuration: _settings.duration,
  );
}

5.4 自定义转场实现

PageRoute _createCustomRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: SlideTransition(
          position: Tween<Offset>(
            begin: _getSlideOffset(),
            end: Offset.zero,
          ).animate(CurvedAnimation(
            parent: animation,
            curve: _settings.curve,
          )),
          child: ScaleTransition(
            scale: Tween<double>(
              begin: _settings.customScale,
              end: 1.0,
            ).animate(CurvedAnimation(
              parent: animation,
              curve: _settings.curve,
            )),
            child: RotationTransition(
              turns: Tween<double>(
                begin: _settings.customRotation,
                end: 0.0,
              ).animate(CurvedAnimation(
                parent: animation,
                curve: _settings.curve,
              )),
              child: child,
            ),
          ),
        ),
      );
    },
    transitionDuration: _settings.duration,
    reverseTransitionDuration: _settings.duration,
  );
}

5.5 数据存储实现

class TransitionStorage {
  static const String _settingsKey = 'transition_settings';

  static Future<void> save(TransitionSettings settings) async {
    final prefs = await SharedPreferences.getInstance();
    final map = settings.toMap();
    await prefs.setString(_settingsKey,
        '${map['type']},${map['durationMs']},${map['curveIndex']},'
        '${map['slideDirection']},${map['customScale']},${map['customRotation']}');
  }

  static Future<TransitionSettings> load() async {
    final prefs = await SharedPreferences.getInstance();
    final data = prefs.getString(_settingsKey);
    if (data == null) return const TransitionSettings();
    try {
      final parts = data.split(',').map(int.tryParse).toList();
      return TransitionSettings(
        type: TransitionType.values[parts[0] ?? 0],
        duration: Duration(milliseconds: parts[1] ?? 300),
        curve: TransitionSettings._indexToCurve(parts[2] ?? 0),
        slideDirection: SlideDirection.values[parts[3] ?? 1],
        customScale: (parts[4] ?? 80) / 100,
        customRotation: (parts[5] ?? 10) / 100,
      );
    } catch (e) {
      return const TransitionSettings();
    }
  }
}

---

六、交互设计

6.1 转场预览流程

6.2 快速切换流程

6.3 设置修改流程

---

七、扩展功能规划

7.1 后续版本规划

7.2 功能扩展建议

7.2.1 自定义动画编辑器

编辑功能：

• 可视化编辑动画曲线
• 拖拽调整动画参数
• 实时预览效果
• 保存自定义模板

7.2.2 转场模板库

模板功能：

• 预设转场模板
• 用户自定义模板
• 模板分享
• 模板导入导出

7.2.3 代码导出功能

导出功能：

• 生成转场代码
• 复制到剪贴板
• 导出为文件
• 支持多种格式

---

八、注意事项

8.1 开发注意事项

1. 性能优化：复杂转场动画可能影响性能，注意优化

2. 反向转场：确保返回时的转场效果正确

3. 状态保持：转场过程中保持页面状态

4. 动画曲线：选择合适的动画曲线提升体验

5. 时长控制：转场时长不宜过长，影响用户体验

8.2 常见问题

问题	原因	解决方案
转场卡顿	动画过于复杂	简化动画或优化性能
反向转场异常	未设置reverseDuration	设置reverseTransitionDuration
设置未保存	存储失败	检查SharedPreferences权限
曲线效果不对	曲线选择错误	选择合适的动画曲线
滑动方向错误	Offset计算错误	检查滑动方向设置

8.3 使用技巧

🎬 页面转场应用使用技巧 🎬

转场选择

• 根据应用风格选择转场
• 保持转场风格一致性
• 适度使用复杂转场
• 考虑用户使用习惯

参数调整

• 时长控制在200-500ms
• 选择合适的动画曲线
• 自定义参数适度调整
• 多次预览确认效果

最佳实践

• iOS风格用滑动转场
• Android风格用淡入淡出
• 重要页面用缩放转场
• 列表页用滑动转场

---

九、运行说明

9.1 环境要求

环境	版本要求
Flutter SDK	>= 3.0.0
Dart SDK	>= 2.17.0
鸿蒙OS	API 21+
Web浏览器	Chrome 90+

9.2 运行命令

# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_page_transition.dart --web-port 8205

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_page_transition.dart

# 代码分析
flutter analyze lib/main_page_transition.dart

---

十、总结

页面转场应用是一款专注于页面转场动画效果的展示与配置工具，帮助开发者直观地了解和应用各种页面转场效果。应用内置淡入淡出、滑动、缩放、旋转、尺寸变化、淡入滑动、淡入缩放、iOS风格、Material风格、自定义等十种转场类型，满足不同场景的转场需求。

核心功能涵盖转场预览、转场库、时长设置、动画曲线、滑动方向、自定义参数、快速切换、设置持久化八大模块。用户可以实时预览转场效果、快速切换转场类型、自定义转场参数，实现个性化的页面转场体验。

应用采用 Material Design 3 设计规范，以活力的粉红色为主色调，象征动感与活力。通过本应用，希望能够帮助开发者更好地理解和应用页面转场动画，提升应用的用户体验。

页面转场应用——让页面切换更生动

---