简介

Flutter高仿支付宝打钩动画，利用动画和路径Path实现简易效果。熟悉Android的同学会发现有挺多共同点。
Github代码链接

效果

预备知识

自定义控件基本知识

主要涉及几个类CustomPaint、CustomPainter、Paint、Path。

CustomPaint、CustomPainter需要配合使用，CustomPaint可以理解为作画，CustomPainter字面意思画家，最终需要绘制什么内容由你决定。
CustomPainter中使用Paint画笔、Path路径规划，以及一个canvas画板来绘制目标。比喻画家拿着笔在画板中作画

动画基本知识

动画知识，Animation、AnimationController。

Animation，可以读取value属性获取动画的当前状态值。
AnimationController：动画控制器，控制动画的播放、停止等，默认生成0到1的数值变化。
Curve：曲线动画，控制动画以什么样曲线形式执行，先快后慢等。
Tween：将AnimationController 生成的 [0,1]转换成想要的数值区间，比如[10, 100]之间，有点像Android中估值器。
Ticker类在每一帧动画中都会回调一次，Ticker调用 AnimationController 的_tick 的方法，进一步走到AnimationController的监听器，最终通知到Animation的addListener 方法。

动画分析

拆解一下动画，首先是一个画圆，圆画完再画钩。可以实现静态效果，直接画一个圆，加一个钩，然后再分成两部分执行动画。

设整个控件的宽高width、height为200，圆形半径radius为3分之1宽度，自定义控件默认起点在左上角(0,0)的位置。为了方便计算，需要移动坐标原点到圆心，即

double x = size.width / 2;
double y = size.height / 2;
double radius = size.width / 3;

画圆很方便，画钩的话就主要把A、B、C三点的坐标确定好就可以，经过调整，

O点(width / 2, height / 2)
A点(x - 1/2 * radius, 0)
B点(x - radius / 6, y + (radius/2 -radius/6) )
C点(x + radius * 1 / 2, y - radius * 1 / 3)

各个坐标点都确认了，只需要使用path类把A、B、C三点连起来就是一个钩，现在完整的图形有了，就需要将Path路径与动画时间关联，随着时间移动，path路径显示的部分由少到多。

PathMetric类作用

这里可以使用PathMetric类来计算path拉直后的总长度，截取总path的子path。

关键代码

    /// 路径动画PathMetrics pathMetrics = path.computeMetrics();/// 圆的路径PathMetric circularPathMetric = pathMetrics.first;/// 第一个Path是圆、第二个Path是钩if (progress <= 1) {Path circularExtractPath = circularPathMetric.extractPath(0.0,circularPathMetric.length * progress,);canvas.drawPath(circularExtractPath, viewPaint);} else if (progress <= 2) {/// 画背景圆Path circularExtractPath = circularPathMetric.extractPath(0.0,circularPathMetric.length,);canvas.drawPath(circularExtractPath, viewPaint);/// 画钩PathMetric tickPathMetric = pathMetrics.last;Path tickExtractPath = tickPathMetric.extractPath(0.0,tickPathMetric.length * (progress - 1),);canvas.drawPath(tickExtractPath, viewPaint);}

progress是由外面动画传递进来的值，0->1表示画圆，1->2表示画钩。
这里的path由两个部分组成，一个是圆，一个是钩。
分别取出圆的path和钩的path，通过PathMetric.extractPath的方法截取子Path,不断的增加子Path的长度，就能达到动画效果。
画钩是第二部分的path，绘制的时候还需要先把背景圆给绘制了。

Flutter高仿支付宝打钩动画相关推荐

高仿支付宝首页头部动画
高仿支付宝首页头部动画(使用design实现效果,CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar) 效果图(效果图渐变不明 ...
高仿支付宝增加减少item功能和动画效果
闲来无事,看了下支付宝App做的应用item效果,很炫,效果如下: 自己实现的效果如下: gif可能有点卡,但是实现了支付宝效果, 说下思路:下面是实例图(凑合看吧,大概意思是) 开始是打算用Scro ...
Flutter高仿微信-第22篇-支付-二维码收款(二维码)
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看效果图: 实现代 ...
Flutter高仿微信-视频演示
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看请看视频演示: ...
Flutter高仿微信-第21篇-支付-向商家付款(二维码)
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看效果图: 实现代 ...
Flutter高仿微信-第26篇-新的朋友
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看效果图: 实现代 ...
Flutter高仿微信-第57篇-添加好友
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看效果图: 实现 ...
Flutter高仿微信-第51篇-群聊-修改群名
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看效果图: 实现 ...
Flutter高仿微信-第59篇-同步数据
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看实现代码: / ...

Flutter高仿支付宝打钩动画

文章目录

简介

效果