【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  # 安装使用方法                    
相关推荐
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划2 小时前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
HMS Core4 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
生如夏花℡4 小时前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
伍哥的传说4 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
遇到困难睡大觉哈哈17 小时前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos
幽蓝计划21 小时前
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
开发语言·harmonyos
伍哥的传说21 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
Georgewu1 天前
【HarmonyOS】应用开发拖拽功能详解
harmonyos
塞尔维亚大汉1 天前
鸿蒙内核源码分析(构建工具篇) | 顺瓜摸藤调试鸿蒙构建过程
源码·harmonyos