アニメーション付きの線

アプリにとってアニメーションはとても重要です。多くのアプリは、まさにアニメーションがあるからこそ、かっこよく感じるのです。今日から簡単なリンクアニメーションを実装してみましょう。

ブラシ 継承 CustomPainter

リストを通してデータを渡した後、ブラシの始点がその位置に置かれ、ブラシを使って他の位置と線を引きます。

class MyPaint extends CustomPainter {
List<Size> animationSize;
MyPaint(this.animationSize);
@override
void paint(Canvas canvas, Size size) {
// TODO: implement paint
Paint paint = Paint()
..style = PaintingStyle.stroke
..color = Colors.black
..strokeWidth = 1;
Path path = Path();
path.moveTo(0, 0);
animationSize.forEach((element) {
path.lineTo(element.width, element.height);
});
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}

アニメーションの実装

1、位置のストレージキューを初期化し、キャンバスのクリックイベントでキューにクリックした位置を追加します。 2、クリックイベントでアニメーションの作成を完了し、位置キューの長さが1より大きい場合は、アニメーション値の最後に追加されたキュー要素の終わりの位置は、開始値のアニメーションに追加された最後の要素をバー。 3.これは、ポジションキューの最後の位置を新しいアニメーションの値に置き換えて、終了点から新しい終了点までのアニメーション値を取得します。

class PaintBG extends StatefulWidget {
 @override
 _PaintBGState createState() => _PaintBGState();
}
class _PaintBGState extends State<PaintBG> with TickerProviderStateMixin {
 Animation<Size> _animation;
 AnimationController _animationController;
 List<Size> _pathSizeList;
 @override
 void initState() {
 // TODO: implement initState
 super.initState();
 _pathSizeList = [];
 }
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 body: GestureDetector(
 behavior: HitTestBehavior.opaque,
 onTapDown: (details) {
 setState(() {
 _pathSizeList.add(
 Size(details.globalPosition.dx, details.globalPosition.dy));
 });
 _animationController =
 AnimationController(vsync: this, duration: Duration(seconds: 1))
 ..addListener(() {
 setState(() {
 print(_animation.value);
 _pathSizeList.last = _animation.value;
 });
 });
 if (_pathSizeList.length == 1) {
 _animation = Tween<Size>(begin: Size(0, 0), end: _pathSizeList.last)
 .animate(_animationController);
 } else {
 _animation = Tween<Size>(
 begin: _pathSizeList[_pathSizeList.length - 2],
 end: _pathSizeList.last)
 .animate(_animationController);
 }
 _pathSizeList.last = _animation.value;
 _animationController.forward();
 },
 child: Container(
 width: double.infinity,
 height: double.infinity,
 child: CustomPaint(
 painter: MyPaint(_pathSizeList),
 ),
 ),
 ),
 );
 }
}

欠陥のある五芒星を描いてください。

考える

この効果は、すでに固定されたデータに対して新しいデータを手動で作成することを除けば、ダイナミック・データの折れ線グラフで使用することができます。