Android实现流动的渐变色边框效果
作者:岛上码农 时间:2023-06-28 08:24:13
前言
记得在介绍 motion_toast 一篇的时候,开篇有一张动图,边框是渐变色而且感觉是流动的。这个动效挺有趣的,当时也有人问怎么实现,经过上一篇《让你的聊天气泡丰富多彩!》后,有了实现思路了。
实现思路
首先要实现但是渐变色边框,这个其实可以参考上一篇的CustomPaint
的渐变填充实现。绘制一个矩形边框,然后让渐变色的区域填充到矩形区域内就可以了。
void paint(Canvas canvas, Size size) {
final rectWidth = 300.0, rectHeight = 100.0;
Rect rect = Offset(
size.width / 2 - rectWidth / 2, size.height / 2 - rectHeight / 2) &
Size(rectWidth, rectHeight);
final paint = Paint()
..shader = LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: colors,
),
).createShader(rect)
..style = PaintingStyle.stroke
..strokeWidth = 8.0;
canvas.drawRect(rect, paint);
}
绘制出来的效果如下图所示。
然后是让渐变色流动起来,这里就需要动画了,通过动画控制渐变填充的角度,周而复始就能够形成不断流动的效果。这里还是要用到 LinearGradient
的transform
属性。Flutter 内置了一个GradientRotation
旋转变换的类,正好可以进行角度变换实现角度控制,GradientRotation 接收一个角度值实现对渐变的角度控制,下面是0度和90度的对比图,可以看到0度到90度边框的渐变色起始位置正好是旋转了90度。
有了以上两个基础,我们通过一个 Animation 对象动画过程中的值来控制旋转角度就可以了。
void paint(Canvas canvas, Size size) {
final rectWidth = 300.0, rectHeight = 100.0;
Rect rect = Offset(
size.width / 2 - rectWidth / 2, size.height / 2 - rectHeight / 2) &
Size(rectWidth, rectHeight);
final paint = Paint()
..shader = LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: colors,
transform: GradientRotation(
animation * 2 * pi,
), //改变 transform 值实现渐变旋转效果
).createShader(rect)
..style = PaintingStyle.stroke
..strokeWidth = 8.0;
canvas.drawRect(rect, paint);
}
动画配置代码如下,2秒旋转一周,使用 Curves.linear
实现匀速旋转。
class _GradientBoundDemoState extends State<GradientBoundDemo>
with SingleTickerProviderStateMixin {
late Animation<double> animation;
late AnimationController controller;
@override
void initState() {
super.initState();
controller =
AnimationController(duration: const Duration(seconds: 2), vsync: this);
animation = Tween<double>(begin: 0, end: 1.0).animate(CurvedAnimation(
parent: controller,
curve: Curves.linear,
))
..addListener(() {
setState(() {});
});
controller.repeat();
}
//...
}
实现的效果如下所示。
调整一下颜色和 LinearGradient
的 begin
和 end
参数,还可以实现一些有趣的效果。下面这个效果就和开篇那个效果有点接近了。
如果是画成圆圈边框的话,做 Loading 效果其实也不错。
源码已经提交至:绘图相关源码,文件名为:gradient_bound_demo.dart
。
来源:https://juejin.cn/post/7109096764799451167
标签:Android,渐变,边框
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
c# 进程和线程的区别与联系
2023-05-04 23:18:36
浅析C# 结构体struct
2021-08-08 08:21:19
C#使用二分查找法判断指定字符的方法
2022-08-02 06:46:30
Springboot整合mybatis开启二级缓存的实现示例
2023-02-24 13:07:18
![](https://img.aspxhome.com/file/2023/2/81372_0s.jpg)
如何实现Spring Event(异步事件)
2023-08-23 05:06:47
java jdk1.8 使用stream流进行list 分组归类操作
2022-10-16 10:03:52
Android中使用ZXing生成二维码(支持添加Logo图案)
2023-12-24 21:34:58
![](https://img.aspxhome.com/file/2023/1/110681_0s.png)
asp.net页面中如何获取Excel表的内容
2022-11-18 11:40:31
Java 判断一个时间是否在另一个时间段内
2023-02-24 18:44:25
Mybatis控制台打印SQL语句的两种方式实现
2023-06-23 14:24:57
Maven 多profile及指定编译问题的解决
2022-04-22 23:43:24
Android编程设计模式之原型模式实例详解
2021-09-14 02:20:47
![](https://img.aspxhome.com/file/2023/1/128951_0s.png)
Android 自定义底部上拉控件的实现方法
2023-08-18 18:41:19
![](https://img.aspxhome.com/file/2023/3/137423_0s.gif)
FileShare枚举的使用小结(文件读写锁)
2023-10-21 09:26:30
![](https://img.aspxhome.com/file/2023/0/100210_0s.png)
SpringBoot整合Docker实现一次构建到处运行的操作方法
2023-01-23 04:32:14
![](https://img.aspxhome.com/file/2023/9/83419_0s.png)
springboot连接sqllite遇到的坑及解决
2023-04-27 04:37:38
Unity实现苹果手机Taptic震动
2023-02-15 07:18:47
C#中判断本地系统的网络连接状态的方法
2023-07-02 15:39:41
![](https://img.aspxhome.com/file/2023/7/84457_0s.jpg)
深入了解Java中finalize方法的作用和底层原理
2023-06-18 00:31:35
![](https://img.aspxhome.com/file/2023/6/78986_0s.png)
Java使用ThreadLocal实现当前登录信息的存取功能
2023-06-06 12:00:34
![](https://img.aspxhome.com/file/2023/0/59950_0s.png)