Flutter – 圆形显示动画(1)

📌 相关文章

📜 Flutter – 圆形显示动画(1)

📅 最后修改于: 2023-12-03 15:30:49.109000 🧑 作者: Mango

Flutter – 圆形显示动画

在Flutter中，我们可以使用AnimationController和其他动画库来创建各种动画效果。这里我们将会介绍一种创建圆形显示动画的实现方法。

实现方法

步骤一：创建动画控制器

我们需要首先创建一个AnimationController来控制动画的进程，进行以下import：

import 'package:flutter/animation.dart';

代码片段：

AnimationController controller;
@override
void initState() {
  super.initState();
  controller = AnimationController(
    duration: const Duration(milliseconds: 2000), vsync: this);
}

其中，duration指定了动画的持续时间，在这里我们设置了2秒钟。vsync指定了 AnimationController 与哪个对象同步，这里我们使用State对象。

步骤二：创建Tween对象

接下来我们需要创建一个Tween对象，定义动画的起始值和结束值。

final Animation<double> curve = CurvedAnimation(
    parent: controller, curve: Curves.easeInOut);
final Tween<double> animation = Tween(begin: 0.0, end: 1.0);

代码片段：

final Animation<double> curve = CurvedAnimation(parent: controller, curve: Curves.easeInOut);

final Tween<double> animation = Tween(begin: 0.0, end: 1.0);

步骤三：开始动画

现在我们已创建了必要的元素，并已定义出动画的起始值和结束值。现在我们需要在widget构建方法中添加如下代码行：

controller.forward();

通过这行代码，动画就会自动开始运行，此时控制器会向前（递增）移动，并将Tween对象的动画值与控制器值的对应结果反馈给我们。

步骤四：绘制动画

在创建动画后，我们需要将动画结果反馈到屏幕上。这可以通过在widget中创建一个自定义的Paint来实现，

@override
void paint(Canvas canvas, Size size) {
  final paint = Paint()
    ..color = Colors.blue
    ..style = PaintingStyle.stroke
    ..strokeWidth = 4.0;

  canvas.drawCircle(Offset(size.width / 2, size.height / 2),
      animation.evaluate(controller) * size.width / 2, paint);
}

此时圆将绘制在widget的中心。动画被绘制在paint方法中，其中，我们使用动画控制器的当前值乘以圆的半径来计算圆的大小。

步骤五：重绘

最后，我们需要使widget重新构建并绘制。

@override
  void initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          controller.forward();
        }
      })
      ..forward();
  }

这里我们使用addListener()和addStatusListener()方法，当动画完成时，我们需要将控制器翻转并重新开始。并且通过添加状态监听器和添加值监听器，确保我们每次调用setState()更新widget。

结论

通过这个简单的实例，我们展示了如何在Flutter中创建基本的圆形显示动画。当然，Flutter可以创建更复杂的动画，只要我们为其提供必要的元素。

代码片段：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp>
    with SingleTickerProviderStateMixin {    
  AnimationController controller;
  final Animation<double> curve =
      CurvedAnimation(parent: controller, curve: Curves.easeInOut);
  final Tween<double> animation = Tween(begin: 0.0, end: 1.0);

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: const Duration(milliseconds: 2000), vsync: this)
          ..addListener(() {
            setState(() {});
          })
          ..addStatusListener((status) {
            if (status == AnimationStatus.completed) {
              controller.reverse();
            } else if (status == AnimationStatus.dismissed) {
              controller.forward();
            }
          })
          ..forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter – Circle Animation',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter – Circle Animation'),
        ),
        body: Container(
          color: Colors.white,
          child: Center(
            child: CustomPaint(
              size: Size(150, 150),
              painter: CirclePainter(animation.evaluate(curve)),
            ),
          ),
        ),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  final double value;

  CirclePainter(this.value);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 4.0;

    canvas.drawCircle(
        Offset(size.width / 2, size.height / 2), value * size.width / 2, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

返回的markdown格式：

Flutter – 圆形显示动画

在Flutter中，我们可以使用AnimationController和其他动画库来创建各种动画效果。这里我们将会介绍一种创建圆形显示动画的实现方法。

实现方法

步骤一：创建动画控制器

我们需要首先创建一个AnimationController来控制动画的进程，进行以下import：

import 'package:flutter/animation.dart';

代码片段：

AnimationController controller;
@override
void initState() {
  super.initState();
  controller = AnimationController(
    duration: const Duration(milliseconds: 2000), vsync: this);
}

其中，duration指定了动画的持续时间，在这里我们设置了2秒钟。vsync指定了 AnimationController 与哪个对象同步，这里我们使用State对象。

步骤二：创建Tween对象

接下来我们需要创建一个Tween对象，定义动画的起始值和结束值。

final Animation<double> curve = CurvedAnimation(
    parent: controller, curve: Curves.easeInOut);
final Tween<double> animation = Tween(begin: 0.0, end: 1.0);

代码片段：

final Animation<double> curve = CurvedAnimation(parent: controller, curve: Curves.easeInOut);

final Tween<double> animation = Tween(begin: 0.0, end: 1.0);

步骤三：开始动画

现在我们已创建了必要的元素，并已定义出动画的起始值和结束值。现在我们需要在widget构建方法中添加如下代码行：

controller.forward();

通过这行代码，动画就会自动开始运行，此时控制器会向前（递增）移动，并将Tween对象的动画值与控制器值的对应结果反馈给我们。

步骤四：绘制动画

在创建动画后，我们需要将动画结果反馈到屏幕上。这可以通过在widget中创建一个自定义的Paint来实现，

@override
void paint(Canvas canvas, Size size) {
  final paint = Paint()
    ..color = Colors.blue
    ..style = PaintingStyle.stroke
    ..strokeWidth = 4.0;

  canvas.drawCircle(Offset(size.width / 2, size.height / 2),
      animation.evaluate(controller) * size.width / 2, paint);
}

此时圆将绘制在widget的中心。动画被绘制在paint方法中，其中，我们使用动画控制器的当前值乘以圆的半径来计算圆的大小。

步骤五：重绘

最后，我们需要使widget重新构建并绘制。

@override
  void initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          controller.forward();
        }
      })
      ..forward();
  }

结论

通过这个简单的实例，我们展示了如何在Flutter中创建基本的圆形显示动画。当然，Flutter可以创建更复杂的动画，只要我们为其提供必要的元素。

代码片段：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp>
    with SingleTickerProviderStateMixin {    
  AnimationController controller;
  final Animation<double> curve =
      CurvedAnimation(parent: controller, curve: Curves.easeInOut);
  final Tween<double> animation = Tween(begin: 0.0, end: 1.0);

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: const Duration(milliseconds: 2000), vsync: this)
          ..addListener(() {
            setState(() {});
          })
          ..addStatusListener((status) {
            if (status == AnimationStatus.completed) {
              controller.reverse();
            } else if (status == AnimationStatus.dismissed) {
              controller.forward();
            }
          })
          ..forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter – Circle Animation',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter – Circle Animation'),
        ),
        body: Container(
          color: Colors.white,
          child: Center(
            child: CustomPaint(
              size: Size(150, 150),
              painter: CirclePainter(animation.evaluate(curve)),
            ),
          ),
        ),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  final double value;

  CirclePainter(this.value);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 4.0;

    canvas.drawCircle(
        Offset(size.width / 2, size.height / 2), value * size.width / 2, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}