# shimmer-ohos

**Repository Path**: openharmony-sig/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**: 7
- **Forks**: 19
- **Created**: 2022-04-16
- **Last Updated**: 2025-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Shimmer

## Introduction
> Shimmer is a library that provides an easy and flexible way to add a shimmer effect to any view in your application, including the shimmer effects tilting from left to right, vertical from left to right, round from left to right, and horizontal from top to bottom.

<img src="screenshot/effect.gif"/>

## How to Install
```shell
ohpm install @ohos/shimmer
```
For details about the OpenHarmony ohpm environment configuration, see [OpenHarmony HAR](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.en.md).

## How to Use

### Importing and Using Shimmer
```
import { Shapes, Directions, Shimmer, ShimmerElement } from '@ohos/shimmer'

  var mShimmer: Shimmer = new Shimmer()
  // Custom content.
  @Builder content() {
    ...
  }
  // Display the shimmer effect on the page.
  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)
  }

```

## Available APIs
1. Sets the effect direction.
   `setDirection(direction: number): Shimmer`
2. Sets the effect shape.
   `setShape(shape: number): Shimmer`
3. Sets the tilt angle of a shimmer effect.
   `setTilt(tilt: number): Shimmer`
4. Sets the repetition mode.
   `setRepeatMode(mode: PlayMode): Shimmer`
5. Sets the gradient speed of a shimmer effect.
   `setDropoff(dropoff: number): Shimmer`
6. Sets the duration of a shimmer effect.
   `setDuration(millis: number): Shimmer`
7. Sets the basic **alpha** value.
   `setBaseAlpha(alpha: number): Shimmer`

## Constraints
This project has been verified in the following versions:

- DevEco Studio NEXT Developer Beta3: (5.0.3.530), SDK: API 12 (5.0.0.35 (SP3))

## Directory Structure
````
|---- shimmer-ohos  
|     |---- entry  # Sample code
|     |---- shimmer  # shimmer library
|     |     |   └─src
|     |     |   │---└─main  
|     |     |   |----   └─ets
|     |     |   │----      └──components  # Default directory
|     |     |   │----             └──MainPage # Default directory
|     |     |                        │----Shimmer.ets # Setting the shimmer attribute class
|     |     |                        │----ShimmerElement.ets # Customizing the shimmer style
|     |     |---- index.ets  # External APIs
|     |---- README.md  # Readme                   
````

## How to Contribute
If you find any problem when using the project, submit an [issue](https://gitee.com/openharmony-sig/shimmer-ohos/issues) or a [PR](https://gitee.com/openharmony-sig/shimmer-ohos/pulls).

## License
This project is licensed under [Apache License 2.0](https://gitee.com/openharmony-sig/shimmer-ohos/blob/master/LICENSE).