我爱模板网 > 建站教程 > APP开发,混合APP >  Flutter笔记71:数字变化的补间动画IntTween简单案例正文

Flutter笔记71:数字变化的补间动画IntTween简单案例

Flutter数字变化的补间动画IntTween,可以给数字变化加上补间动画,Flutter其实提供了一种数字文字变化的动画组件:AnimatedSwitcher切换时的动画组件,动画效果很不错。

number.dart:
01import 'package:flutter/material.dart';
02 
03class NumberAnimation extends StatefulWidget{
04  NumberAnimation({Key key}) : super(key:key);
05 
06  _NumberAnimationState createState() => _NumberAnimationState();
07}
08 
09//混入 SingleTickerProviderStateMixin 是为了在不显示当前页面时,动画停止,节约资源
10class _NumberAnimationState extends State<NumberAnimation> with SingleTickerProviderStateMixin{
11  AnimationController _controller;
12  Animation animation;
13 
14  @override
15  void initState() {
16    super.initState();
17 
18    _controller = AnimationController(duration:Duration(seconds: 1), vsync: this);
19 
20    //自定义非线性动画
21    final Animation curve = CurvedAnimation(parent: _controller, curve: Curves.easeOut);
22 
23    animation = IntTween(begin: 0,end: 10).animate(curve)..addStatusListener((status) {
24      //判断动画完成
25      if(status == AnimationStatus.completed){
26        //反转动画
27        _controller.reverse();
28      }
29      //判断动画执行到开始的地方
30      if(status == AnimationStatus.dismissed){
31        Navigator.pop(context);
32      }
33    });
34  }
35 
36  //销毁动画
37  @override
38  void dispose() {
39    super.dispose();
40    _controller.dispose();
41  }
42 
43  @override
44  Widget build(BuildContext context) {
45    //执行动画
46    _controller.forward();
47 
48    return AnimatedBuilder(
49      animation: _controller,
50      builder: (context,child){
51        return Scaffold(
52          appBar: AppBar(
53            title: Text('数字动画'),
54          ),
55          body: Center(
56            child: Text(
57              animation.value.toString(),
58              style: TextStyle(fontSize: 48.0),
59            ),
60          ),
61        );
62      }
63    );
64  }
65}
main.dart:
01import 'package:flutter/material.dart';
02import 'number.dart';
03 
04void main(){
05  runApp(MyApp());
06}
07 
08class 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边框补间动画BorderRadiusTween实现遮罩动画',
16        theme: ThemeData(
17          primarySwatch: Colors.blue
18        ),
19        debugShowCheckedModeBanner: false,
20        home: AnimateDemo(),
21      ),
22    );
23  }
24}
25 
26class AnimateDemo extends StatelessWidget{
27  @override
28  Widget build(BuildContext context) {
29 
30    List<Widget> list = [
31      NumberAnimation()
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}




部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:Flutter笔记70:BorderRadiusTween边框圆角补间动画 下一篇:Flutter笔记72:AnimatedContainer制作图表动画效果
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