Android实现流动的渐变色边框效果
作者:岛上码农 发布时间:2023-06-28 08:24:13
标签:Android,渐变,边框
前言
记得在介绍 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
0
投稿
猜你喜欢
- 看到很多人解析歌词文件时写了一大片的字符处理代码,而且看得不是很明白,所以自己研究了一下, 首先来了解下Lrc文件 时间
- 笔者上次用C#写.Net代码差不多还是10多年以前,由于当时Java已经颇具王者风范,Net几乎被打得溃不成军。因此当时笔者对于这个.Net
- 背景众所周知,所有被打开的系统资源,比如流、文件或者Socket连接等,都需要被开发者手动关闭,否则随着程序的不断运行,资源泄露将会累积成重
- Profile多环境配置我们在开发项目时,通常同一套程序会被发布到几个不同的环境,比如:开发、测试、生产等。其中每个环境的数据库地址、red
- 1.下载安装OpenCVhttps://opencv.org/releases/选择合适的平台安装包下载,然后双击安装,也就是解压的过程。这
- 一、什么是建造者模式建造者模式也称生成器模式 定义:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示(依赖倒转)产品
- 首先,想要明白hashCode的作用,你必须要先知道Java中的集合。 总的来说,Java中的集合(Collection)有两类,一类是Li
- 1 前言Stream 是 java8 中处理集合的抽象概念,可以执行非常复杂的查询、过滤和映射数据等操作。Stream API 提供了一种高
- 一. 前言最近我发现了一个事情,那就是在面试笔试中,好多公司都喜欢在String字符串上出问题,涉及到方方面面的知识,包括其中的一些常用方法
- Java及数据库对日期进行格式化Java对日期进行格式化可使用java.text.SimpleDateFormat示例package com
- 以下是SpringBoot项目中的常用配置类、jar包坐标等通用配置pom文件<!-- --><!-- 自定义配置文件
- 最近,项目上涉及到了图像压缩,发现原有的图像压缩功能,虽然保证了图像的大小300K以内,但是压缩后的图像看的不在清晰,并且,限定了图片的He
- JFinal 是基于 Java 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展
- 这篇文章主要介绍了Springboot如何设置静态资源缓存一年,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,
- Java操作Redis的方式有下面两种:一、jedis(1)maven配置<dependency> <grou
- public void add(intindex, Eelement)从index索引的位置添加element元素,后面的元素都往
- 本文实例讲述了java实现word文档转pdf并添加水印的方法。分享给大家供大家参考,具体如下:前段时间,项目需要自动生成word文档,用W
- 获取resources文件路径背景在SpringBoot项目中,需要获取resources文件的路径,网上找了好多文章都不行,后面还是结合官
- 对于QQ截图,肯定是早就有认识了,只是一直没有去认真观察这个操作的具体实现步骤。所以这里将自己的记忆中的步骤简单的写一下:习惯性用QQ或者T
- 在有些产品的研发过程中,一般我们都有很多条数据记录在一个LOG文件中。在查看最新的数据记录都是从最开始保存的那条开始存储,所以,参考了网上一