旋转动画Rotation Transition-Flutter 适配OpenHarmony

suyuhan123456

900人浏览 · 2025-12-01 20:44:03

suyuhan123456 · 2025-12-01 20:44:03 发布

在这里插入图片描述

案例概述

本案例展示如何使用 RotationTransition 创建平滑的旋转动画效果。RotationTransition 是 Flutter 中用于控制旋转变化的显式动画组件，通过改变子组件的旋转角度来创建旋转效果。

在现代应用中，RotationTransition 广泛应用于：

加载动画：旋转的加载指示器
菜单展开：菜单箭头的旋转
图标动画：图标的旋转效果
转盘动画：转盘式选择器的旋转

RotationTransition 的优势在于它提供了完整的旋转控制权，可以实现复杂的旋转序列。在企业应用中，需要处理多个元素的同步动画、不同屏幕尺寸的适配、性能优化等问题。

此外，动画还应支持键盘导航、无障碍支持、性能优化等功能。在 PC 端应用中，需要确保动画效果流畅，不影响应用性能。

核心概念

1. RotationTransition（旋转过渡）

RotationTransition 是一个显式动画组件，通过改变子组件的旋转角度来创建旋转效果。其主要特点包括：

turns 参数：接受一个 Animation，值为旋转圈数
child 参数：要应用旋转效果的子组件
alignment 参数：旋转的中心点，默认为中心
完全控制：需要手动管理 AnimationController，提供完整的动画控制权
性能高效：使用 Transform 实现，不改变布局

2. 旋转范围与效果

旋转值定义了组件的旋转角度。其主要特点包括：

0.0：0 度（无旋转）
0.25：90 度
0.5：180 度
1.0：360 度（完整旋转）

3. 动画应用场景

RotationTransition 可用于多种场景：

加载动画：旋转的加载指示器
菜单展开：菜单箭头的旋转
图标动画：图标的旋转效果
转盘动画：转盘式选择器的旋转

代码详解

1. 基础旋转

RotationTransition(
  turns: _controller,
  child: Container(...),
)

2. 旋转曲线

RotationTransition(
  turns: Tween<double>(begin: 0.0, end: 1.0).animate(
    CurvedAnimation(parent: _controller, curve: Curves.linear),
  ),
  child: Container(...),
)

3. 旋转中心

Transform.rotate(
  angle: _animation.value * 2 * pi,
  alignment: Alignment.center,
  child: Container(...),
)

高级话题：旋转的企业级应用

1. 动态/响应式设计与多屏幕适配

根据屏幕宽度调整旋转速度，确保在所有设备上都有合适的动画效果。

final screenWidth = MediaQuery.of(context).size.width;
final duration = screenWidth < 600 
  ? Duration(seconds: 1) 
  : Duration(seconds: 2);
_controller = AnimationController(duration: duration, vsync: this);

2. 动画曲线与缓动效果

使用不同的动画曲线创建不同的视觉效果。

final animation = Tween<double>(begin: 0.0, end: 1.0).animate(
  CurvedAnimation(parent: _controller, curve: Curves.linear),
);

3. 搜索/过滤/排序功能

在列表中使用 RotationTransition 创建平滑的过滤效果。

ListView.builder(
  itemBuilder: (context, index) {
    return RotationTransition(
      turns: _controller,
      child: ListTile(title: Text('Item $index')),
    );
  },
)

4. 选择与批量操作

为选择操作提供视觉反馈。

RotationTransition(
  turns: _controller,
  child: Icon(Icons.check_circle, color: Colors.blue),
)

5. 加载与缓存策略

使用 RotationTransition 创建平滑的加载状态指示。

_controller = AnimationController(
  duration: Duration(seconds: 2),
  vsync: this,
)..repeat();

RotationTransition(
  turns: _controller,
  child: CircularProgressIndicator(),
)

6. 键盘导航与快捷键

为动画添加键盘支持。

Focus(
  onKey: (node, event) {
    if (event.isKeyPressed(LogicalKeyboardKey.space)) {
      _controller.forward();
      return KeyEventResult.handled;
    }
    return KeyEventResult.ignored;
  },
  child: RotationTransition(turns: _controller, child: ...),
)

7. 无障碍支持与屏幕阅读器

为动画添加无障碍标签。

Semantics(
  label: '旋转动画，当前旋转角度 ${(_controller.value * 360).toStringAsFixed(0)}°',
  child: RotationTransition(turns: _controller, child: ...),
)

8. 样式自定义与主题适配

创建可配置的动画主题。

class RotationTheme {
  final Duration duration;
  final Curve curve;
  final bool repeat;
  
  const RotationTheme({
    this.duration = const Duration(seconds: 2),
    this.curve = Curves.linear,
    this.repeat = true,
  });
}

9. 数据持久化与导出

保存动画状态。

void _saveAnimationState() async {
  // 保存动画状态到本地存储
}

10. 单元测试与集成测试

为动画编写测试用例。

void main() {
  testWidgets('RotationTransition 测试', (WidgetTester tester) async {
    await tester.pumpWidget(MaterialApp(home: Scaffold(body: Container())));
    expect(find.byType(RotationTransition), findsWidgets);
  });
}

OpenHarmony PC 端适配要点

屏幕宽度检测：根据屏幕宽度调整旋转速度
响应式动画：在 PC 端使用更长的旋转周期
键盘导航：支持 Space 等快捷键触发动画
鼠标交互：支持悬停效果
性能优化：使用 SingleTickerProviderStateMixin

实际应用场景

加载动画：旋转的加载指示器
菜单展开：菜单箭头的旋转
图标动画：图标的旋转效果
转盘动画：转盘式选择器的旋转
刷新动画：刷新按钮的旋转

扩展建议

支持多个旋转阶段
实现更复杂的旋转序列
添加旋转的暂停和恢复
支持旋转的反向播放
实现自定义旋转曲线

总结

RotationTransition 是创建旋转效果的强大工具。通过合理的设计和实现，可以创建出功能完整、用户体验良好的动画系统。在 PC 端应用中，充分利用屏幕空间、提供键盘导航和无障碍支持是关键。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net