HarmonyOS实战开发：色彩（动态效果）

最新推荐文章于 2024-05-29 16:07:46 发布
最新推荐文章于 2024-05-29 16:07:46 发布
阅读量1k 收藏 16
点赞数 27
分类专栏： 鸿蒙 文章标签： harmonyos 华为 鸿蒙 鸿蒙系统 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84194030/article/details/138729284
版权

通过颜色渐变接口，可以设置组件的背景颜色渐变效果，实现在两个或多个指定的颜色之间进行平稳的过渡。

接口说明
linearGradient为当前组件添加线性渐变的颜色渐变效果。
sweepGradient为当前组件添加角度渐变的颜色渐变效果。
radialGradient为当前组件添加径向渐变的颜色渐变效果。

为组件添加线性渐变效果

@Entry
@Component
struct LinearGradientDemo {
  build() {
    Grid() {
      GridItem() {
        Column() {
          Text('angle: 180')
            .fontSize(15)
        }
        .width(100)
        .height(100)
        .justifyContent(FlexAlign.Center)
        .borderRadius(10)
        .linearGradient({
          // 0点方向顺时针旋转为正向角度，线性渐变起始角度的默认值为180°
          colors: [
            [0xf56c6c, 0.0], // 颜色断点1的颜色和比重，对应组件在180°方向上的起始位置
            [0xffffff, 1.0], // 颜色断点2的颜色和比重，对应组件在180°方向上的终点位置
          ]
        })
      }

      GridItem() {
        Column() {
          Text('angle: 45')
            .fontSize(15)
        }
        .width(100)
        .height(100)
        .justifyContent(FlexAlign.Center)
        .borderRadius(10)
        .linearGradient({
          angle: 45, // 设置颜色渐变起始角度为顺时针方向45°
          colors: [
            [0xf56c6c, 0.0],
            [0xffffff, 1.0],
          ]
        })
      }

      GridItem() {
        Column() {
          Text('repeat: true')
            .fontSize(15)
        }
        .width(100)
        .height(100)
        .justifyContent(FlexAlign.Center)
        .borderRadius(10)
        .linearGradient({
          repeating: true, // 在当前组件内0.3到1.0区域内重复0到0.3区域的颜色渐变效果
          colors: [
            [0xf56c6c, 0.0],
            [0xE6A23C, .3],
          ]
        })
      }

      GridItem() {
        Column() {
          Text('repeat: fasle')
            .fontSize(15)
        }
        .width(100)
        .height(100)
        .justifyContent(FlexAlign.Center)
        .borderRadius(10)
        .linearGradient({
          colors: [
            [0xf56c6c, 0.0], // repeating默认为false，此时组件内只有0到0.3区域内存在颜色渐变效果
            [0xE6A23C, .3],
          ]
        })
      }
    }
    .columnsGap(10)
    .rowsGap(10)
    .columnsTemplate('1fr 1fr')
    .rowsTemplate('1fr 1fr 1fr')
    .width('100%')
    .height('100%')
  }
}

zh-cn_image_0000001641176829

为组件添加角度渐变效果

