赞
踩
在HarmonyOS中webview加载网页的时候,需要有进度条,或者加载动画进行用户感知的交互,这样可以优化用户体验,因此今天写一篇加载动画(效果如下)用于同学们进行学习,怎么实现?首先我们需要学习“CommonDialog”“ WebView”“动画开发指导”三个知识储备
我们分为“准备阶段”,“自定义CommonDialog实现”,“动画实现”,“webview的实现”,“运行效果”五个步骤进行实现。
1.准备阶段
在resources \base\ media\目录下准备一张loading图片(图片如下)存放位置如下
Loading图片
存放位置
2. 自定义CommonDialog的实现
2.1新建xml命名为general_dialog.xml,在该xml文件绘画一张图片(代码如下)
- <?xml version="1.0" encoding="utf-8"?>
-
- <DirectionalLayout
-
- xmlns:ohos="http://schemas.huawei.com/res/ohos"
-
- ohos:height="80vp"
-
- ohos:orientation="vertical"
-
- ohos:alignment="center"
-
- ohos:width="80vp">
-
- <Image
-
- ohos:id="$+id:loading"
-
- ohos:height="match_parent"
-
- ohos:width="match_parent"
-
- ohos:scale_mode="clip_center"
-
- ohos:image_src="$media:loading"/>
-
- </DirectionalLayout>
效果图如下
2.2新建GeneralDialog文件,我们参考HarmonyOS 的自定义CommonDialog场景示例
具体代码如下
- package com.harmony.alliance.mydemo.utils;
-
- import java.util.Optional;
-
- import com.harmony.alliance.mydemo.ResourceTable;
- import ohos.agp.animation.Animator;
- import ohos.agp.animation.AnimatorProperty;
- import ohos.agp.animation.AnimatorValue;
- import ohos.agp.colors.RgbColor;
- import ohos.agp.components.*;
- import ohos.agp.components.element.ShapeElement;
- import ohos.agp.utils.LayoutAlignment;
- import ohos.agp.window.dialog.CommonDialog;
- import ohos.agp.window.service.WindowManager;
- import ohos.app.Context;
-
- public class GeneralDialog {
- private float dim = -1f;
- private CommonDialog sDialog;
- private Context mContext;
- private boolean mOutsideTouchClosable = false;
- public GeneralDialog(Context context){
- this.mContext=context;
- }
- public void show() {
- if (sDialog != null) {
- sDialog.show();
- if (dim >= 0) {
- changeDialogDim(sDialog, dim);
- }
- }
- }
- public void remove(){
- if (sDialog != null) {
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。