main.dart：
01 | import 'package:flutter/material.dart'; |
02 | import 'easing.dart'; |
03 |
04 | void main(){ |
05 | runApp(MyApp()); |
06 | } |
07 |
08 | class MyApp extends StatelessWidget { |
09 | const MyApp({Key key}) : super(key: key); |
10 |
11 | @override |
12 | Widget build(BuildContext context) { |
13 | return Container( |
14 | child: MaterialApp( |
15 | title: 'Flutter缓动动画', |
16 | theme: ThemeData( |
17 | primarySwatch: Colors.blue |
18 | ), |
19 | debugShowCheckedModeBanner: false, |
20 | home: AnimateDemo(), |
21 | ), |
22 | ); |
23 | } |
24 | } |
25 |
26 | class AnimateDemo extends StatelessWidget{ |
27 | @override |
28 | Widget build(BuildContext context) { |
29 |
30 | List<Widget> list = [ |
31 | EasingAnimation() |
32 | ]; |
33 |
34 | return Scaffold( |
35 | appBar: AppBar( |
36 | title: Text('动画示例'), |
37 | ), |
38 | body: ListView( |
39 | children: list.map((widget){ |
40 | return ListTile( |
41 | title: Text(widget.toString()), |
42 | onTap: (){ |
43 | Navigator.of(context).push(MaterialPageRoute(builder: (context)=>widget)); |
44 | }, |
45 | ); |
46 | }).toList(), |
47 | ), |
48 | ); |
49 | } |
50 | } |
01 | import 'package:flutter/material.dart'; |
02 |
03 | class EasingAnimation extends StatefulWidget{ |
04 | EasingAnimation({Key key}) : super(key:key); |
05 |
06 | _EasingAnimationState createState() => _EasingAnimationState(); |
07 | } |
08 |
09 | //混入 SingleTickerProviderStateMixin 是为了在不显示当前页面时，动画停止，节约资源 |
10 | class _EasingAnimationState extends State<EasingAnimation> with SingleTickerProviderStateMixin{ |
11 | Animation _animation; |
12 | AnimationController _controller; |
13 |
14 | @override |
15 | void initState() { |
16 | super.initState(); |
17 | _controller = AnimationController(duration:Duration(seconds: 2), vsync: this); |
18 | _animation = Tween(begin: -1.0, end: 0.0).animate( |
19 | //缓动动画 |
20 | CurvedAnimation( |
21 | parent: _controller, |
22 | curve: Curves.fastOutSlowIn |
23 | ) |
24 | )..addStatusListener(_handler); |
25 | } |
26 |
27 | _handler(status){ |
28 | //动画完成 |
29 | if(status == AnimationStatus.completed){ |
30 | _animation.removeStatusListener(_handler); |
31 | //重置动画 |
32 | _controller.reset(); |
33 | //重新离场播放 |
34 | _animation = Tween(begin: 0.0, end: 1.0).animate( |
35 | //缓动动画 |
36 | CurvedAnimation( |
37 | parent: _controller, |
38 | curve: Curves.fastOutSlowIn |
39 | ) |
40 | )..addStatusListener((status){ |
41 | if(status == AnimationStatus.completed){ |
42 | Navigator.pop(context); |
43 | } |
44 | }); |
45 | _controller.forward(); |
46 | } |
47 | } |
48 |
49 | //销毁动画 |
50 | @override |
51 | void dispose() { |
52 | super.dispose(); |
53 | _controller.dispose(); |
54 | } |
55 |
56 | @override |
57 | Widget build(BuildContext context) { |
58 | final double width = MediaQuery.of(context).size.width; |
59 | _controller.forward(); |
60 |
61 | return Scaffold( |
62 | appBar: AppBar( |
63 | title: Text('缓动动画'), |
64 | ), |
65 | body: AnimatedBuilder( |
66 | animation: _controller, |
67 | builder: (context,child){ |
68 | return Transform( |
69 | transform: Matrix4.translationValues( |
70 | _animation.value*width, |
71 | 0.0, |
72 | 0.0 |
73 | ), |
74 | child: Center( |
75 | child: Container( |
76 | width: 200.0, |
77 | height: 200.0, |
78 | color: Colors.red, |
79 | ), |
80 | ), |
81 | ); |
82 | }, |
83 | ), |
84 | ); |
85 | } |
86 | } |
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！
