前言

最近华为手表的太空人表盘突然间火了，表盘上那个旋转的太空人呆萌心爱。怎么办没有一款华为手表，作为一名合格的程序猿，当然要撸起袖子自己来画一个啦~

鉴于最近Flutter推出了2.0稳ios下载定版别，除了对移动端Android、iOgithub永久回家地址S的支撑外，Web端和桌面端的支撑也整合到了Flutter2.0版giti轮胎是什么品牌别中，新特性支撑空指针安全。本次经过Flutter2.flutter值得学吗0来编写封面图展示的作用。

编写思路

1、旋转太空人

在构思太空人怎么制作时，此文Flutteflutter是什么意思r制作-09-华为太空人-残次版给我android/yunos供给了制作的思路，感谢作者的同享，站在巨人的肩膀上，才干走的更高更远。

在调github永久回家地址研之后，发现直接用代码动态生成的办法，或许不大适合，懒洋君绘画水平也不高，画出来必定也是不好看。所以转换了个思维，直接用视频播映器来播android体系放（这步偷了个懒，有更好结束办法的朋友，可以供给下新思路）。

2、动态蛛网

动态蛛网android是什么手机牌子之前用Anflutter是什么意思droid结束了一版《Androidios卖肉直播不收费下载结束蛛网背景作用》，是参考canvas-nest.js来写的(网页效android的drawable类果)。Adroid版别的结束没有写的很详细，感谢《五颜六色蛛网》的作者，将动态蛛网的制作进程进行了分解，解说的很详细。这次测验android下载用Flutter来结束。

详细结束

旋转太空人

1、视频控件

抉择运用视频来播映太空人，那么就用普及率最高的video_player来编写。

视频控件的代码：
这部分代码和vidios8备忘录eandroid是什么手机牌子o_player供给的example相同，只修改了VideoPlayerController的创建。经过assets资源来播映视频：VideoPlagithub敞开私库yerController.asset(tgithub打不开his.videoAgithub中文官网网页ssetsUrlgithub中文社区)

import 'package:flutter/material.dart';
iios8备忘录mport 'package:video_player/video_player.dart';
class Vidgiti轮胎是什么品牌eoView extends StatefulWidget {
finalios14.4.1更新了什么 String videoAios14ssetsUrl;
@override
_VideoViewState createState() => _VideoViewState(videoAssetsUrl);
VideoView(this.videoAssetsUrl);
}
class _Vidios是什么意思eoViewState extends State<VideoView> {
String videoAssetsUrl;
late VideoPlayerController _controller;
_VideoViewState(thflutter是什么意思is.videoAssetsUrl);
@override
void iflutter结构优缺点nitSflutter是什么意思tate() {
suGitHubper.initState();
// 经过assetsandroid是什么手机牌子资源来播映github永久回家地址视频
_controller = VideoPlayerController.assgithub敞开私库et(this.videoAssetsUrl)
..initialize().then((_) {
// Ensure the firsgithub永久回家地址t frame is shown after the video is initialized, even before the play button has been pressed.
setState(() {
_Androidcontroller.setLooping(true);
_controller.play();
});
});
}
@override
Widget build(BuildContext context) {
return Container(
width: 100,
heigit指令ght: 100,
child: _controller.value.isInitialized
? AspectRatio(
asios退款pectRatio: _controller.valgiteeue.aspectRatiogit指令,
chigitild: VideoPlayer(_controios8备忘录ller),
)
: Container(),
);
}
@override
void dispose() {
super.dgitlabisposflutteringe();
_controller.dispflutter面试题ose();
}
}

2、在pubspec.yaml中界说视频资源方位

assets:
- assets/video/

视频作用预览：

动态蛛网

1、配备参数

  // 小球可取的颜色值
final List<Color>? ballColors;
/// 小球总数
final int totalCount;
/// 小球连线最大的间隔
final double maxDistance;
/// X轴加速度规划，规划越大，github小球速度相差就越大
final int velocityXRange;
/// Y轴加速度规划，规github划越大，小球速度相差就越大
final int velocityYRange;
// 每次改写,单位位移的像素，大于0就行，越小，小球运动的越慢
final double eachMovePixel;
/// 小球连线的宽度
final double lineWidth;
/// 连线最大的透明度0~1
final double maxAlpha;
/// 小球半径
final double radius;
/// 接触影响半径
final double touchRadiflutter值得学吗us;
/// 接触影响半径
final Color? touchColor;

2、小球方针信息

