import 'package:flutter/material.dart'; import 'state/animationcs.dart'; void main() => runApp(new MainApp()); class MainApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( // title: 'Main App', theme: ThemeData( primarySwatch: Colors.blue, ), home: AnimationCs(), ); } }
import 'package:flutter/material.dart'; class AnimationCs extends StatefulWidget { @override _AnimationCsState createState() => new _AnimationCsState(); } class _AnimationCsState extends State<AnimationCs> with SingleTickerProviderStateMixin { AnimationController _controller; Animation<double> _bigerAnimation; Animation<double> _bigerToCurveAnimation; @override Widget build(BuildContext context) { return new Scaffold( body: new Container( child: new Center( // child: new Text(_controller.value.toString().substring(0, 3)), child: ListView(children: <Widget>[ new Text((_bigerAnimation.value*100).round().toString()), new Text((_bigerToCurveAnimation.value*100).round().toString()) ], ), ), ), ); } @override void initState() { super.initState(); _controller = new AnimationController( duration: const Duration(seconds: 10), vsync: this, ) ..addListener(() { setState(() {}); }) ..addStatusListener((AnimationStatus status) { if (status == AnimationStatus.completed) { print('AnimationStatus.completed'); _controller.reverse(); } else if (status == AnimationStatus.dismissed) { print('AnimationStatus.dismissed'); _controller.forward(); } else {} }); ///主要是拿到 不同方式产生的 value 用于产生不同的ui效果, 这个 Tween 可用于 0.0-1.0 之间的分段用 _bigerAnimation = new Tween(begin: 0.0, end: 1.0).animate(_controller); _bigerToCurveAnimation = new CurveTween(curve: Curves.elasticInOut).animate(_bigerAnimation); _controller.forward(); } @override void dispose() { _controller.dispose(); super.dispose(); } }
直接 AS 创建个 flutter 项目 放入这两个文件玩玩
参考 : https://www.didierboelens.com/2018/06/animations-in-flutter---easy-guide---tutorial/
参考自己 : https://www.cnblogs.com/LiuPan2016/p/8989823.html