main.dart:
import 'package:flutter/material.dart'; import 'easing.dart'; void main(){ runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Container( child: MaterialApp( title: 'Flutter缓动动画', theme: ThemeData( primarySwatch: Colors.blue ), debugShowCheckedModeBanner: false, home: AnimateDemo(), ), ); } } class AnimateDemo extends StatelessWidget{ @override Widget build(BuildContext context) { List<Widget> list = [ EasingAnimation() ]; return Scaffold( appBar: AppBar( title: Text('动画示例'), ), body: ListView( children: list.map((widget){ return ListTile( title: Text(widget.toString()), onTap: (){ Navigator.of(context).push(MaterialPageRoute(builder: (context)=>widget)); }, ); }).toList(), ), ); } }easing.dart:
import 'package:flutter/material.dart'; class EasingAnimation extends StatefulWidget{ EasingAnimation({Key key}) : super(key:key); _EasingAnimationState createState() => _EasingAnimationState(); } //混入 SingleTickerProviderStateMixin 是为了在不显示当前页面时,动画停止,节约资源 class _EasingAnimationState extends State<EasingAnimation> with SingleTickerProviderStateMixin{ Animation _animation; AnimationController _controller; @override void initState() { super.initState(); _controller = AnimationController(duration:Duration(seconds: 2), vsync: this); _animation = Tween(begin: -1.0, end: 0.0).animate( //缓动动画 CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn ) )..addStatusListener(_handler); } _handler(status){ //动画完成 if(status == AnimationStatus.completed){ _animation.removeStatusListener(_handler); //重置动画 _controller.reset(); //重新离场播放 _animation = Tween(begin: 0.0, end: 1.0).animate( //缓动动画 CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn ) )..addStatusListener((status){ if(status == AnimationStatus.completed){ Navigator.pop(context); } }); _controller.forward(); } } //销毁动画 @override void dispose() { super.dispose(); _controller.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return Scaffold( appBar: AppBar( title: Text('缓动动画'), ), body: AnimatedBuilder( animation: _controller, builder: (context,child){ return Transform( transform: Matrix4.translationValues( _animation.value*width, 0.0, 0.0 ), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.red, ), ), ); }, ), ); } }