import 'package:flutter/material.dart';
/// 小球
class Point {
/// X轴加速度
int veloflutter是什么意思cityX;
/// Y轴加速度
int velocityY;
/// X轴当时方位
double x;
/// Y当时方github直播渠道永久回家位
double y;
/// 小球颜色
Color color;
Point(this.x, this.y,
{this.velocitandroid/yunosyX = 0, this.velocityY = 0, this.color = Colors.green});
}

3、根据配备，在initState()中构建运动小球列表

  // 初始化小球列表
for (int i = 0; i < settings!.totalCount; i++) {
// 在控件大小规划内，随机添加小球
double x = Random().nextInt(width.toInt()).toDouble();
double y = Random().nextInt(height.toInt()).toDouble();
// 下面是设置初始加速度
//flutter面试题 经过下面的公式，避免出现加速度为0，且加速度可为正负velocitygithub敞开私库XRange
int velocityX = (Randios8备忘录om().nextInt(setGitHubtings!.velocityXRange) + 1) *
(1 - 2 * Random().nextInt(2));
int velocityY = (Random().nextInt(settings!.velocityYRange) + 1) *
(1 - 2 * Random().nextInt(2));
Color color;
if (settings!.ballColors !=ios下载 nuandroid什么意思ll && settings!.ballColors!.length > 0) {
color = settings!
.ballCandroidstudio装置教程olors![Random().nextInt(settings!.baflutteringllColors!.length)];
} else {
color = Colors.green;
}
ballList.agitidd(Point(x, y,
velocityX: velocityX, velociandroid/yunostyY: velocityYios卖肉直播不收费下载, color: color));ios是什么意思
}

4、运用FlutterCustomPainter来制作动画，需求重写void paint(Canvas canvas, Size sflutteredizgithub打不开e)和bool shouldRepaint(CustomPainter oios14桌面布局图片ldDelegate)两个办法。

/// 自界说PointPainter
class PointPainter extends CustomPainter {
math.Point? toiOSuchPandroidstudio装置教程oint;
Paint ballPaint;
Paint tgithub打不开ouchPaint = Paint()android手机;
List<Point> ballList;
Settings settings;
PointPainter(this.settingsios14桌面布局图片, this.touchPoint, this.ballPaint, this.ballList) {
if (settings.touchColor == null) {
touchPaint.cologithub永久回家地址r = Color.fromARGB(81, 176, 176, 176);
} else {
touchPaint.color = settings.touchColor!;
}
}
@oflutter是什么意思verride
voidandroid/yunos paint(Canvas canvas, Size size) {
// 在这里进行真实的制作
}
@override
bool shouldRepaint(CustomPainter oldflutter结构Delegaandroid是什么手机牌子te) {
// 在实android/yunos践场景中正确使用此回调可以避免重绘开支，现在简略回来true
// 当条件变化时是否需求重画
return true;
}
}

5、获取接触点，运github下载用GestureDetector来获取接触作业，并记载点击方位tios是什么意思ouchPoint。

  GestureDetector(
child: CustomPaingithubt(
paintgithub永久回家地址er:github
new PointPaingithub永久回家地址ter(settings!, touchPoint, ballPaint, ballList),
),
onPanStart: (DragStartDetails details) {
setState(() {
touchPoint = math.Point(
details.localPositiongithub永久回家地址.dx, details.localPosition.dy);
});
},
onPanUpdate: (DragUpdateDetails details) {
setState(() {
touchPoingit教程t = math.Point(
details.localPositioios8备忘录n.dx, details.landroid手机ocalPosition.dy);
});
},
onPanEnd: (DragEndDetails details) {
setState(() {
touchPoint = null;
});
},
),

6、在void paint(Canvas canvasios14.4.1更新了什么, Size size)中制作动画

  @override
void paint(Canvas canvas, Size size) {
// 制作小git指令球github敞开私库列表
drawBallList(canvas);
// 制作点击github直播渠道永久回家区域
drawTouchCircle(canandroid平板电脑价格vas);
}

7、制作运动小球及接触点，还有连flutter值得学吗线

  /// 制gitlab造小球列表
