本文介绍了如何使用Flutter实现一个仿Twitter的点赞效果，包括设计思路、整体布局、动画控制（Staggered Animation）以及绘制过程中遇到的问题。作者参照了GitHub上的LikeButton项目，并调整以适应Flutter。通过Stack和Paint绘制实现了动画效果，同时讨论了如何用一个Controller控制多个动画同步进行，以及解决绘制时的坑，如Canvas的clearColor属性问题。
这次依然是补作业，之前在写仿“探探”左滑/右滑的效果的时候，设计稿底部的喜欢Icon其实是有类似于Twitter点赞那种的动效的，但是因为时间原因我偷懒没写。
惯例先上效果图：
GitHub地址：https://github.com/yumi0629/FlutterUI/tree/master/lib/likebutton
整体算法是参照了GitHub上star最多的jd-alexander大佬写的LikeButton，我进行了调整，并最终用Flutter实现。
一点小缺陷：现在的实现方式，icon大小没法自适应，需要初始化布局的时候手动传入一个size。
设计思路
我们将动画放慢，很明显整体动画由三部分组成：中间Icon的放大、底部圆环的交替和外部烟花散开的效果：
整体布局
因为是层叠布局，我们依旧是使用Stack来实现，底部圆环的交替和外部烟花散开的效果是使用的C
最低0.47元/天 解锁文章
扫一扫
2095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
