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: 圓弧起始點(diǎn)的角度，x軸正方向?yàn)?度，按順時(shí)針遞增，y軸負(fù)方向?yàn)?0度，以此類推

 /// sweepAngle: 圓弧掃過(guò)的角度，即圓弧終點(diǎn)所在的角度為startAngle + sweepAngle

 /// useCenter: 如果為true，圓弧兩端會(huì)與圓心相連，形成一個(gè)扇形，本篇中應(yīng)為false

 /// paint: 畫筆，下文中會(huì)進(jìn)行簡(jiǎn)單介紹

 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中的動(dòng)畫

想要讓圓弧動(dòng)起來(lái)，我們需要使用到Flutter的動(dòng)畫。下面先來(lái)介紹下Flutter中動(dòng)畫的實(shí)現(xiàn)。

Flutter中的動(dòng)畫相關(guān)的類主要有以下幾個(gè)：

 Animation：動(dòng)畫的核心類，是一個(gè)抽象類。用來(lái)生成動(dòng)畫執(zhí)行過(guò)程中的插值，輸出的結(jié)果可以是線性或曲線的，Animation對(duì)象與UI渲染沒(méi)有任何關(guān)系。

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

  /// 添加動(dòng)畫狀態(tài)的監(jiān)聽(tīng)

  void addStatusListener(AnimationStatusListener listener);


  /// 移除動(dòng)畫狀態(tài)的監(jiān)聽(tīng)

  void removeStatusListener(AnimationStatusListener listener);


  /// 獲取當(dāng)前動(dòng)畫的狀態(tài)

  AnimationStatus get status;


  /// 獲取當(dāng)前動(dòng)畫的插值，執(zhí)行動(dòng)畫時(shí)需要根據(jù)該值進(jìn)行UI繪制等

  T get value;

 }

 class AnimationController extends Animation<double>

  with AnimationEagerListenerMixin, AnimationLocalListenersMixin, AnimationLocalStatusListenersMixin {

  /// value：動(dòng)畫的初始值，默認(rèn)是lowerBound

  /// duration：動(dòng)畫執(zhí)行的時(shí)長(zhǎng)

  /// lowerBound：動(dòng)畫的最小值，默認(rèn)值為0.0

  /// upperBound：動(dòng)畫的最大值，默認(rèn)值為1.0

  /// vsync：可以通過(guò) `with SingleTickerProviderStateMixin` 傳入StatefulWidget對(duì)象

  AnimationController({

  double value,

  this.duration,

  this.lowerBound = 0.0,

  this.upperBound = 1.0,

  @required TickerProvider vsync,

  }) {

  _ticker = vsync.createTicker(_tick);

  }


  Ticker _ticker;


  /// Ticker的回調(diào)，每次屏幕刷新都會(huì)回調(diào)

  void _tick(Duration elapsed) {

  notifyListeners();

  }


  /// 開(kāi)始播放動(dòng)畫

  TickerFuture forward({ double from })


  /// 反向播放動(dòng)畫

  TickerFuture reverse({ double from })


  /// 設(shè)置動(dòng)畫重復(fù)執(zhí)行

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


  /// 釋放動(dòng)畫資源

  void dispose()

 }

 class CurvedAnimation extends Animation<double>

  with AnimationWithParentMixin<double> {

  /// parent：指定AnimationController對(duì)象

  /// curve：指定動(dòng)畫的曲線函數(shù)

  CurvedAnimation({

  @required this.parent,

  @required this.curve,

  })

 }


 abstract class Curve {

  /// 計(jì)算動(dòng)畫執(zhí)行中`t`點(diǎn)的插值，可以自定義曲線函數(shù)

  double transform(double t)

 }

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

  /// begin：動(dòng)畫的起始值

  /// end：動(dòng)畫的結(jié)束值

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


  /// 可以把double類型的動(dòng)畫插值轉(zhuǎn)換成任何類型的值

  T transform(double t)


  /// parent：傳入AnimationController對(duì)象

  /// 返回Animation對(duì)象，使用Animation.value獲取動(dòng)畫當(dāng)前的插值

  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是一個(gè)函數(shù)，返回Widget對(duì)象

  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對(duì)象

   // 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(); // 執(zhí)行動(dòng)畫

  _animationController.repeat(); // 設(shè)置動(dòng)畫循環(huán)執(zhí)行

  }


  @override

  void dispose() {

  // 調(diào)用dispose()方法釋放動(dòng)畫資源

  _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;

  // 動(dòng)畫的第一階段：圓弧起點(diǎn)為0度，終點(diǎn)的角度遞增

  if (value <= 1.0) {

   startAngle = 0;

   sweepAngle = value * pi;

  }

  // 動(dòng)畫的第二階段：圓弧掃過(guò)的弧度為π弧度（180度），起點(diǎn)、終點(diǎn)一起順時(shí)針旋轉(zhuǎn)，一共旋轉(zhuǎn)π弧度

  else if (value <= 2.0) {

   startAngle = (value - 1) * pi;

   sweepAngle = pi;

  }

  // 動(dòng)畫的第三階段：圓弧的終點(diǎn)不變，起點(diǎn)從x軸負(fù)方向開(kāi)始順時(shí)針旋轉(zhuǎn)，直到起點(diǎn)也到達(dá)x軸正方向

  else {

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

   sweepAngle = (3 - value) * pi;

  }

  // 繪制外圈的大圓弧

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

  // 繪制內(nèi)圈的小圓弧

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

  }


  @override

  bool shouldRepaint(CustomPainter oldDelegate) {

  return true;

  }

 }