【OpenHarmony】 鸿蒙 UI开发之shimmer-ohos

简介

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

下载安装

bash 复制代码
ohpm install @ohos/shimmer

使用说明

shimmer引用及使用

less 复制代码
import { Shapes, Directions, Shimmer, ShimmerElement } from '@ohos/shimmer'

  var mShimmer: Shimmer = new Shimmer()
  //自定义内容
  @Builder content() {
    ...
  }
  //页面展示shimmer效果
  build() {
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
      ShimmerElement({ mShimmer: this.mShimmer, content: this.content })
    }
    .width('100%')
    .height('100%')
    .backgroundImage('/components/background.jpg', ImageRepeat.XY)
    .backgroundImageSize({ width: 1080, height: 2560 })
    .opacity(0.8)
  }

接口说明

  1. 设置效果方向 setDirection(direction: number): Shimmer
  2. 设置效果形状 setShape(shape: number): Shimmer
  3. 设置闪烁的倾斜角度 setTilt(tilt: number): Shimmer
  4. 设置重复模式 setRepeatMode(mode: PlayMode): Shimmer
  5. 设置闪烁渐变的速度 setDropoff(dropoff: number): Shimmer
  6. 设置闪烁时长 setDuration(millis: number): Shimmer
  7. 设置基本alpha值 setBaseAlpha(alpha: number): Shimmer

DD一下: 鸿蒙开发各类文档,也可关注公众号<程序猿百晓生>获取。

erlang 复制代码
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题(含参考答案) 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

约束与限制

在下述版本验证通过:

  • DevEco Studio NEXT Developer Beta3: (5.0.3.530), SDK: API12 (5.0.0.35(SP3))

目录结构

lua 复制代码
|---- shimmer-ohos  
|     |---- entry  # 示例代码文件夹
|     |---- shimmer  # shimmer库文件夹
|     |     |   └─src
|     |     |   │---└─main  
|     |     |   |----   └─ets
|     |     |   │----      └──components  #默认存在的目录
|     |     |   │----             └──MainPage #默认存在的目录
|     |     |                        │----Shimmer.ets #设置shimmer属性类
|     |     |                        │----ShimmerElement.ets #自定义shimmer样式
|     |     |---- index.ets  # 对外接口
|     |---- README.md  # 安装使用方法                    
相关推荐
HarmonyOS小助手1 小时前
【宝藏贴】HarmonyOS官方模板优秀案例 · 第1期:便捷生活-购物中心
harmonyos·鸿蒙·鸿蒙生态
沫小北2 小时前
HarmonyOS Lottie动画库总结
前端·harmonyos
zhanshuo16 小时前
如何用 ArkTS 实现丝滑又安全的表单输入验证?一篇文章讲清楚!
harmonyos
zhanshuo16 小时前
掌握 ArkTS 复杂数据绑定:从双向输入到多组件状态同步
harmonyos
SuperHeroWu717 小时前
【HarmonyOS】鸿蒙应用开发中常用的三方库介绍和使用示例
华为·harmonyos
jz_ddk18 小时前
[HarmonyOS] 鸿蒙LiteOS-A内核深度解析 —— 面向 IoT 与智能终端的“小而强大”内核
物联网·学习·华为·harmonyos
liuhaikang1 天前
【鸿蒙HarmonyOS Next App实战开发】视频提取音频
华为·音视频·harmonyos
爱笑的眼睛111 天前
HarmonyOS应用上架流程详解
华为·harmonyos
zhanshuo2 天前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo2 天前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos