往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）

✏️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

✏️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

✏️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

✏️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

✏️ 记录一场鸿蒙开发岗位面试经历~

✏️ 持续更新中……

简介

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

下载安装

ohpm install @ohos/shimmer

使用说明

shimmer引用及使用

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

约束与限制

在下述版本验证通过：

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

目录结构

|---- shimmer-ohos  
|     |---- entry  # 示例代码文件夹
|     |---- shimmer  # shimmer库文件夹
|     |     |   └─src
|     |     |   │---└─main  
|     |     |   |----   └─ets
|     |     |   │----      └──components  #默认存在的目录
|     |     |   │----             └──MainPage #默认存在的目录
|     |     |                        │----Shimmer.ets #设置shimmer属性类
|     |     |                        │----ShimmerElement.ets #自定义shimmer样式
|     |     |---- index.ets  # 对外接口
|     |---- README.md  # 安装使用方法