Flutter 数字增加动画
  n8qElEWxztXt 2023年11月02日 60 0


在移动应用开发中,流畅的动画不仅可以给人留下美好的印象,还可以提高用户体验。在Flutter开发中,官方提供了简洁且强大的动画API,比较核心的有AnimationController和Animation。

下面是使用AnimationController和Animation实现一个简单的数字增长动画,效果如下图所示。

Flutter 数字增加动画_构造函数


下面是源码:

import 'package:flutter/material.dart';
import 'package:gc_data_app/utils/utils.dart';

class AnimText extends StatefulWidget {

final int number;
final int duration;
final Color fontColor;
final double fontSize;

const AnimText({
Key key,
this.number,
this.duration,
this.fontColor,
this.fontSize,
}) : super(key: key);

@override
State<StatefulWidget> createState() {
return AnimState();
}
}

class AnimState extends State<AnimText> with SingleTickerProviderStateMixin {

AnimationController controller;
Animation animation;
var begin=0;

@override
void initState() {
super.initState();
controller = AnimationController(
vsync: this, duration: Duration(milliseconds: widget.duration));
final Animation curve=CurvedAnimation(parent: controller,curve: Curves.linear);
animation = IntTween(begin: begin, end: widget.number).animate(curve)..addStatusListener((status) {
if(status==AnimationStatus.completed){
// controller.reverse();
}
});
}

@override
Widget build(BuildContext context) {
controller.forward();
return AnimatedBuilder(
animation: controller,
builder: (context,child){
return Container(
child:Text(animation.value,
style: TextStyle(fontSize: widget.fontSize, color: widget.fontColor,fontWeight: FontWeight.bold)),
);
} ,
);
}

@override
void dispose() {
controller.dispose();
super.dispose();
}
}

使用时,只需要按照构造函数的要求传递对应的参数即可。


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  b1UHV4WKBb2S   2023年11月13日   36   0   0 ide抗锯齿
  b1UHV4WKBb2S   2023年11月13日   31   0   0 裁剪ideflutter
  b1UHV4WKBb2S   2023年11月13日   25   0   0 flutterDart
  zSWNgACtCQuP   2023年11月13日   28   0   0 ide
n8qElEWxztXt