Flutter 中的 3D 动画：实现旋转与缩放

Flutter 中的 3D 动画：实现旋转与缩放

5 回复

使用Transform和AnimationController结合来实现。

更多关于Flutter 中的 3D 动画：实现旋转与缩放的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，使用 Transform 和 Matrix4 实现 3D 旋转与缩放。例如，Matrix4.rotationX() 用于旋转，Matrix4.diagonal3Values() 用于缩放。

在 Flutter 中实现 3D 旋转与缩放，可以使用 Transform 控件。对于旋转，使用 Transform.rotate 并指定 Matrix4 来实现绕不同轴的旋转。对于缩放，使用 Transform.scale 并设置缩放比例。结合 AnimationController 和 Tween，可以创建平滑的动画效果。例如：

Transform(
  transform: Matrix4.identity()
    ..rotateX(animation.value)
    ..scale(scaleAnimation.value),
  child: YourWidget(),
)

通过控制 animation.value 和 scaleAnimation.value，可以实现动态的 3D 旋转与缩放效果。

使用Transform和AnimationController结合实现。

在 Flutter 中实现 3D 动画的旋转与缩放，可以使用 Transform 组件结合 Matrix4 来实现。Matrix4 是一个 4x4 的矩阵，支持 3D 变换操作。以下是一个简单的示例，展示如何在 Flutter 中实现 3D 旋转和缩放动画。

import 'package:flutter/material.dart';

class _RotationScaleAnimationState extends State<RotationScaleAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _rotationAnimation;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();

    // 初始化动画控制器
    _controller = AnimationController(
      duration: const Duration(seconds: 5),
      vsync: this,
    )..repeat();

    // 设置旋转动画
    _rotationAnimation = Tween(begin: 0.0, end: 360.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.linear,
      ),
    );

    // 设置缩放动画
    _scaleAnimation = Tween(begin: 1.0, end: 2.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.easeInOut,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('3D Rotation & Scale Animation'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Transform(
              // 应用旋转变换
              transform: Matrix4.identity()
                ..rotateY(_rotationAnimation.value * (3.141592653589793 / 180)),
              // 应用缩放变换
              alignment: Alignment.center,
              child: Transform.scale(
                scale: _scaleAnimation.value,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
              ),
            );
          },
        ),
      ),
    );
  }

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

class RotationScaleAnimation extends StatefulWidget {
  @override
  _RotationScaleAnimationState createState() => _RotationScaleAnimationState();
}

void main() {
  runApp(MaterialApp(
    home: RotationScaleAnimation(),
  ));
}

代码说明：

  1. AnimationController：用于控制动画的播放、暂停、重复等操作。
  2. Tween：定义动画的起始值和结束值，结合 CurvedAnimation 可以设置动画的曲线效果。
  3. Transform：用于应用 3D 变换，Matrix4.identity() 创建一个单位矩阵，rotateY 方法用于绕 Y 轴旋转，Transform.scale 用于缩放。
  4. AnimatedBuilder：用于在动画过程中重建 UI，确保动画效果能够实时更新。

运行此代码，你将看到一个蓝色的方块在不断旋转和缩放。你可以根据需要调整动画的持续时间、旋转角度、缩放比例等参数。

回到顶部