高级动画组件

高级动画组件用于创建复杂的动画效果和交互体验。

提示：合理使用动画可以显著提升用户体验，但要注意性能影响。

📱 渲染效果预览

🔄

AnimatedBuilder

AnimatedBuilder 用于构建复杂的自定义动画。

class SpinningWidget extends StatefulWidget {
  @override
  _SpinningWidgetState createState() => _SpinningWidgetState();
}

class _SpinningWidgetState extends State
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..repeat();
    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.rotate(
          angle: _animation.value * 2 * 3.14159,
          child: child,
        );
      },
      child: FlutterLogo(),
    );
  }
}

📱 渲染效果预览

TickerProvider

TickerProvider 为动画控制器提供心跳信号。

// 使用 SingleTickerProviderStateMixin
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

// 使用 TickerProviderStateMixin（多个动画）
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State
    with TickerProviderStateMixin {
  late AnimationController _controller1;
  late AnimationController _controller2;

  @override
  void initState() {
    super.initState();
    _controller1 = AnimationController(vsync: this);
    _controller2 = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller1.dispose();
    _controller2.dispose();
    super.dispose();
  }
}

📱 渲染效果预览

CurvedAnimation

CurvedAnimation 为动画添加缓动效果。

final controller = AnimationController(
  duration: Duration(seconds: 2),
  vsync: this,
);

// 使用缓动曲线
final curvedAnimation = CurvedAnimation(
  parent: controller,
  curve: Curves.easeInOut,
);

// 使用不同的缓动曲线
final curvedAnimation = CurvedAnimation(
  parent: controller,
  curve: Curves.bounceOut,
);

// 自定义曲线
final curvedAnimation = CurvedAnimation(
  parent: controller,
  curve: Interval(0.2, 0.8, curve: Curves.easeIn),
);

📱 渲染效果预览

TweenSequence

TweenSequence 用于组合多个 Tween 动画。

final controller = AnimationController(
  duration: Duration(seconds: 3),
  vsync: this,
);

final tweenSequence = TweenSequence([
  TweenSequenceItem(
    tween: Tween(begin: 0.0, end: 1.0),
    weight: 1.0,
  ),
  TweenSequenceItem(
    tween: Tween(begin: 1.0, end: 2.0),
    weight: 1.0,
  ),
  TweenSequenceItem(
    tween: Tween(begin: 2.0, end: 1.5),
    weight: 1.0,
  ),
]);

final animation = tweenSequence.animate(controller);

📱 渲染效果预览

🎬

Lottie

Lottie 用于播放 After Effects 动画。

import 'package:lottie/lottie.dart';

// 简单用法
Lottie.asset('assets/animation.json')

// 加载网络动画
Lottie.network('https://example.com/animation.json')

// 控制动画
Lottie.asset(
  'assets/animation.json',
  controller: _controller,
  onLoaded: (composition) {
    _controller.duration = composition.duration;
    _controller.forward();
  },
)

// 循环播放
Lottie.asset(
  'assets/animation.json',
  repeat: true,
  animate: true,
)

Flare

Flare 用于播放 Flare 动画。

import 'package:flare_flutter/flare_actor.dart';

// 简单用法
FlareActor(
  "assets/Filip.flr",
  animation: "idle",
)

// 控制动画
FlareActor(
  "assets/Filip.flr",
  animation: "test",
  callback: (name) {
    print("Animation: $name");
  },
)

// 混合动画
FlareActor(
  "assets/Filip.flr",
  animation: "idle",
  shouldClip: true,
)

动画性能优化：

使用 AnimatedBuilder 重建最小范围
使用 RepaintBoundary 隔离动画
避免在动画中创建新对象
使用 const 构造函数
考虑使用硬件加速

← 数据序列化组件自定义 Widget →