开发一个鸿蒙全能加载动画（附源码）_鸿蒙加载动画

大家在日常开发中肯定少不了使用各种加载动画和提示弹窗，比如网络加载动画，加载或操作成功的提示弹窗，失败弹窗，表单输入提示弹窗等等。
这些在iOS和安卓上都有非常著名非常成熟的开源框架，所以幽蓝君想做一款属于鸿蒙的开源框架，并且我要用一行代码实现它。先看效果图：

这里给大家提供了四种模式的弹窗，分别是加载动画弹窗、文字提示弹窗、成功提示弹窗和失败提示弹窗。这款组件我给它命名为YLLoadingHUD。

引入方式：

1、**关注公众号【幽蓝计划】发送‘鸿蒙加载动画’获取项目源码。**将ets文件夹下的YLLoadingHUD文件夹拖到自己的项目中。

2、在需要使用的文件中引入：

import YLHud, { HUDClass, HUDMode } from '../YLLoadingHUD/YLLoadingHUD'
1

3、定义一个对象变量

@State hudItem:HUDClass = {
    show:false,
    mode:HUDMode.loading,
    string:'loading'
  }
1
2
3
4
5

4、添加动画组件：

YLHud({hudItem:$hudItem})
1

展示方式：

当你需要弹窗时，只需要设置

this.hudItem.show = true
1

同理，想让弹窗消失时设置

this.hudItem.show = false
1

模式介绍：

1、默认模式：HUDMode.loading

你可以这样设置使用默认模式：

this.hudItem.mode = HUDMode.loading
this.hudItem.string = "loading"
this.hudItem.show = true
1
2
3

弹窗大小会根据string的内容自适应，string不是必填项,当string传空时，不显示文字，效果图如下：

2、文字提示弹窗：HUDMode.string

使用方法：

this.hudItem.mode = HUDMode.string
this.hudItem.string = "This is a tip"
this.hudItem.show = true
1
2
3

此模式string不能为空，且弹窗不会自动消失。
3、成功提示弹窗：HUDMode.success

使用方法：

this.hudItem.mode = HUDMode.success
this.hudItem.string = "success"
this.hudItem.show = true
1
2
3

此模式2秒会自动隐藏，string非必填。

3、失败提示弹窗：HUDMode.error

使用方法：

this.hudItem.mode = HUDMode.error
this.hudItem.string = "error"
this.hudItem.show = true
1
2
3

此模式2秒会自动隐藏，string非必填。

关注公众号【幽蓝计划】发送‘鸿蒙加载动画’获取项目源码。