Flutter动画过渡效果插件animated_cross的使用

Flutter动画过渡效果插件animated_cross的使用

animated_cross简介

animated_cross 是一个用于实现动画交叉图标效果的 Flutter 包。

安装

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

dependencies:
  animated_cross: ^1.0.0

然后运行 flutter pub get 来获取该包。

使用

导入

在你的 Dart 文件中导入 animated_cross 包：

import 'package:animated_cross/animated_cross.dart';

简单实现

首先创建一个 AnimationController 并定义一个 Tween 动画来控制交叉图标的进度。然后使用 AnimatedCross 小部件来显示动画。

// 创建一个动画控制器
AnimationController _animationController = AnimationController(
  vsync: this, // 必须传入一个TickerProvider，这里用SingleTickerProviderStateMixin实现
  duration: Duration(seconds: 1), // 动画持续时间
);

// 创建一个动画对象
Animation<double> _animation = Tween<double>(
  begin: 0, // 初始值
  end: 1, // 结束值
).animate(
  CurvedAnimation(
    parent: _animationController, // 父级动画控制器
    curve: Curves.easeInOutCirc, // 动画曲线
  ),
);

// 显示交叉图标
void _showCross() {
  _animationController.forward(); // 开始动画
}

// 重置交叉图标
void _resetCross() {
  _animationController.reverse(); // 逆向播放动画
}

示例代码

以下是完整的示例代码，展示如何在 Flutter 应用程序中使用 animated_cross。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Cross Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Animated Cross Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({this.title = ''});

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;

  [@override](/user/override)
  void initState() {
    super.initState();

    _animationController = AnimationController(
      vsync: this, // 必须传入一个TickerProvider
      duration: Duration(seconds: 1), // 动画持续时间
    );

    _animation = Tween<double>(
      begin: 0, // 初始值
      end: 1, // 结束值
    ).animate(
      CurvedAnimation(
        parent: _animationController, // 父级动画控制器
        curve: Curves.easeInOutCirc, // 动画曲线
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Animated Cross Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              child: AnimatedCross(
                progress: _animation,
                size: 200, // 设置交叉图标的大小
              ),
            ),
            TextButton(
              child: Text("Go"),
              onPressed: () {
                _animationController.forward(); // 开始动画
              },
            ),
            TextButton(
              child: Text("Reset"),
              onPressed: () {
                _animationController.reset(); // 重置动画
              },
            )
          ],
        ),
      ),
    );
  }
}