Flutter 动画鼻祖之CustomPaint
老孟导读:CustomPaint可以称之为动画鼻祖,它可以实现任何酷炫的动画和效果。CustomPaint本身没有动画属性,仅仅是绘制属性,一般情况下,CustomPaint会和动画控制配合使用,达到理想的效果。
基本用法
CustomPaint的用法非常简单,如下:
CustomPaint(
painter: MyCustomPainter(),
)
MyCustomPainter定义如下:
class MyCustomPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {}
@override
bool shouldRepaint(MyCustomPainter oldDelegate) {
return this != oldDelegate;
}
}
上面的MyCustomPainter为了看起来清晰,什么也没有做,通常情况下,在paint
方法内绘制自定义的效果。shouldRepaint
方法通常在当前实例和旧实例属性不一致时返回true。
paint
通过canvas
绘制,size
为当前控件的大小,下面看看canvas
的方法。
绘制点
Paint _paint = Paint()
..color = Colors.red
..strokeWidth = 3;
@override
void paint(Canvas canvas, Size size) {
var points = [
Offset(0, 0),
Offset(size.width / 2, size.height / 2),
Offset(size.width, size.height),
];
canvas.drawPoints(PointMode.points, points, _paint);
}
PointMode
有3种模式:
- points:点
- lines:将2个点绘制为线段,如果点的个数为奇数,最后一个点将会被忽略
- polygon:将整个点绘制为一条线
绘制线
canvas.drawLine(Offset(0, 0),Offset(size.width, size.height), _paint);
绘制路径
Paint _paint = Paint()
..color = Colors.red
..style = PaintingStyle.stroke
..strokeWidth = 3;
@override
void paint(Canvas canvas, Size size) {
print('size:$size');
var _path = Path()
..moveTo(0, 0)
..lineTo(size.width, 0)
..lineTo(size.width, size.height)
..close();
canvas.drawPath(_path, _paint);
}
这里注意Paint.style
,还可以设置为PaintingStyle.fill
,效果如下:
此时Path的路径不要在一条直线上,否则会看不到效果。
绘制各种形状
绘制圆形
canvas.drawCircle(Offset(size.width/2, size.height/2), 20, _paint);
绘制椭圆
canvas.drawOval(Rect.fromLTRB(0, 0, size.width, size.height/2), _paint);
如果给定的Rect为正方形,那么椭圆将会变为圆形。
绘制弧
canvas.drawArc(
Rect.fromLTRB(0, 0, size.width, size.height), 0, pi/2, true, _paint);
绘制圆角矩形
canvas.drawRRect(
RRect.fromLTRBR(0, 0, size.width, size.height, Radius.circular(10)), _paint)
canvas
还有很多绘制函数,比如贝塞尔曲线、三次贝塞尔曲线、画布的反转等操作,这里不在一一介绍。
这些函数和Android的Canvas基本一样,如果你有Android基础,直接套用即可。
最后奉上一个绘制玫瑰的动画效果:
这个效果是不是很酷炫,我们看下绘制花骨朵代码:
///
/// 绘制花骨朵
///
_drawFlower(Canvas canvas, Size size) {
//将花变为红色
if (flowerPaths.length >= RoseData.flowerPoints.length) {
var path = Path();
for (int i = 0; i < flowerPaths.length; i++) {
if (i == 0) {
path.moveTo(flowerPaths[i].dx, flowerPaths[i].dy);
} else {
path.lineTo(flowerPaths[i].dx, flowerPaths[i].dy);
}
}
_paint.style = PaintingStyle.fill;
_paint.color = _flowerColor;
canvas.drawPath(path, _paint);
}
//绘制线
_paint.style = PaintingStyle.stroke;
_paint.color = _strokeColor;
//去掉最后2个点,最后2个点为了绘制红色
var points = flowerPaths.sublist(0, max(0, flowerPaths.length - 2));
canvas.drawPoints(PointMode.polygon, points, _paint);
}
花骨朵的绘制只通过canvas.drawPath
就实现了,其实整个玫瑰花的绘制都是通过canvas.drawPath
加上动画控制实现的。
CustomPaint可以实现任何你想要的动画的效果,比如绘画版就可以通过此控件实现。
获取完整代码方式扫码下方二维码回复:rose
交流
老孟Flutter博客地址(近200个控件用法):http://laomengit.com
欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:
Flutter 动画鼻祖之CustomPaint的更多相关文章
- 转:Flutter动画二
1. 介绍 本文会从代码层面去介绍Flutter动画,因此不会涉及到Flutter动画的具体使用. 1.1 Animation库 Flutter的animation库只依赖两个库,Dart库以及phy ...
- 转:Flutter动画一
1. 动画介绍 动画对于App来说,非常的重要.很多App,正是因为有了动画,所以才会觉得炫酷.移动端的动画库有非常的多,例如iOS上的Pop.web端的animate.css.Android端的An ...
- Flutter 动画详解(一)
本文主要介绍了动画的原理相关概念,对其他平台的动画做了一个简要的梳理,并简要的介绍了Flutter动画的一些知识. 1. 动画介绍 动画对于App来说,非常的重要.很多App,正是因为有了动画,所以才 ...
- 《Flutter 动画系列一》25种动画组件超全总结
动画运行的原理 任何程序的动画原理都是一样的,即:视觉暂留,视觉暂留又叫视觉暂停,人眼在观察景物时,光信号传入大脑神经,需经过一段短暂的时间,光的作用结束后,视觉形象并不立即消失,这种残留的视觉称&q ...
- 《Flutter 动画系列》组合动画
老孟导读:在前面的文章中介绍了 <Flutter 动画系列>25种动画组件超全总结 http://laomengit.com/flutter/module/animated_1/ < ...
- Flutter 动画使用
旋转动画 透明度变换动画 在Android中,可以通过View.animate()对视图进行动画处理,那在Flutter中怎样才能对Widget进行处理 在Flutter中,可以通过动画库给wid ...
- flutter 动画双指放大图片
class GridAnimation extends StatefulWidget { @override State<StatefulWidget> createState() { r ...
- flutter 动画 practice
import 'package:flutter/material.dart'; import 'dart:io'; import 'dart:async'; main() => runApp(M ...
- flutter 动画
AnimatedCrossFade AnimatedCrossFade让俩个子widget 交替淡入淡出. class AnimatedCrossFade1 extends StatefulWidge ...
随机推荐
- 经典卷积神经网络算法(2):AlexNet
.caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...
- node常用插件使用
1.nodemon 用于热更新,随时监控文件的变化 安装npm i -g nodemon 使用nodemon index.js 2.nvm nvm用于nodejs版本管理,我们在开发过程中,不同的项目 ...
- css布局的漂浮、position定位
float: left:文本流向对象的右边 right:文本流向对象的左边 div具有自动换行效果 position: absolute:将对象从文档流中拖出,即飘到最上面一层,形成层叠,不占位置:可 ...
- 设计模式之GOF23享元模式
享元模式FlyWeight 场景:如果有很多个完全相同或者相似的对象,可以节省内存资源 核心: 享元模式以共享的方式高效地支持大量细粒对象的重用 享元对象做到共享的关键是区分了内部状态和外部状态: 内 ...
- 设计模式之GOF23工厂模式02
抽象工厂模式 不能添加单个产品,产品族 public interface Seat { void anmo();}class GoodSeat implements Seat { @Override ...
- 安卓APP承载网页(WebView)
安卓APP自身如何打开网页,如何制作一个简单的浏览器,WebView在其中将是一个重要的角色.WebView是一个基于WebKit引擎.展现Web页面的控件. Webview 是一个基于webkit引 ...
- JS的数据类型判断函数、数组对象结构处理、日期转换函数,浏览器类型判断函数合集
工具地址:https://github.com/BothEyes1993/bes-jstools bes-jstools 100多个基础常用JS函数和各种数据转换处理集合大全,此工具包是在 outil ...
- (Python基础教程之十二)Python读写CSV文件
Python基础教程 在SublimeEditor中配置Python环境 Python代码中添加注释 Python中的变量的使用 Python中的数据类型 Python中的关键字 Python字符串操 ...
- 记一条sql语句优化
傻瓜级的.此sql语句存在于分销王系统中. 查阅slow log ,时间设置1s 发现很多 SELECT r.*, goods_id, bn, name FROM sdb_goods_rate r, ...
- webpack使用babel
几个月没用webpack都忘了好多了. webpack构建前端,使用时除了entry/output,就是plugins和module.loaders,还有本地测试的devServer. npm ins ...