使用flutter中的Transform创建动画

2024-11-24

在 Flutter 中，Transform 是一个非常强大的类，用于对子组件进行各种变换操作，如平移、旋转、缩放等。Transform 类提供了多种静态方法来创建不同的变换效果。以下是 Transform 的详细介绍及其常用方法：

`Transform` 类

Transform 类的主要作用是在绘制子组件之前对其应用一个变换矩阵。这个变换矩阵可以是平移、旋转、缩放等操作的组合。

常用方法

**Transform.translate**：
- 用于沿 x 轴和 y 轴平移子组件。
- 参数：
  - offset：Offset 类型，表示平移的距离。
  - child：要平移的子组件。
- 示例：
  1
  2
  3
  4
  5
  6
  7
  8
  Transform.translate(
  offset: Offset(50.0, 50.0),
  child: Container(
  width: 100.0,
  height: 100.0,
  color: Colors.blue,
  ),
  )
**Transform.rotate**：
- 用于绕原点旋转子组件。
- 参数：
  - angle：旋转的角度（以弧度为单位）。
  - origin：旋转的中心点，默认为 (0, 0)。
  - alignment：旋转的对齐方式，默认为 Alignment.center。
  - transformHitTests：是否响应点击事件，默认为 true。
  - child：要旋转的子组件。
- 示例：
  1
  2
  3
  4
  5
  6
  7
  8
  Transform.rotate(
  angle: 3.141592653589793 / 4, // 45度
  child: Container(
  width: 100.0,
  height: 100.0,
  color: Colors.blue,
  ),
  )
**Transform.scale**：
- 用于缩放子组件。
- 参数：
  - scaleX：x 轴的缩放比例，默认为 1.0。
  - scaleY：y 轴的缩放比例，默认为 1.0。
  - origin：缩放的中心点，默认为 (0, 0)。
  - alignment：缩放的对齐方式，默认为 Alignment.center。
  - transformHitTests：是否响应点击事件，默认为 true。
  - child：要缩放的子组件。
- 示例：
  1
  2
  3
  4
  5
  6
  7
  8
  9
  Transform.scale(
  scaleX: 1.5,
  scaleY: 1.5,
  child: Container(
  width: 100.0,
  height: 100.0,
  color: Colors.blue,
  ),
  )
**Transform.transform**：
- 用于应用任意的变换矩阵。
- 参数：
  - transform：Matrix4 类型，表示变换矩阵。
  - origin：变换的中心点，默认为 (0, 0)。
  - alignment：变换的对齐方式，默认为 Alignment.center。
  - transformHitTests：是否响应点击事件，默认为 true。
  - child：要变换的子组件。
- 示例：
  1
  2
  3
  4
  5
  6
  7
  8
  Transform.transform(
  transform: Matrix4.skewY(0.3), // 斜切变换
  child: Container(
  width: 100.0,
  height: 100.0,
  color: Colors.blue,
  ),
  )

组合变换

你可以组合多种变换效果来实现更复杂的动画。例如，先旋转再平移：

Transform.translate(
  offset: Offset(50.0, 50.0),
  child: Transform.rotate(
    angle: 3.141592653589793 / 4, // 45度
    child: Container(
      width: 100.0,
      height: 100.0,
      color: Colors.blue,
    ),
  ),
)

使用 `Matrix4` 进行复杂变换

Matrix4 类提供了多种方法来创建和操作变换矩阵。例如，你可以创建一个同时包含旋转和平移的矩阵：

Transform(
  transform: Matrix4.identity()
    ..rotateZ(3.141592653589793 / 4) // 45度旋转
    ..translate(50.0, 50.0), // 平移
  child: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.blue,
  ),
)

创建动画

如果需要展示动画需要继承SingleTickerProviderStateMixin类，然后创建AnimationController控制器和Animation<T>泛型的内容，控制动画变化的内容。


late AnimationController _controller;
late Animation<double> _animation;

@override
void initState() {
  super.initState();
  // 创建 AnimationController
  _controller = AnimationController(
    duration: const Duration(milliseconds: 200), // 动画持续时间
    vsync: this,
  );

  // 创建旋转动画 从0开始，到3.14结束
  _animation = Tween<double>(begin: 0, end: 3.14).animate(_controller)
    ..addListener(() {
      setState(() {}); // 确保每次动画值变化时都会重新构建 UI
    });
}
/// 确保资源释放
@override
void dispose() {
  _controller.dispose();
  super.dispose();
}
/// 点击开始动画
void _startAnimation() {
  if (_controller.isCompleted) {
    _controller.reverse();
  } else {
    _controller.forward();
  }
}
...
/// 把需要编写的元素包裹起来就行
  Transform.rotate(
    angle: _animation.value,
    alignment: Alignment.center,
    child: body
  ),
...

如果需要做其他比如颜色的变化直接换用ColorTween即可

1 2	// 创建颜色动画 _colorAnimation = ColorTween(begin: Colors.blue, end: Colors.red).animate(_controller);

AnimatedSwitcher 使用

AnimatedSwitcher 是 Flutter 中的一个组件，用于在动画切换子组件时进行切换。它通常用于在切换子组件时进行动画过渡，但是这个组件的进入和离开动画默认是反着的，有些时候我想让这个组件的进入和离开动画是正着，那么就需要重写transitionBuilder。
进行简单的封装一下

// AnimatedSwitcher的 child 切换时会对新child执行正向动画（forward），而对旧child执行反向动画（reverse）
class SlideTransitionX extends AnimatedWidget {
  SlideTransitionX({
    super.key,
    required Animation<double> position,
    this.transformHitTests = true,
    this.direction = AxisDirection.down,
    required this.child,
  }) : super(listenable: position) {
    switch (direction) {
      case AxisDirection.up:
        _tween = Tween(begin: const Offset(0, 1), end: const Offset(0, 0));
        break;
      case AxisDirection.right:
        _tween = Tween(begin: const Offset(-1, 0), end: const Offset(0, 0));
        break;
      case AxisDirection.down:
        _tween = Tween(begin: const Offset(0, -1), end: const Offset(0, 0));
        break;
      case AxisDirection.left:
        _tween = Tween(begin: const Offset(1, 0), end: const Offset(0, 0));
        break;
    }
  }

  final bool transformHitTests;

  final Widget child;

  final AxisDirection direction;

  late final Tween<Offset> _tween;

  @override
  Widget build(BuildContext context) {
    final position = listenable as Animation<double>;
    Offset offset = _tween.evaluate(position);
    if (position.status == AnimationStatus.reverse) {
      switch (direction) {
        case AxisDirection.up:
          offset = Offset(offset.dx, -offset.dy);
          break;
        case AxisDirection.right:
          offset = Offset(-offset.dx, offset.dy);
          break;
        case AxisDirection.down:
          offset = Offset(offset.dx, -offset.dy);
          break;
        case AxisDirection.left:
          offset = Offset(-offset.dx, offset.dy);
          break;
      }
    }
    return FractionalTranslation(
      translation: offset,
      transformHitTests: transformHitTests,
      child: child,
    );
  }
}

简单调用，Perfect

 AnimatedSwitcher(
  duration: const Duration(milliseconds: 200),
  transitionBuilder: (Widget child, Animation<double> animation) {
    return SlideTransitionX(
      position: animation,
      child: child,
    );
  },
  child: Text(
    key: ValueKey<int>(count),
    count.toString(),
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

这样就可以实现倒计时的数字滚动动画了

Transform 类