Flutter三维旋转效果插件rotation_three_d

Flutter三维旋转效果插件rotation_three_d_effect的使用

简介

rotation_three_d_effect 是一个受 SwiftUI 的 rotation3DEffect 启发的 Flutter 插件，允许为任何小部件应用三维旋转效果。通过这个插件，您可以轻松地实现各种3D旋转效果，如有限旋转、全屏旋转以及自定义旋转等。

安装

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  rotation_three_d_effect: ^0.2.1

使用方法

导入包

在您的 Dart 文件中导入 rotation_three_d_effect 包：

import 'package:rotation_three_d_effect/rotation_three_d_effect.dart';

应用3D旋转效果

下面是几种常见的3D旋转效果的示例代码：

有限返回到原位的旋转

Rotation3DEffect.limitedReturnsInPlace(
  child: Text(
    'Hello 3D Rotation! \n(Returns in place)',
    style: TextStyle(fontSize: 35),
  ),
)

Rotating Text

有限旋转（不返回到原位）

Rotation3DEffect.limited(
  maximumPan: 80, // 最大旋转角度
  child: FilledButton.tonal(
    onPressed: () {},
    child: const Text("Limited 3D Rotation (No return in place)"),
  ),
)

Rotating Tonal Button

全屏3D旋转

Rotation3DEffect(
  child: FlutterLogo(
    size: 150,
  ),
)

Flutter Logo Rotating

自定义3D旋转

Rotation3DEffect(
  maximumPan: 20, // 最大旋转角度
  returnsInPlace: true, // 是否返回到原位
  returnInPlaceDuration: const Duration(seconds: 2), // 返回到原位的持续时间
  child: Card(
    elevation: 6,
    color: Colors.amber[300],
    shadowColor: Colors.black,
    child: const SizedBox(
      height: 160,
      width: 300,
      child: Center(child: Text("Rotating Card")),
    ),
  ),
)

Rotating Card

带有初始和结束偏移的自定义3D旋转

Rotation3DEffect(
  maximumPan: 90, // 最大旋转角度
  returnsInPlace: true, // 是否返回到原位
  returnInPlaceDuration: const Duration(milliseconds: 200), // 返回到原位的持续时间
  initalPosition: const Offset(45, 90), // 初始位置偏移
  endPosition: const Offset(45, 90), // 结束位置偏移
  child: const Card(
    elevation: 6,
    color: Colors.green,
    shadowColor: Colors.black,
    child: SizedBox(
      height: 160,
      width: 300,
      child: Center(
        child: Text(
          "Rotating Card\nInitial and end pos:\nx: 45, y: 90",
          textAlign: TextAlign.center,
        ),
      ),
    ),
  ),
)

Rotating Card with Initial and End Offsets

完整示例Demo

以下是一个完整的示例代码，展示了如何在一个应用程序中使用 rotation_three_d_effect 插件来实现多种3D旋转效果：

