Flutter18.Animation-double

最新推荐文章于 2024-05-10 16:16:00 发布

原创最新推荐文章于 2024-05-10 16:16:00 发布 · 644 阅读

0 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

56 篇文章

订阅专栏

本文深入讲解了在Flutter中使用AnimationController进行动画控制的方法。通过一个具体的示例，演示了如何创建和初始化AnimationController，以及如何使用Tween进行动画值的转换。文章详细解释了动画的四种状态，并展示了如何通过监听器跟踪动画的状态变化。

ex:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: HomePage(),
));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  Animation<double> _doubleAnim;//Animation是抽象类
  AnimationController _animationController;
  String _animValue;

  //四种状态
  //1 dismissed 初始状态
  //2 forward 从头到尾播放状态
  //3 reverse 从尾到头播放状态
  //4 completed 完成状态

  //初始化AnimationController
  //vsync是TickerProvider
  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: const Duration(seconds: 3));
    _doubleAnim = Tween(begin: 0.0, end: 3.0).animate(_animationController)//Animation用Tween来操作
      ..addListener(() {//监听
        print(_doubleAnim.value.toString());
        setState(() {
          _animValue = _doubleAnim.value.toString();
        });
      })
      ..addStatusListener((status) {//监听
        print('$status');
      });
  }

  //生命周期方法，
  @override
  void dispose() {
    super.dispose();
    _animationController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(_animValue ??= '0.0'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _animationController.forward(from: 0.0);
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

输出：