flutter的动画

import 'dart:async';

import 'package:flutter/material.dart';

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


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue, splashColor: Colors.transparent),
      home: HYHomePage(),
    );
  }
}


class HYHomePage extends StatefulWidget {
  @override
  _HYHomePageState createState() => _HYHomePageState();
}

class _HYHomePageState extends State<HYHomePage>
    with SingleTickerProviderStateMixin {
  // 创建AnimationController
  late AnimationController _controller;
  late Animation<double> _animation;
  late Animation _sizeAnim;
 
//  bool _isForward;

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

    // 1.创建AnimationController，AnimationController（动画控制器）
    // 是Flutter中用于控制动画的类。它可以管理动画的状态、时间和值，
    // 并提供了一些方法和属性来控制动画的播放、停止、反转等操作。
    // 通过创建AnimationController对象，可以实现对动画的控制和管理。
    _controller = AnimationController(
        vsync: this,
        duration: Duration(seconds: 2)
    );

    /*
    * CurvedAnimation（曲线动画）是一种在动画中使用的技术，它可以创建出平滑的、
    * 流畅的动画效果。它通过定义一个曲线来控制动画的变化，使得动画的速度、
    * 位置或其他属性可以按照曲线的形状进行变化，从而实现更加自然的动画效果。
    * CurvedAnimation常用于用户界面动画、游戏开发等领域，
    * 可以为应用程序带来更好的交互体验和视觉效果。
    * */
    // 2.设置Curve的值，CurvedAnimation的父动画控制器为_controller，
    // 通过设置curve参数为Curves.linear，将线性曲线应用于动画
    _animation = CurvedAnimation(parent: _controller, curve: Curves.linear);
/*
  Tween（插值器）是Flutter中用于定义动画值范围的类。
  使用了Tween类来创建一个动画效果，起始值为50.0，结束值为150.0。然后，
  通过调用animate方法，并传入_animation对象（可能是一个CurvedAnimation），
  创建了一个Animation对象。这个Animation对象可以用于在动画的不同阶段获取插值值，
  即从50.0到150.0之间的值，根据动画的进度进行插值计算。
  这样可以实现一个从起始值到结束值的平滑过渡动画效果
*
* */
    // 3.Tween
    _sizeAnim = Tween(begin: 50.0, end: 150.0).animate(_animation);

    // 监听动画的状态改变
    /*
    * AnimationStatus（动画状态）是Flutter中用于表示动画状态的枚举类。
    * 它定义了不同的动画状态，可以用于监听动画的状态变化并做出相应的处理。

    AnimationStatus枚举类包含以下几个值：

  - dismissed：动画处于起始状态，即动画的值为起始值。
  - forward：动画正在正向播放，即动画的值在起始值和结束值之间逐渐增加。
  - reverse：动画正在反向播放，即动画的值在结束值和起始值之间逐渐减小。
  - completed：动画已经完成，即动画的值为结束值。
    * */
    _controller.addStatusListener((status) {//添加监控
      if (status == AnimationStatus.completed) {
        _controller.reverse();//反向播放动画
      } else if (status == AnimationStatus.dismissed) {
        _controller.forward();//正向播放动画
      }
    });
  }

  /*
   * AnimatedBuilder（动画构建器）是Flutter中用于构建动画的小部件（widget）。
   * 它可以根据动画的当前值来构建小部件树，并在动画更新时自动重建。
      使用AnimatedBuilder可以将动画的构建逻辑与小部件的构建逻辑分离开来，
      使得代码更加清晰和可维护。它接收一个Animation对象作为参数，
      并提供一个回调函数来构建小部件树。在动画更新时，AnimatedBuilder会自动重建小部件树，
      以反映动画的当前值。
   * */
  @override
  Widget build(BuildContext context) {
    print("执行_HYHomePageState的build方法");
    return Scaffold(
      appBar: AppBar(
        title: Text("首页"),
      ),
      body: Center(
        child: AnimatedBuilder(
            animation: _controller,
            builder: (ctx, child) {
              return Icon(Icons.favorite, color: Colors.red, size: _sizeAnim.value);
            }
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.play_arrow),
        onPressed: () {
          if (_controller.isAnimating) {//正在播放动画（isAnimating为true）
            _controller.stop();//调用stop方法来停止动画
            print(_controller.status);
          } else if (_controller.status == AnimationStatus.forward) {//正向播放
            _controller.forward();//调用forward方法来继续正向播放动画
          } else if (_controller.status == AnimationStatus.reverse) {//反向播放
            _controller.reverse();//reverse方法来继续反向播放动画
          } else {
            _controller.forward();//调用forward方法来开始播放动画
          }
        },
      ),
    );
  }

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


/**
 *  1.Animation: 抽象类
 *    * 监听动画值的改变
 *    * 监听动画状态的改变
 *    * value
 *    * status
 *  2.AnimationController继承自Animation
 *    * vsync: 同步信号(this -> with SingleTickerProviderStateMixin)
 *    * forward(): 向前执行动画
 *    * reverse(): 反转执行动画
 *  3.CurvedAnimation:
 *    * 作用: 设置动画执行的速率(速度曲线)
 *  4.Tween: 设置动画执行的value范围
 *    * begin: 开始值
 *    * end: 结束值
 */