Flutter数字变化的补间动画IntTween,可以给数字变化加上补间动画,Flutter其实提供了一种数字文字变化的动画组件:
AnimatedSwitcher切换时的动画组件,动画效果很不错。
number.dart:
01 | import 'package:flutter/material.dart' ; |
03 | class NumberAnimation extends StatefulWidget{ |
04 | NumberAnimation({Key key}) : super (key:key); |
06 | _NumberAnimationState createState() => _NumberAnimationState(); |
10 | class _NumberAnimationState extends State<NumberAnimation> with SingleTickerProviderStateMixin{ |
11 | AnimationController _controller; |
18 | _controller = AnimationController(duration:Duration(seconds: 1), vsync: this ); |
21 | final Animation curve = CurvedAnimation(parent: _controller, curve: Curves.easeOut); |
23 | animation = IntTween(begin: 0,end: 10).animate(curve)..addStatusListener((status) { |
25 | if (status == AnimationStatus.completed){ |
27 | _controller.reverse(); |
30 | if (status == AnimationStatus.dismissed){ |
31 | Navigator.pop(context); |
40 | _controller.dispose(); |
44 | Widget build(BuildContext context) { |
46 | _controller.forward(); |
48 | return AnimatedBuilder( |
49 | animation: _controller, |
50 | builder: (context,child){ |
57 | animation.value.toString(), |
58 | style: TextStyle(fontSize: 48.0), |
main.dart:
01 | import 'package:flutter/material.dart' ; |
08 | class MyApp extends StatelessWidget { |
09 | const MyApp({Key key}) : super (key: key); |
12 | Widget build(BuildContext context) { |
15 | title: 'Flutter边框补间动画BorderRadiusTween实现遮罩动画' , |
17 | primarySwatch: Colors.blue |
19 | debugShowCheckedModeBanner: false , |
26 | class AnimateDemo extends StatelessWidget{ |
28 | Widget build(BuildContext context) { |
39 | children: list.map((widget){ |
41 | title: Text(widget.toString()), |
43 | Navigator.of(context).push(MaterialPageRoute(builder: (context)=>widget)); |
部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!