[移动开发]Flutter绘制-11-旋转小人儿造成的视觉错效，面试真题解析

void initState() {
super.initState();
_controller = new AnimationController(
vsync: this, duration: const Duration(milliseconds: 1500));
_controller.repeat();
}

@override
Widget 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);

@override
void 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);
}

@override
bool 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是旋转半径）

再看下效果：

![v6.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ce2741de0eb440ab66cdeb43a8523f9~tplv-k3u1fbpfcp-watermark.image)

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

最后，代码如下：

import ‘dart:ui’;
import ‘dart:math’;

import ‘package:flutter/material.dart’;

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

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

@override
Widget 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);

@override
void 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);
}

@override
bool 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
…strokeWidth = 1
…isAntiAlias = true;
canvas.drawLine(Offset(-300,0), Offset(300,0), paint);

最后

**要想成为高级安卓工程师，必须掌握许多基础的知识。**在工作中，这些原理可以极大的帮助我们理解技术，在面试中，更是可以帮助我们应对大厂面试官的刁难。

CodeChina开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》

[外链图片转存中…(img-LAG8jnFx-1630575388501)]

CodeChina开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》