前言
本文分享下自定义完成动画的实现方法，最终的效果图如下
源码地址
首先是绘图
在Flutter中绘图非常简单。关键词CustomPainter, CustomPaint, Canvas。
在iOS/Android中我们继承UIView/View重写draw/onDraw方法在里面执行画图操作。 在Flutter中稍微有点不一样，我们使用CustomPaint(这是一个widget)，它需要一个参数painter，这个参数的类型是一个抽象类CustomPainter。 我们需要实现这个类的两个关键方法: paint,shouldRepaint。画什么就由paint决定，而只有shouldRepaint返回true的时候才会重绘。
实现void paint(Canvas canvas, Size size)这个方法，在iOS中我们使用UIBezierPath和Core Graphics绘图，在Flutter具体的绘制方法用这个canvas, 具体的API可以查看官方文档
下面这个例子就是画一段圆弧
class DemoPainter extends CustomPainter {
final double _arcStart;
final double _arcSweep;
DemoPainter(this._arcStart, this._arcSweep);
@override
void paint(Canvas canvas, Size size) {
double side = math.min(size.width, size.height);
Paint paint = Paint()
..color = Colors.blue
..strokeCap = StrokeCap.round
..strokeWidth = 4.0
..style = PaintingStyle.stroke;
canvas.drawArc(
Offset.zero & Size(side, side), _arcStart, _arcSweep, false, paint);
}
@override
bool shouldRepaint(DemoPainter other) {
return _arcStart != other._arcStart || _arcSweep != other._arcSweep;
}
}
复制代码使用的时候把DemoPainter的实例当做参数传给CustomPaint就可以使用了，比如
Container(
child: CustomPaint(painter: DemoPainter(0.0, math.pi)),
height: 200.0,
width: 200.0,
color: Colors.deepOrange,
padding: EdgeInsets.all(30.0),
)
复制代码显示效果
然后加动画
Flutter的动画也不复杂，关键词AnimationController。
Flutter中的动画是基于Animation，这个对象本身是一个抽象类，在一段时间内依次产生一些值。我们使用封装好的AnimationController来做动画，它在屏幕刷新的每一帧，产生一个新的值，默认情况是在给定的时间段内线性的生成0.0到1.0的数字。
AnimationController有个参数vsync 可以绑定到一个widget(需要widget扩展SingleTickerProviderStateMixin)，当widget不显示时，动画定时器将会暂停，当widget再次显示时，动画定时器重新恢复执行。duration属性可以设置持续时间。还有一些方法可以控制动画forward启动,reverse反转,repeat重复。
AnimationController有addListener和addStatusListener方法可以添加监听，一个是值监听一个是状态监听。值监听常用在调用setState来触发UI重建来实现动画，状态监听用在动画状态变化的时候执行一些方法，比如在动画结束时反转动画。
至此我们已经可以绘制动画了，代码如下
class DemoWidget extends StatefulWidget {
@override
_DemoWidgetState createState() => _DemoWidgetState();
}
class _DemoWidgetState extends State<DemoWidget>
with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
_controller =
AnimationController(vsync: this, duration: Duration(milliseconds: 1500))
..repeat()
..addListener(() {
setState(() {});
});
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return CustomPaint(
painter: DemoPainter(0.0, _controller.value * math.pi * 2),
);
}
}
复制代码可以借助AnimatedBuilder改写上文的initState和build方法，使视图层级更加清楚，有助于封装
@override
void initState() {
_controller =
AnimationController(vsync: this, duration: Duration(milliseconds: 1500))
..repeat();
super.initState();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(animation: _controller, builder: (context, child) {
return CustomPaint(
painter: DemoPainter(0.0, _controller.value * math.pi * 2),
);
});
}
复制代码Tween与Curve
Tween和Curve可以帮我们更好地控制Animation的值 一般的Animation会在给定的时间内线性的产生0.0到1.0的值
Tween可以把这些转变成我们想要的类型或者是范围 比如Tween(begin: math.pi * 1.5, end: math.pi * 1.5 + math.pi * 2).evaluate(_controller),就可以把值的范围转成1.5pi到3.5pi。
Curve是一个抽象类表示生成值的曲线, Curves已经定义了许多常用的曲线。
这里Tween,Curve可以使用chain,evaluate,transform和Animation串起来使用
我们可以使用这些更改我们上文的例子，代码如下
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return CustomPaint(
painter: DemoPainter(
Tween(begin: math.pi * 1.5, end: math.pi * 3.5)
.chain(CurveTween(curve: Interval(0.5, 1.0)))
.evaluate(_controller),
math.sin(Tween(begin: 0.0, end: math.pi).evaluate(_controller)) *
math.pi,
),
);
});
}
复制代码当然这里第二个参数有更简洁的写法
math.sin(_controller.value*math.pi) *math.pi
复制代码显示效果
本文版权属于再惠研发团队，欢迎转载，转载请保留出处。@白尔摩斯