void drawBallList(Canvas canvas) {
Paint linePaint = Paint();
// 制作小球列表
ballList.forEach((ball1) {
linePaiios8备忘录nt.strokeWidth = settings.lineWidth;
ballPaint.color = ball1.color;
// 制作小球
canvas.drawCircle(Offset(github敞开私库ball1.x, ball1.y), settings.radius, ballPaint);
// 制作小球与接触点之间的连线
drgitiawTouchLine(ball1, linePaint, canvas);
ballList.forEach((ball2) {
// 制作小球之间的连线
if (ball1 != ball2) {
int distance = point2Distance(ball1, ball2);
if (distance <= settings.maxDistance) {
// 小于最大连接间隔，才进行连github中文官网网页线
// 线条透明度，ios14.4.1更新了什么间隔越远越透明
double alpha =
(1.0 - distance / settings.maxDistance) * settingsgithub下载.maxAlpha;
Colfluttershyor color = ball1.color;
linePaint.colorgithub下载 = Color.fromARGB(
(alpha * 255)android下载.toInt(), color.red, color.green, color.blue);
// 制作两个小球之间的连线
canvas.drawLine(
Offset(ball1.x, ball1.y), Offset(ball2.x, ball2.y), linePaint);
}
}
});
});
}
/// 制作点击区域
void drawTouchCircle(Canvas canvas) {
if (touchPoint != null) {
canvas.drawCircle(
Oandroidstudio装置教程ffset(touchPoint!.x.toDouble(), togit指令uchPgithub中文社区oint!.y.toDouble()),
settings.touchRadius,
touchPaint);
}
}
/// 制作小球与接触点之间的连线
void drawTouchLine(Point ball1, Paintgithub中文官网网页 linePaint, Canvas cafluttershynvas) {
if (touchPoigithub永久回家地址nt != null) {
int distance = pointNum2Distance(
ball1.x, touchPoint!.x.toDouble(), ball1.y, touchPoint!.y.toDouble());
igithub打不开f (distance <= settings.touchRadius) {
// 线条透明度，间隔越近越透明
double alpha = distance / settings.touchRadius * settings.maxAlpha;
Color color = balflutter是什么意思l1.color;
linePaint.color = Color.fromARGB(
(alpha * 255).toInt(), color.red, color.green, cflutter结构olor.githubblue);
// 制作两个小球之间的连线
canvas.drawLingithub中文官网网页e(
Offset(githubball1.github永久回家地址x, ball1.y),
Offset(touchPoint!.x.toDogithub是干什么的uble(), touchPoint!.y.toDouble()),
linePaint);
}
}
}
/// 核算两点之间的间隔
int point2Distance(Point p1, Point p2) {
regithub官网tuandroid/yunosrn sqrt(pow(p1.x - p2.x, 2) + pow(p1.y - p2.y, 2)).toInt();
}
/// 核算两点之间的间隔
int pointNum2Disflutteringtance(double x1, doubgithub是干什么的le x2, double y1, doubios体系le y2) {
return sqrt(pow(x1 - x2, 2) + powgiti轮胎是什么品牌(y1 - y2, 2)).toInt();
}

让动画动起来

1、经过addPersistentFrameCallback回调，在回调中核算每一帧作用的数值，不断改写帧，每一帧组合起来就结束动画作用了。

    WidgetsBinding? widgetsBinding =android下载装置 WidgetsBigithub永久回家地址nding.instance;
widgetsBinding?.addPostFrameCallback((callback) {
// 页面烘托flutter结构优缺点榜首帧的回调
widgetsBinding.addPersistentFrgithubameCallback((callback) {
// 耐久帧的回调，每一帧改写都回触发
if (mounted) {
setState(() {
// 在这边进行数值的核算赋值
});
widgetsBinding.schedfluttereduleFrame();
}
});
});

2、setState((){});中详细的核算进程：

  setState(() {
catchBallCount =flutter面试题 0;
ballLios体系ist.forEach((ball) {
// 核算点击时flutter是什么意思，小球的偏移量，营建挨近作用
calculgithub敞开私库ateTouchOffset(ball);
// 当遇到距fluttered离时，需求改动x加速度方向
if (ball.x >=
width - settings!.radius / 2 - settings!.liandroidstudio装置教程neWidth / 2) {
if (ball.velocityX > 0) {
ball.velocgit指令ityX = -ball.velocityX;
}
} else if (ball.x <=
0 + settings!.radius / 2 + settings!.lineWidthios体系 / 2) {
if (ball.flutteredvelogithubcios退款ityX < 0) {
ball.velocityX = -ball.velocityX;
}
}
// 根据加速度，核算出小球当时的x值
ball.x = ball.x + ball.velocityX * settings!.eachMovePixel;
// 和核算x值相同的原理, 核算出y的值
// 当遇到间隔时，需求改动y加速度方向
if (ball.y >=
height - settings!.radigithub官网us / 2 - settings!.lineWidth / 2) {
if (ball.velocityY > 0) {
ball.velocityY = -ball.velocityYGitHub;
}
} else if (ball.y <=
0 + setgithubtings!.radius / 2 + settings!.lflutter值得学吗ineWidth / 2) {flutter值得学吗
if (ball.velocityY < 0) {
ball.velocityY = -ball.velocityY;
}
}
// 根据加速度，核算出小球当时的y值
ball.y = ball.y + ball.velocityY * settings!.eachMovePixel;
});
});

