# shimmer-ohos

**Repository Path**: zhai-junwei/shimmer-ohos

## Basic Information

- **Project Name**: shimmer-ohos
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 19
- **Created**: 2022-04-28
- **Last Updated**: 2022-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# shimmer-ohos

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

<img src="screenshot/效果展示.gif"/>

## 下载安装
```shell
npm install @ohos/shimmer --save
```
OpenHarmony npm环境配置等更多内容，请参考 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md) 。

## 使用说明

### shimmer引用及使用
```
import { Shapes, Directions, Shimmer, AlphaHighlightBuilder, ShimmerElement, ShimmerFrameLayout } from '@ohos/shimmer'

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

```

## 接口说明
`var shimmerBuilder: AlphaHighlightBuilder = new AlphaHighlightBuilder()`
1. 设置效果方向
   `shimmerBuilder.setDirection()`
2. 设置效果形状
   `shimmerBuilder.setShape()`
3. 构建shimmer对象
   `shimmerBuilder.builds()`

## 兼容性
支持 OpenHarmony API version 8 及以上版本。

## 目录结构
````
|---- shimmer-ohos  
|     |---- entry  # 示例代码文件夹
|     |---- shimmer  # shimmer库文件夹
|     |     |   └─src
|     |     |   │---└─main  
|     |     |   |----   └─ets
|     |     |   │----      └──components  #默认存在的目录
|     |     |   │----             └──MainPage #默认存在的目录
|     |     |                        │----Shimmer.ets #设置shimmer属性类
|     |     |                        │----ShimmerElement.ets #自定义shimmer样式
|     |     |                        │----ShimmerFrameLayout.ets #自定义shimmer容器，通过自定义容器将shimmer效果和用户布局叠加展示
|     |     |---- index.ets  # 对外接口
|     |---- README.MD  # 安装使用方法                    
````

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/shimmer-ohos/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-sig/shimmer-ohos/pulls) 。

## 开源协议
本项目基于 [Apache License 2.0](https://gitee.com/openharmony-sig/shimmer-ohos/blob/master/LICENSE) ，请自由地享受和参与开源。