如何使用Flutter实现58同城中的加载动画详解

 abstract class CustomPainter extends Listenable {

 void paint(Canvas canvas, Size size);

 }

 class CustomPaint extends SingleChildRenderObjectWidget {

 const CustomPaint({

 Key key,

 this.painter,

 });

 final CustomPainter painter;

 }

 /// rect: 圆弧四周范围所形成的矩形，在本篇中圆弧为圆形，可以使用Rect.fromCircle()确定圆弧的范围

 /// startAngle: 圆弧起始点的角度，x轴正方向为0度，按顺时针递增，y轴负方向为90度，以此类推

 /// sweepAngle: 圆弧扫过的角度，即圆弧终点所在的角度为startAngle + sweepAngle

 /// useCenter: 如果为true，圆弧两端会与圆心相连，形成一个扇形，本篇中应为false

 /// paint: 画笔，下文中会进行简单介绍

 void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)

 Paint paint = Paint()

 ..color = Color(0xFFFF552E)

 ..strokeWidth = 2.0

 ..style = PaintingStyle.stroke

 ..isAntiAlias = true

 ..shader = LinearGradient(colors: []).createShader(rect)

 ..strokeCap = StrokeCap.round

 ..strokeJoin = StrokeJoin.bevel;

Flutter中的动画

想要让圆弧动起来，我们需要使用到Flutter的动画。下面先来介绍下Flutter中动画的实现。

