介绍

一个简单灵活的为应用视图添加闪烁效果的库，主要有由左到右倾斜，由左到右竖直，由左到右圆形，由上到下水平等闪光效果

特性

• 🌍 支持开启和停止闪烁效果

• 🚀 支持条形、圆形和不同颜色设置

• 💡 支持上下、左右不同运动方向和倾斜角度设置

• 🛠️ 支持播放速度和播放模式设置

软件架构

架构图

ShimmerElement自定义组件结构简图

• 用户传递需要添加效果的组件到ShimmerElement自定义组件中，ShimmerElement自定义组件会给用户组件添加一个canvas蒙层，通过配置和计算得到需要的闪烁效果数据，在canvas蒙层上进行绘制

源码目录

├─AppScope
├─doc
├─entry
│  └─src
│      └─main
│          ├─cangjie
│          └─resources
├─shimmer
│  └─src
│      └─main
│          ├─cangjie
│          │  └─src
│          └─resources
└─hvigor

• AppScope 全局资源存放目录和应用全局信息配置目录
• doc API文档和使用手册存放目录
• entry 工程模块 - 编译生成一个HAP
• entry src APP代码目录
• entry src main APP项目目录
• entry src main cangjie 仓颉代码目录
• entry src main resources 资源文件目录
• shimmer 工程模块 - 编译生成一个har包
• shimmer src 模块代码目录
• shimmer src main 模块项目目录
• shimmer src main cangjie 仓颉代码目录
• shimmer src main resources 资源文件目录
• shimmer src main cangjie src 组件主体代码目录
• hvigor 构建工具目录

接口说明

主要类和函数接口说明详见 API

使用说明

编译构建

1.module方式引入

1. 克隆下载项目
2. 将 shimmer 模块拷贝到应用项目下
3. 修改自身应用 entry 下的 oh-package.json5 文件，在 dependencies 字段添加 "shimmer": "file:../shimmer"

{
    "name": "entry",
    "version": "1.0.0",
    "description": "Please describe the basic information.",
    "main": "",
    "author": "",
    "license": "",
    "dependencies": {
      "shimmer": "file:../shimmer"
    }
}

4. 修改自身应用 entry/src/main/cangjie 下的 cjpm.toml 文件，在 [dependencies] 字段下添加 shimmer = {path = "../../../../shimmer/src/main/cangjie", version = "1.0.0"}

[dependencies]
  shimmer = {path = "../../../../shimmer/src/main/cangjie", version = "1.0.0"}

5. 在项目中引用

import shimmer.*

2.三方库方式引入

1. 目标工程把 shimmer4cj 依赖库作为 git submodule 引入

> cd $工程根目录
> mkdir third-party
> cd third-party
> git submodule add "https://gitcode.com/Cangjie-TPC/shimmer4cj.git"

2. 修改自身应用 entry/src/main/cangjie 下的 cjpm.toml 文件，添加依赖

[dependencies]
    shimmer = {path = "../../../../third-party/shimmer4cj/shimmer/src/main/cangjie", version = "1.0.0"}

3. 在项目中引用

import shimmer.*

功能示例

// 创建一个控制器
@State var testControl: Shimmer = Shimmer()

// 要修改的颜色
var testColor1: Color = Color(0, 191, 255, alpha: 0.2)
var testColor2: Color = Color(255, 193, 193, alpha: 1.0)

// 需要添加闪光效果的组件
@Builder
func testComponent() {
    Column() {
        Text(message).width(200).height(200)
    }.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
}

// 添加ShimmerElement组件
ShimmerElement(mShimmer: testControl, content: testComponent)

显示控制

// 设置运行方向
testControl.setDirection(ShimmerDirections.TOP_TO_BOTTOM)

// 设置闪光形状
testControl.setShape(ShimmerShapes.LINEAR)

// 设置闪光宽度
testControl.setFixedWidth(50.0)

// 设置播放模式
testControl.setRepeatMode(PlayMode.Normal)

// 设置倾斜角度
testControl.setTilt(50) 

// 设置闪光过度颜色和底色
testControl.setShimmerColor(testColor2, testColor1)

// 设置播放时间
testControl.setDuration(2000)

// 设置光亮的强度
testControl.setIntensity(0.1)

// 设置渐变的程度
testControl.setDropOffset(1.0)

约束与限制

1. 圆形闪光当前只支持从左到右方向
2. 倾斜只在左右移动中生效
3. 循环次数设置不适用圆形闪光

版本验证通过：

DevEco Studio: 5.0.3.910

Cangjie support Plugin: 5.0.3.906

开源协议

本项目基于 BSD License，请自由的享受和参与开源。

参与贡献

欢迎给我们提交PR，欢迎给我们提交Issue，欢迎参与任何形式的贡献。