Flutter文字渐变(二)--Text闪烁效果

效果图

screenshot01

代码Github地址

简介

  把上一篇教程Flutter文字渐变(一)--Text渐变的代码加个动画就可以做到shimmer闪烁效果.原理就是利用Gradientstops属性改变了渐变色的分割比例来做到的.

代码实现

实现

  • 首先把Gradientcolors改为三个颜色,中间的Colors.white就是闪烁的颜色,两边是文字原本的颜色,这些都可以自行选择合适的颜色
1
colors: [Colors.grey, Colors.white, Colors.grey],
  • 加上stops属性,stops的长度要和colors的长度一样.value是渐变位移的值,stop的值是从0.0~1.0,所以动画也设置0.0~1.0,中间0.4部分就是留给中间白色的区域
1
stops: [value-0.2,value,value+0.2],
  • 再接着创建动画控制器,动画播放时间设置的1000ms,注意需要给当前State混入SingleTickerProviderStateMixin,因为动画控制器的vsync参数需要一个TickerProvider类型的参数
1
_controller = AnimationController(duration: Duration(milliseconds: 1000), vsync: this);
  • 动画控制器创建好了之后就该创建真正的动画了,这里用的是Tween补间动画.因为这里效果比较简单,所以用不上曲线动画之类的.调用.animate就能获得一个动画对象了,同时也绑定好了动画控制器,可以直接用控制器来控制动画的播放停止操作了.
1
_animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
  • 使用动画控制器循环播放动画,只需要调用.repeat方法就行了.注意上面两条和这条代码是写在StateinitState方法里面,也可以根据需要写在其它比如点击事件里面.
1
_controller.repeat();
  • 把动画作用到widget上面可以用AnimatedBuilder,AnimatedBuilder有两个必填的参数animationbuilder.animation指的就是动画了,而builder就是当动画啊更新时会调用进行构建widget的.

  • 通常只需要在builder里面取得animationvalue,然后进行处理返回一个widget就行了

1
2
3
4
5
6
7
AnimatedBuilder(
animation: _animation,
builder: (context, child) {
double value = _animation.value;
...
},
),

完整代码

  • initState完整代码
1
2
3
_controller = AnimationController(duration: Duration(milliseconds: 1000), vsync: this);
_animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
_controller.repeat();
  • build完整代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Size size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: AnimatedBuilder(
animation: _animation,
builder: (context, child) {
double value = _animation.value;
Gradient gradient = LinearGradient(
colors: [Colors.grey, Colors.white, Colors.grey],
stops: [value - 0.2, value, value + 0.2],
);
Shader shader = gradient.createShader(Rect.fromLTWH(0, 0, size.width, size.height));
return Text(
'文字闪烁效果',
style: TextStyle(
fontSize: 28.0,
foreground: Paint()..shader = shader,
),
);
},
),
),
);