帧率github永久回家地址信息

制作动画的时分，为了了解Flflutter结构优缺点utter的android下载装置制作功率，新增了帧率想关的信息展示。

帧率信息控件：

import 'dart:async';
import 'pacgithubkage:flutter/material.dart';
///androidstudio装置教程 帧率信息控件
class FrameRateView extends StatefulWidget {
@override
_FrameRateViewState createState() =flutter是什么意思> _FrameRateViewState();
}
class _FrameRateViewState extends State<Framegithub中文官网网页RateView>gitee {
int count = 0;
int offsetTime = 0;
int lastTime = DiOSateTime.now().millisecondsSinceEpoch;
int frameRate = 0;
@override
void initState() {
super.initState();
WidgetsBinding? widgetsBinding = WidgetsBinding.instance;
/flutter结构优缺点/ 榜首帧的回调
widgetsBinding?.addPostFrameCallback((cflutter中文官网allback) {
Timer.periodgitiic(Duration(seconds: 1), (timer) {
// 1秒核算一次帧率
if (mounted) {
seios模拟器tState(() {
frameRate = count;
cios14.4.1更新了什么ount = 0;
});
}
});
// 耐久帧的回调
widgetsBinding.addPersistentFrameCallback((callback) {
if (ios14.4.1更新了什么mounted) {
int nowTime = DateTime.now().millflutter结构优缺点isecondsSinceEpoch;
setState((github下载) {
count += 1;
offsetTime = nowTime - lastTime;
lastTime = nowflutteredTime;
});
widgetsBinding.scheduleFrame();
}
});
});
}
@override
Widget build(BuildContext context) {
return Text(
"改写次数:$countn每秒帧数:$frameRaten每帧耗时:$offsetTime",
style: TextStyle(cfluttershyolor: Colors.white),
);
}
}

毕竟作用

黑客帝国作用：

五颜六色蛛网作用：

感触

以下是个人对Flutter2.0运用中的一些个人领会：

空指针特性ios是什么意思：和Kotlin差不多，也是用感叹号!和问号?进行空指针的处理判别。
代码嵌套：嵌套这一点，真实上手Flutter的开发者，应该疑虑会比较少。由于代码中编写的嵌套，仅仅是界面组件的声明，真实制作的时分，是不存在嵌套问题的。Flutter卡顿的原因，底子不是由于代码嵌套，更多是不能合理正确的对StatelessWidget和android平板电脑价格StatefulWiflutter值得学吗dget进行运用。
跨途径：之前熟悉的fluttered是Android原生开发，关于iOS、Web、桌面端的了解，更多的是从原生途径的代码结构去学习。平常作业内容更多的在数据处理展示上，比较少涉及到原生途径特有的Api。在上手Flutter后，一ios14.4.1更新了什么套代码可以在多端上作业，的确大大拓宽了技能适用的广度。现在来说，android是什么手机牌子Android和iOS途径android平板电脑价格底子满足了事务要求，Web和桌面端现在功用和稳定性还没抵达github中文官网网页期望值，还处在张望期，希望后androidstudio装置教程续官方能补齐短板。

库房地址

库房地址：githubandroid是什么手机牌子.com/SheepYang19…

感谢咱们的阅读，喜爱的话点个赞~

欢迎重视我的技能大众号“懒洋君作业室”，不定期同享有趣、优质的技能文章~

Flutter2.0 绘制旋转太空人+蛛网效果

前言

编写思路

详细结束

旋转太空人

动态蛛网

让动画动起来

帧率github永久回家地址信息

毕竟作用

感触

库房地址

作者信息

Flutter2.0 绘制旋转太空人+蛛网效果

前言

编写思路

详细结束

旋转太空人

动态蛛网

让动画动起来

帧率github永久回家地址信息

毕竟作用

感触

库房地址

相关文章

网易云音乐开源全链路埋点方案-曙光埋点（dawn）

iOS 全埋点-控件点击事件

直面原理：5 张图彻底了解 Android TextToSpeech 机制

云图说｜Git云上仓库哪家好？一张图了解华为云代码托管服务

作者信息