Flutter 绘制 -11- 旋转小人儿造成的视觉错效

AnimationController _controller;@overridevoid initState() {super.initState();_controller = new AnimationController(vsync: thi

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

s, duration: const Duration(milliseconds: 1500));_controller.repeat();}

@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("旋转小人儿"),centerTitle: true,),body: CustomPaint(size: MediaQuery.of(context).size,painter: _MyPainter(_controller),),);}}

class _MyPainter extends CustomPainter {AnimationController _controller;

_MyPainter(this._controller) : super(repaint: _controller);

@overridevoid paint(Canvas canvas, Size size) {translateToCenter(canvas, size);double dy = 10 * sin(pi * 2 * _controller.value);Path path = new Path()..moveTo(30 * sin(pi * 2 * _controller.value), dy)..lineTo(100 * sin(pi * 2 * _controller.value), 220 + dy)..moveTo(0, dy)..lineTo(0, 200 + dy)..lineTo(300, 200 + dy)..lineTo(-300, 200 + dy);Paint paint = new Paint()..color = Colors.black..style = PaintingStyle.stroke..strokeWidth = 2..isAntiAlias = true;canvas.drawPath(path, paint);}

@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return true;}

void translateToCenter(Canvas canvas, Size size) {canvas.translate(size.width / 2, size.height / 2);}}

第二版效果

又仔细观察好像是斜对角的线，即

• 线的上端点，移动方向，左->右

• 线的下端点，移动方向，右->左

• 围绕着 y 轴旋转，y 的坐标上下有波动，x 的值通过 radius_sin(pi_2*_controller.value)获取。（_controller 是设定的一个动画，value 取值范围在 0-1，radius 是旋转半径）

再看下效果：

是不是有那个味儿了。。。

最后，代码如下：

import 'dart:ui';import 'dart:math';

import 'package:flutter/material.dart';

// 旋转小人儿 class RotateGirlMainPage extends StatefulWidget {@override_RotateGirlMainPageState createState() => _RotateGirlMainPageState();}

class _RotateGirlMainPageState extends State<RotateGirlMainPage>with SingleTickerProviderStateMixin {AnimationController _controller;@overridevoid initState() {super.initState();_controller = new AnimationController(vsync: this, duration: const Duration(milliseconds: 1500));_controller.repeat();}

@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("旋转小人儿"),centerTitle: true,),body: CustomPaint(size: MediaQuery.of(context).size,painter: _MyPainter(_controller),),);}}

class _MyPainter extends CustomPainter {AnimationController _controller;

_MyPainter(this._controller) : super(repaint: _controller);

@overridevoid paint(Canvas canvas, Size size) {translateToCenter(canvas, size);double dy = 10 * sin(pi * 2 * _controller.value);Path path = new Path()..moveTo(30 * -sin(pi * 2 * _controller.value), -100+dy)..lineTo(100 * sin(pi * 2 * _controller.value), 220 + dy);Paint paint = new Paint()..color = Colors.black..style = PaintingStyle.stroke..strokeWidth = 2..isAntiAlias = true;canvas.drawPath(path, paint);}

@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return true;}void translateToCenter(Canvas canvas, Size size) {canvas.translate(size.width / 2, size.height / 2);Paint paint = new Paint()..color = Colors.black12..style = PaintingStyle.stroke