Flutter中的动画相关的类主要有以下几个：

 Animation：动画的核心类，是一个抽象类。用来生成动画执行过程中的插值，输出的结果可以是线性或曲线的，Animation对象与UI渲染没有任何关系。

 abstract class Animation<T> extends Listenable implements ValueListenable<T> {

  /// 添加动画状态的监听

  void addStatusListener(AnimationStatusListener listener);


  /// 移除动画状态的监听

  void removeStatusListener(AnimationStatusListener listener);


  /// 获取当前动画的状态

  AnimationStatus get status;


  /// 获取当前动画的插值，执行动画时需要根据该值进行UI绘制等

  T get value;

 }

 class AnimationController extends Animation<double>

  with AnimationEagerListenerMixin, AnimationLocalListenersMixin, AnimationLocalStatusListenersMixin {

  /// value：动画的初始值，默认是lowerBound

  /// duration：动画执行的时长

  /// lowerBound：动画的最小值，默认值为0.0

  /// upperBound：动画的最大值，默认值为1.0

  /// vsync：可以通过 `with SingleTickerProviderStateMixin` 传入StatefulWidget对象

  AnimationController({

  double value,

  this.duration,

  this.lowerBound = 0.0,

  this.upperBound = 1.0,

  @required TickerProvider vsync,

  }) {

  _ticker = vsync.createTicker(_tick);

  }


  Ticker _ticker;


  /// Ticker的回调，每次屏幕刷新都会回调

  void _tick(Duration elapsed) {

  notifyListeners();

  }


  /// 开始      动画

  TickerFuture forward({ double from })


  /// 反向      动画

  TickerFuture reverse({ double from })


  /// 设置动画重复执行

  TickerFuture repeat({ double min, double max, bool reverse = false, Duration period })


  /// 释放动画资源

  void dispose()

 }

 class CurvedAnimation extends Animation<double>

  with AnimationWithParentMixin<double> {

  /// parent：指定AnimationController对象

  /// curve：指定动画的曲线函数

  CurvedAnimation({

  @required this.parent,

  @required this.curve,

  })

 }


 abstract class Curve {

  /// 计算动画执行中`t`点的插值，可以自定义曲线函数

  double transform(double t)

 }

 class Tween<T extends dynamic> extends Animatable<T> {

  /// begin：动画的起始值

  /// end：动画的结束值

  Tween({ this.begin, this.end });


  /// 可以把double类型的动画插值转换成任何类型的值

  T transform(double t)


  /// parent：传入AnimationController对象

  /// 返回Animation对象，使用Animation.value获取动画当前的插值

  Animation<T> animate(Animation<double> parent)

 }

 class AnimatedBuilder extends AnimatedWidget {

  const AnimatedBuilder({

  @required Listenable animation,

  @required this.builder,

  });


  /// typedef TransitionBuilder = Widget Function(BuildContext context, Widget child);

  /// builder是一个函数，返回Widget对象

  final TransitionBuilder builder;


  @override

  Widget build(BuildContext context) {

  return builder(context, child);

  }

 }


 abstract class AnimatedWidget extends StatefulWidget {

  const AnimatedWidget({

  @required this.listenable,

  });


  @protected

  Widget build(BuildContext context);


  @override

  _AnimatedState createState() => _AnimatedState();

 }


 class _AnimatedState extends State<AnimatedWidget> {

  @override

  void initState() {

  super.initState();

  widget.listenable.addListener(_handleChange);

  }


  @override

  void dispose() {

  widget.listenable.removeListener(_handleChange);

  super.dispose();

  }


  void _handleChange() {

  setState(() { });

  }


  @override

  Widget build(BuildContext context) => widget.build(context);

 }

 import 'dart:math';

 import 'package:flutter/material.dart';


 class WubaLoadingWidget extends StatefulWidget {

  @override

  _WubaLoadingWidgetState createState() => _WubaLoadingWidgetState();

 }


 class _WubaLoadingWidgetState extends State<WubaLoadingWidget>

  with SingleTickerProviderStateMixin {

  AnimationController _animationController;

  Animation<double> _animation;


  @override

  void initState() {

  super.initState();

  _animationController = new AnimationController(

   // 可以指定lowerBound、upperBound，使用AnimationController对象

   // lowerBound: 0.0,

   // upperBound: 3.0,

   vsync: this,

   duration: const Duration(milliseconds: 1500),

  );

  _animation = Tween(begin: 0.0, end: 3.0)

   .animate(_animationController);

  _animationController.forward(); // 执行动画

  _animationController.repeat(); // 设置动画循环执行

  }


  @override

  void dispose() {

  // 调用dispose()方法释放动画资源

  _animationController.dispose();

  super.dispose();

  }


  @override

  Widget build(BuildContext context) {

  return AnimatedBuilder(

   animation: _animationController,

   builder: (BuildContext context, Widget child) {

   return Container(

    child: CustomPaint(

    painter: _LoadingPaint(

     value: _animation.value,

    ),

    ),

   );

   },

  );

  }

 }


 class _LoadingPaint extends CustomPainter {

  final double value;

  final Paint _outerPaint; // 大圆弧的Paint

  final Paint _innerPaint; // 小圆弧的Paint


  _LoadingPaint({

  this.value,

  });


  @override

  void paint(Canvas canvas, Size size) {

  double startAngle = 0;

  double sweepAngle = 0;

  // 动画的第一阶段：圆弧起点为0度，终点的角度递增

  if (value <= 1.0) {

   startAngle = 0;

   sweepAngle = value * pi;

  }

  // 动画的第二阶段：圆弧扫过的弧度为π弧度（180度），起点、终点一起顺时针旋转，一共旋转π弧度

  else if (value <= 2.0) {

   startAngle = (value - 1) * pi;

   sweepAngle = pi;

  }

  // 动画的第三阶段：圆弧的终点不变，起点从x轴负方向开始顺时针旋转，直到起点也到达x轴正方向

  else {

   startAngle = pi + (value - 2) * pi;

   sweepAngle = (3 - value) * pi;

  }

  // 绘制外圈的大圆弧

  canvas.drawArc(outerRect, startAngle, sweepAngle, false, _outerPaint);

  // 绘制内圈的小圆弧

  canvas.drawArc(innerRect, startAngle + pi, sweepAngle, false, _innerPaint);

  }


  @override

  bool shouldRepaint(CustomPainter oldDelegate) {

  return true;

  }

 }