# AVLoadingIndicatorView_ohos

**Repository Path**: crystal08/avloading-indicator-view_ohos

## Basic Information

- **Project Name**: AVLoadingIndicatorView_ohos
- **Description**: HarmonyOS平台上一些好看的加载动画集合。
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 10
- **Created**: 2021-03-22
- **Last Updated**: 2021-03-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AnimatorValueLoadingIndicatorView_ohos

**本项目是基于开源项目AnimatorValueLoadingIndicatorView 进行鸿蒙化的移植和开发的，该项目已在公众号发表文章可以通过（ https://harmonyos.51cto.com/posts/2928 ）查看相应资源。原项目地址：https://github.com/81813780/AVLoadingIndicatorView**

#### 项目介绍

项目名称：开源加载动画效果库

所属系列：鸿蒙的第三方组件适配移植

功能：支持加载动画的开关和隐藏，支持多种加载动画效果

项目移植状态：80%

调用差异：现在只能通过java代码来实现,具体的调用方式见下方实例。

项目作者和维护人：刘磊

联系方式：792301176@qq.com



- ![Alt text](https://ftp.bmp.ovh/imgs/2021/03/f459a5c956be3047.png "sample")


#### 项目介绍

编程语言：Java


#### 安装教程

下载加载动画jar包AnimatorLoadingIndicatorView.jar。
启动 DevEco Studio，将下载的jar包，导入工程目录“entry->libs”下。
在moudle级别下的build.gradle文件中添加依赖，在dependences标签中增加对libs目录下jar包的引用。

```
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
	……
}
```

在导入的jar包上点击右键，选择“Add as Library”对包进行引用，选择需要引用的模块，并点击“OK”即引用成功。


#### 使用说明

布局文件定义，提供控件：BallClipRotateIndicator
引入方法：`import com.wang.avi.indicators.BallClipRotateIndicator;`
对每一个动画赋属性值，以BallClipRotateIndicator为例：
```
LayoutConfig BallClipRotateIndicatorConfig = new LayoutConfig(LayoutConfig.MATCH_CONTENT, LayoutConfig.MATCH_CONTENT);
        BallClipRotateIndicatorConfig.setMargins(400,0,0,0);
        BallClipRotateIndicator ballClipRotateIndicator=new BallClipRotateIndicator(this);
        ballClipRotateIndicator.setLayoutConfig(BallClipRotateIndicatorConfig);
        ballClipRotateIndicator.setHeight(200);
        ballClipRotateIndicator.setWidth(200);
        ballClipRotateIndicator.setBackground(ommonElement);
        myLayout.addComponent(ballClipRotateIndicator);
```


手动控制动画开关和隐藏，四个按钮：

//启动
```
LayoutConfig startConfig = new LayoutConfig(LayoutConfig.MATCH_CONTENT, LayoutConfig.MATCH_CONTENT);
        Button  start= new Button(this);
        startConfig.setMargins(300,1600,0,0);
        start.setLayoutConfig(startConfig);
        start.setText("start");
        start.setTextSize(50);
        start.setWidth(200);
        start.setHeight(150);
        start.setTextAlignment(TextAlignment.CENTER);
        ShapeElement startShape = new ShapeElement();
        startShape.setRgbColor(new RgbColor(255, 255, 255));
        start.setBackground(startShape);
        myLayout.addComponent(start);
```


//停止
```
LayoutConfig endConfig = new LayoutConfig(LayoutConfig.MATCH_CONTENT, LayoutConfig.MATCH_CONTENT);
        Button  end= new Button(this);
        endConfig.setMargins(700,1600,0,0);
        end.setLayoutConfig(endConfig);
        end.setText("end");
        end.setTextSize(50);
        end.setWidth(200);
        end.setHeight(150);
        end.setTextAlignment(TextAlignment.CENTER);
        ShapeElement endShape = new ShapeElement();
        endShape.setRgbColor(new RgbColor(255, 255, 255));
        end.setBackground(endShape);
        myLayout.addComponent(end);
```


//显示：
```
LayoutConfig showConfig = new LayoutConfig(LayoutConfig.MATCH_CONTENT, LayoutConfig.MATCH_CONTENT);
        Button  show= new Button(this);
        showConfig.setMargins(300,1800,0,0);
        show.setLayoutConfig(showConfig);
        show.setText("show");
        show.setTextSize(50);
        show.setWidth(200);
        show.setHeight(150);
        show.setTextAlignment(TextAlignment.CENTER);
        ShapeElement showShape = new ShapeElement();
        showShape.setRgbColor(new RgbColor(255, 255, 255));
        show.setBackground(showShape);
        myLayout.addComponent(show);
```


//隐藏：

  ```
LayoutConfig hideConfig = new LayoutConfig(LayoutConfig.MATCH_CONTENT, LayoutConfig.MATCH_CONTENT);
        Button  hide= new Button(this);
        hideConfig.setMargins(700,1800,0,0);
        hide.setLayoutConfig(hideConfig);
        hide.setText("hide");
        hide.setTextSize(50);
        hide.setWidth(200);
        hide.setHeight(150);
        hide.setTextAlignment(TextAlignment.CENTER);
        ShapeElement hideShape = new ShapeElement();
        hideShape.setRgbColor(new RgbColor(255, 255, 255));
        hide.setBackground(hideShape);
        myLayout.addComponent(hide);
  ```


        start.setClickedListener(component -> ballClipRotateIndicator.start());
        end.setClickedListener(component -> ballClipRotateIndicator.stop());
        show.setClickedListener(component -> ballClipRotateIndicator.show());
        hide.setClickedListener(component -> ballClipRotateIndicator.hide());

目前已经实现的加载动画功能如下：
```
Row 1
BallPulseIndicator，BallGridPulseIndicator，BallClipRotateIndicator，BallClipRotatePulseIndicator
Row 2
      PacmanIndicator，BallClipRotateMultipleIndicator，
      SemiCircleSpinIndicator，BallRotateIndicator
Row 3
      BallScaleIndicator，LineScaleIndicator，LineScalePartyIndicator，BallScaleMultipleIndicator
Row 4
      BallPulseSyncIndicator，BallBeatIndicator，LineScalePulseOutIndicator，LineScalePulseOutRapidIndicator
Row 5
      BallScaleRippleIndicator，BallScaleRippleMultipleIndicator，BallSpinFadeLoaderIndicator，LineSpinFadeLoaderIndicator
Row 6
      BallGridBeatIndicator
Row 7
      CubeTransitionIndicator，BallZigZagIndicator，BallZigZagDeflectIndicator，BallTrianglePathIndicator
```

后续会将剩余的加载动画也移植完成。
#### 版本迭代
v0.1.0-alpha
#### 版权和许可信息
Apache Licence 2.0