@Entry
@Component
struct SweepGradientDemo {
  build() {
    Grid() {
      GridItem() {
        Column() {
          Text('center: 50')
            .fontSize(15)
        }
        .width(100)
        .height(100)
        .justifyContent(FlexAlign.Center)
        .borderRadius(10)
        .sweepGradient({
          center: [50, 50], // 角度渐变中心点
          start: 0, // 角度渐变的起点
          end: 360, // 角度渐变的终点。
          repeating: true, // 渐变效果在重复
          colors: [
          // 当前组件中，按照中心点和渐变的起点和终点值,
          // 角度区域为0-0.125的范围，从颜色断点1的颜色渐变到颜色断点2的颜色,
          // 角度区域0.125到0.25的范围，从颜色断点2的颜色渐变到颜色断点3的颜色,
          // 因为repeating设置为true，角度区域0.25到1的范围，重复区域0到0.25的颜色渐变效果
            [0xf56c6c, 0], // 颜色断点1的颜色和比重，对应角度为0*360°=0°，角点为中心点
            [0xffffff, 0.125], // 颜色断点2的颜色和比重
            [0x409EFF, 0.25] // 颜色断点3的颜色和比重
          ]
        })
      }

      GridItem() {
        Column() {
          Text('center: 0')
            .fontSize(15)
        }
        .width(100)
        .height(100)
        .justifyContent(FlexAlign.Center)
        .borderRadius(10)
        .sweepGradient({
          center: [0, 0], // 角度渐变中心点，当前为组件的左上角坐标
          start: 0,
          end: 360,
          repeating: true,
          colors: [
          // 当前组件中，因为角度渐变中心是组件的左上角，所以从颜色断点1到颜色断点3的角度范围，恰好可以覆盖整个组件
            [0xf56c6c, 0], // 颜色断点1的颜色和比重，对应角度为0*360°=0°
            [0xffffff, 0.125], // 色断点2的颜色和比重，对应角度为0.125*360°=45°
            [0x409EFF, 0.25] // 色断点3的颜色和比重，对应角度为0.25*360°=90°
          ]
        })
      }

      GridItem() {
        Column() {
          Text('repeat: true')
            .fontSize(15)
        }
        .width(100)
        .height(100)
        .justifyContent(FlexAlign.Center)
        .borderRadius(10)
        .sweepGradient({
          center: [50, 50],
          start: 0,
          end: 360,
          repeating: true,
          colors: [
            [0xf56c6c, 0],
            [0xffffff, 0.125],
            [0x409EFF, 0.25]
          ]
        })
      }

      GridItem() {
        Column() {
          Text('repeat: false')
            .fontSize(15)
        }
        .width(100)
        .height(100)
        .justifyContent(FlexAlign.Center)
        .borderRadius(10)
        .sweepGradient({
          center: [50, 50],
          start: 0,
          end: 360,
          repeating: false, //只在颜色断点角度覆盖范围内产生颜色渐变效果，其余范围内不重复
          colors: [
            [0xf56c6c, 0],
            [0xffffff, 0.125],
            [0x409EFF, 0.25]
          ]
        })
      }
    }
    .columnsGap(10)
    .rowsGap(10)
    .columnsTemplate('1fr 1fr')
    .rowsTemplate('1fr 1fr 1fr')
    .width('100%')
    .height(437)
  }
}

zh-cn_image_0000001641177073

为组件添加径向渐变效果

@Entry
@Component
struct radialGradientDemo {
  build() {
    Grid() {
      GridItem() {
        Column() {
          Text('center: 50')
            .fontSize(15)
        }
        .width(100)
        .height(100)
        .justifyContent(FlexAlign.Center)
        .borderRadius(10)
        .radialGradient({
          center: [50, 50], // 径向渐变中心点
          radius: 100, // 径向渐变半径
          repeating: true, // 允许在组件内渐变范围外重复按照渐变范围内效果着色
          colors: [
            // 组件内以[50，50]为中心点，在半径为0到12.5的范围内从颜色断点1的颜色渐变到颜色断点2的颜色,
            // 在半径为12.5到25的范围内从颜色断点2的颜色渐变到颜色断点3的颜色,
            // 组件外其他半径范围内按照半径为0到25的渐变效果重复着色
            [0xf56c6c, 0], // 颜色断点1的颜色和比重，对应半径为0*100=0
            [0xffffff, 0.125], // 颜色断点2的颜色和比重，对应半径为0.125*100=12.5
            [0x409EFF, 0.25] // 颜色断点3的颜色和比重，对应半径为0.25*100=25
          ]
        })
      }

      GridItem() {
        Column() {
          Text('center: 0')
            .fontSize(15)
        }
        .width(100)
        .height(100)
        .justifyContent(FlexAlign.Center)
        .borderRadius(10)
        .radialGradient({
          center: [0, 0], // 径向渐变中心点，当前为组件左上角坐标
          radius: 100,
          repeating: true,
          colors: [
            [0xf56c6c, 0],
            [0xffffff, 0.125],
            [0x409EFF, 0.25]
          ]
        })
      }

      GridItem() {
        Column() {
          Text('repeat: true')
            .fontSize(15)
        }
        .width(100)
        .height(100)
        .justifyContent(FlexAlign.Center)
        .borderRadius(10)
        .radialGradient({
          center: [50, 50],
          radius: 100,
          repeating: true,
          colors: [
            [0xf56c6c, 0],
            [0xffffff, 0.125],
            [0x409EFF, 0.25]
          ]
        })
      }

      GridItem() {
        Column() {
          Text('repeat: false')
            .fontSize(15)
        }
        .width(100)
        .height(100)
        .justifyContent(FlexAlign.Center)
        .borderRadius(10)
        .radialGradient({
          center: [50, 50],
          radius: 100,
          repeating: false, // 在组件内渐变范围外不重复按照渐变范围内效果着色
          colors: [
            [0xf56c6c, 0],
            [0xffffff, 0.125],
            [0x409EFF, 0.25]
          ]
        })
      }
    }
    .columnsGap(10)
    .rowsGap(10)
    .columnsTemplate('1fr 1fr')
    .rowsTemplate('1fr 1fr 1fr')
    .width('100%')
    .height('100%')
  }
}