import 'package:flutter/material.dart';
import 'package:rotation_three_d_effect/rotation_three_d_effect.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          bottom: false,
          child: Center(
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 有限返回到原位的旋转
                  Rotation3DEffect.limitedReturnsInPlace(
                    child: const Text(
                      'Hello 3D Rotation! \n(Returns in place)',
                      style: TextStyle(fontSize: 35),
                    ),
                  ),
                  const SizedBox(height: 50),

                  // 有限旋转（不返回到原位）
                  Rotation3DEffect.limited(
                    maximumPan: 80, // 最大旋转角度
                    child: FilledButton.tonal(
                      onPressed: () {},
                      child: const Text("Limited 3D Rotation (No return in place)"),
                    ),
                  ),
                  const SizedBox(height: 50),

                  // 全屏3D旋转
                  const Text("Unrestriced 3D Rotation"),
                  Rotation3DEffect(
                    child: const FlutterLogo(
                      size: 150,
                    ),
                  ),
                  const SizedBox(height: 50),

                  // 自定义3D旋转
                  Rotation3DEffect(
                    maximumPan: 90, // 最大旋转角度
                    returnsInPlace: true, // 是否返回到原位
                    returnInPlaceDuration: const Duration(seconds: 1), // 返回到原位的持续时间
                    child: Card(
                      elevation: 6,
                      color: Colors.amber[300],
                      shadowColor: Colors.black,
                      child: const SizedBox(
                        height: 160,
                        width: 300,
                        child: Center(child: Text("Rotating Card")),
                      ),
                    ),
                  ),
                  const SizedBox(height: 50),

                  // 带有初始偏移的3D旋转
                  Rotation3DEffect.limitedReturnsInPlace(
                    initalPosition: const Offset(21, 50), // 初始位置偏移
                    child: const Text(
                      '3D Rotation with\nWith inital offset! \n(Returns in place)',
                      style: TextStyle(fontSize: 25),
                      textAlign: TextAlign.center,
                    ),
                  ),
                  const SizedBox(height: 50),

                  // 带有初始和结束偏移的自定义3D旋转
                  Rotation3DEffect(
                    maximumPan: 90, // 最大旋转角度
                    returnsInPlace: true, // 是否返回到原位
                    returnInPlaceDuration: const Duration(milliseconds: 200), // 返回到原位的持续时间
                    initalPosition: const Offset(45, 90), // 初始位置偏移
                    endPosition: const Offset(45, 90), // 结束位置偏移
                    child: const Card(
                      elevation: 6,
                      color: Colors.green,
                      shadowColor: Colors.black,
                      child: SizedBox(
                        height: 160,
                        width: 300,
                        child: Center(
                          child: Text(
                            "Rotating Card\nInitial and end pos:\nx: 45, y: 90",
                            textAlign: TextAlign.center,
                          ),
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(height: 150),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter三维旋转效果插件rotation_three_d_effect的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

htzhanglong 1楼•8 小时前

更多关于Flutter三维旋转效果插件rotation_three_d_effect的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何使用 rotation_three_d_effect 插件在 Flutter 中实现三维旋转效果的代码示例。

首先，你需要在你的 pubspec.yaml 文件中添加对 rotation_three_d_effect 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  rotation_three_d_effect: ^最新版本号  # 请替换为实际的最新版本号

然后运行 flutter pub get 以获取依赖。

接下来是一个完整的 Flutter 应用示例，它使用 rotation_three_d_effect 插件来实现一个简单的三维旋转效果：

import 'package:flutter/material.dart';
import 'package:rotation_three_d_effect/rotation_three_d_effect.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 3D Rotation Effect',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RotationEffectScreen(),
    );
  }
}

class RotationEffectScreen extends StatefulWidget {
  @override
  _RotationEffectScreenState createState() => _RotationEffectScreenState();
}

class _RotationEffectScreenState extends State<RotationEffectScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('3D Rotation Effect'),
      ),
      body: Center(
        child: Rotation3DEffect(
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: Center(
              child: Text(
                '3D',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
          angleX: _controller.value * pi / 2,
          angleY: _controller.value * pi / 2,
          angleZ: _controller.value * pi / 2,
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下事情：

依赖添加：在 pubspec.yaml 文件中添加了 rotation_three_d_effect 插件的依赖。
动画控制器：在 _RotationEffectScreenState 类中，我们创建了一个 AnimationController 来控制旋转动画。
三维旋转效果：使用 Rotation3DEffect 组件包裹了一个 Container，并通过 angleX、angleY 和 angleZ 属性设置旋转角度。这些角度由动画控制器 _controller 的值动态计算得出。
动画重复：调用 _controller.repeat(reverse: true) 使动画在正向和反向之间循环。

你可以根据需要调整动画的时长和旋转角度等参数，以实现不同的三维旋转效果。这个示例提供了一个基础框架，帮助你快速上手 rotation_three_d_effect 插件。