zh-cn_image_0000001592904050

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。

蜀道衫QAQ
关注
  • 27
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
精通HarmonyOS应用开发：从入门到高级实战"
07-06
HarmonyOS（鸿蒙操作系统）是华为开发的一个开源的、基于微内核的全场景分布式操作系统。对于想要成为HarmonyOS应用开发者的高级开发者，以下是一些关键点和学习资源： ### 1. 了解HarmonyOS基础 - 学习HarmonyOS的...
HarmonyOS应用开发：集成语音识别功能全攻略
07-07
通过实际的代码示例和开发指南，开发者可以快速在自己的HarmonyOS应用中集成语音识别功能，为用户提供更加丰富和便捷的交互体验。 本文提供了在HarmonyOS应用中集成语音识别功能的全面指南，从服务集成到实际代码...
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：颜色渐变）
m0_64420071的博客
03-02 5056
ArkTS声明式开发（通用属性：颜色渐变）
OpenHarmony实战开发-动画效果、如何实现色彩渐变效果
2401_82546228的博客
04-28 319
通过颜色渐变接口，可以设置组件的背景颜色渐变效果，实现在两个或多个指定的颜色之间进行平稳的过渡。
OpenHarmony动画详解
m0_71263309的博客
04-11 2163
animateTo) 才能生效，动效时长、曲线、延时跟随 animateTo 中的配置）。4.鸿蒙开发系统底层方向。1.项目开发必备面试题。5.鸿蒙音视频开发方向。6.鸿蒙车载开发方向。7.鸿蒙南向开发方向。
Android阴影绘制的方式
xiaokangss的博客
10-19 1558
不管是自定义View也还是自定义ViewGroup，都是一样的效果，我们都是通过Paint画笔自己画出阴影，本质都是操作onDraw方法。核心类就是 BlurMaskFilter 类，它的兼容性比较好，它通过一个模糊的遮罩来实现几个重要参数：mMaskRadius:扩散的半径BlurMaskFilter.Blur.NORMAL：整个图像都被模糊掉BlurMaskFilter.Blur.SOLID：图像边界外产生一层与图像颜色一致阴影效果。
HarmonyOS 应用开发-使用colorPicker实现背景跟随主题颜色转换
1
04-08 802
本示例介绍使用image库以及effectKit库中的colorPicker对目标图片进行取色，将获取的颜色作为背景渐变色，通过swiper组件对图片进行轮播，
鸿蒙HarmonyOS创建并使用color资源文件
冰雪齐迹
06-28 708
创建第一步： 创建第二步：注意这里都要输入color才可行。 使用第一种： 使用第二种：
HarmonyOS开发案例：抽奖转盘
最新发布
07-27
基于画布组件、动画样式，实现的一个自定义抽奖圆形转盘。包含如下功能： 通过画布组件canvas，画出抽奖圆形转盘。 通过动画样式设置动画，实现抽奖功能。 通过自定义弹窗dialog弹出抽中的奖品。...
HarmonyOS云开发基础认证自刷题库
09-13
【 HarmonyOS 云开发基础认证自刷题库详解】 在当今的互联网技术发展潮流中，华为推出的HarmonyOS操作系统以其跨平台、分布式的特点受到了广泛关注。为了帮助开发者更好地掌握HarmonyOS的云开发技能，官方提供了...
harmonyos2-color-harmony:通过旋转色调创建色阶
07-01
和声2 色彩和谐 描述 通过旋转给定颜色的色调来创建色阶/和谐的 javascript 库。 还有一些辅助方法可以创建阴影（与黑色混合）、色调（与白色混合）和色调（与中灰色混合）。 入门 安装模块： npm install color-harmony var Harmonizer = require ( 'color-harmony' ) . Harmonizer ; var harmonizer = new Harmonizer ( ) ; harmonizer . harmonizeAll ( '#c820f1' ) ; // returns a map of scales harmonizer . harmonize ( '#000' , 'complementary' ) ; // returns ['#000000', '#ffffff'] 文档 该库使用解析器，因此 colorString 可以采用多种不同的格式（即#ff00cc、rgb(13,42,255) 等）。 Harmonizer.add(harmonyName, degreeArray) 添加一个新命名的和声。
Harmony OS物联网应用开发实战
10-02
《Harmony OS物联网应用开发实战》是一本深入探讨华为鸿蒙操作系统在物联网领域的应用与实践的专业书籍。鸿蒙操作系统，即HarmonyOS，是华为推出的一款面向全场景的分布式操作系统，旨在为各种智能设备提供无缝连接...
【HarmonyOS NEXT】组件能力如何实现环形渐变效果
Mayism123的博客
04-26 368
升级API11版本，从API version 11开始，Gauge支持设置color属性：当参数类型为LinearGradient，则圆环类型为渐变环。LinearGradient可以设置单个吗？因为必须要传2个及以上值，但是渐变开始到结束只给了2个值，无法编辑成数组传递进去。API10版本中使用Gauge组件无法实现渐变效果，并且会有箭头显示，progress组件中已删除arc这种样式，无法实现UI要求。LinearGradient设置单个是因为只有一个色值组，从A到B这一个渐变色，箭头是可以隐藏的。
线性渐变LinearGradient使用总结
chuyouyinghe的专栏
08-17 2829
4、TileMode设置为MIRROR，从左向右设置渐变色（x方向的终点为View的中间位置）5、TileMode设置为REPEAT，从左向右设置渐变色（x方向的终点为View的中间位置）6、TileMode设置为CLAMP，从左向右设置渐变色（x方向的终点为View的中间位置）2、从左向右设置渐变色（x方向的终点为View的中间位置）， tileMode为MIRROR。colors[]为渐变的颜色值数组，颜色值要用16进制表示。1、从左向右设置渐变色（x方向的终点为View的右边）...
如何使用命令行对RK开发板进行OpenHarmony版本烧录？
m0_64420071的博客
03-29 1403
开发版烧录
鸿蒙开发-UI-图形-图片
中年程序员
02-08 2120
上文详细学习了组件导航组件Tabs的使用场景，以及不同的导航布局方式，同时也学习了导航栏的使用模式（固定，滚动）以及自定义导航栏的使用。本文学习鸿蒙开发UI图形显示相关知识本文详细学习了鸿蒙开发UI图片显示相关知识，学习了图片资源加载的两种类型，以及矢量图的显示，同时学习了图片渲染组件的相关属性和相关事件的使用方式和效果。下文将学习鸿蒙开发UI图形绘制。
【鸿蒙应用开发系列】- 应用置灰方案实现讲解
枫的专栏
12-16 1618
在某些特殊的日子里，有时候需要对应用进行一个置灰显示处理，在鸿蒙应用中，提供了一些很方便的方法，可以对控件或者应用进行灰色的展示。
HarmonyOS实战开发：@ohos.graphics.colorSpaceManager (色彩管理)
2401_84194030的博客
05-29 774
本模块提供管理抽象化色域对象的一些基础能力，包括色域对象的创建与色域基础属性的获取等。
lgvl字体颜色渐变
12-30
在LGVL中实现字体颜色渐变的方法如下： 1. 在样式的主要部分中选择【字体】。 2. 勾选【字体颜色】和【字体渐变色】。 3. 在【字体颜色】和【字体渐变色】中选择颜色，可以使用颜色选择器或混合颜色选择。 4. 选择【渐变方向】，可以选择水平方向（HOR）或垂直方向（VER）。 5. 通过调整【字体渐变色】的参数，可以实现字体颜色的渐变效果。 以下是一个示例代码，演示了如何在LGVL中实现字体颜色渐变： ```python # 设置字体颜色渐变 font_color = "red" # 字体颜色 gradient_color = "blue" # 字体渐变色 gradient_direction = "HOR" # 渐变方向，水平方向 # 在样式中设置字体颜色渐变 style.set_font_color(font_color) style.set_gradient_color(gradient_color) style.set_gradient_direction(gradient_direction) # 应用样式到LGVL中的文本 text.apply_style(style) ``` 请注意，以上代码仅为示例，具体的实现方式可能因LGVL版本和使用的编程语言而有所不同。请根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值