【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验

这篇具有很好参考价值的文章主要介绍了【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        从今天开始,博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”,对于刚接触这项技术的小伙伴在学习鸿蒙开发之前,有必要先了解一下鸿蒙,从你的角度来讲,你认为什么是鸿蒙呢?它出现的意义又是什么?鸿蒙仅仅是一个手机操作系统吗?它的出现能够和Android和IOS三分天下吗?它未来的潜力能否制霸整个手机市场呢?

抱着这样的疑问和对鸿蒙开发的好奇,让我们开始今天对ArkUI动画操作的掌握吧!

目录

ArkUI动画操作

属性动画

显示动画

组件转场动画

弹簧曲线动画

路径动画

共享元素转场动画

页面转场动画


ArkUI动画操作

在学习动画操作之前,我们先了解一下动画实现的原理,动画的实现原理说白了就是无数个静态画面快速播放,达到我们肉眼是无法识别的临界值,呈现我们视觉感官的就是动态画面,像电影拍摄拍出来的胶卷就是一帧一帧的画面,它的播放速度是每秒24帧,只要播放速度足够快,人眼就部分识别它是静态的了。

所以接下来我们开始学习如何在ArkUI中实现动画操作,动画可以说是app当中必备的一个功能了,它可以大大提高用户交互时的一个体验。我们在开发应用时实现动画也是一样的,我们只需要把一个物体运动的开始状态和结束状态以及中间的每一帧画面快速地描述出来,那么动画就形成了,当然这个描述肯定不需要我们自己写代码把每一帧都描述出来,ArkUI底层简化了我们的开发,我们只需要把一个组件运行时它的一个初始和结束状态描述出来,ArkUI就会自动帮助我们去填充中间的每一帧画面,这样就有了动画的效果了。

识别动画的实现方式有很多,而在ArkUI中比较常见的实现方式就有以下几种实现方式:

动画是通过设置组件的animation属性来给组件添加动画,当组件的width、height、Opacity、backgroundColor、scale、rotate、translate等属性变更时,可以实现渐变过渡效果。动画设置简单,属性变化时自动触发动画,以下是animation属性可以传递使用的动画参数:

名称 参数类型 必填 描述
duration number 设置动画时长,默认值:1000,单位毫秒
tempo number 动画播放速度。数值越大,速度越快。默认值:1
curve string|Curve 设置动画曲线。默认值:Curve.EaseInOut,平滑开始和结束。
delay number 设置动画延迟执行的时长。默认值:0,单位:毫秒
iterations number 设置播放次数。默认值:1,取值范围 [-1,+),-1表示无限次播放
playMode PlayMode 动画播放模式,默认播放完成后重头开始播放,默认值:PlayMode.Normal
onFinish ()=>void 状态回调,动画播放完成时触发

关于curve属性的详解,以下是其常用的函数名称:

名称 描述
Linear 表示动画从头到尾的速度都是相同的。
Ease 表示动画以低速开始,然后加快,在结束前变慢。
EaseIn 表示动画以低速开始
EaseOut 表示动画以低速结束
EaseInOut 表示动画以低速开始和结束
FastOutSlowIn 标准曲线
LinearOutSlowIn 减速曲线
FastOutLinearIn 加速曲线
ExtremeDeceleration 急缓曲线
Sharp 锐利曲线
Rhythm 节奏曲线
Smooth 平滑曲线

属性动画

属性动画无需使用闭包,把animation属性加在要做属性动画的组件的属性后面即可,想要组件随某个属性值变化而产生动画,此属性需要加在animation属性之前,有的属性变化不希望通过animation产生属性动画,可以放在animation之后。属性动画的接口函数如下:

animation(value: AnimateParam)

以下给出属性动画执行的范例: 

@Entry
@Component

struct test {
  @State boxWidth: number = 100
  @State boxHeight: number = 100
  @State bgColor: Color = Color.Red
  @State flag: boolean = false
  build(){
    Stack({
      alignContent: Alignment.BottomEnd // 设置Stack层叠组件按钮居于最下方
    }){
      Column(){
        Row(){
        }
        .width(this.boxWidth)
        .height(this.boxHeight)
        .animation({
          duration: 1000
        })
        .backgroundColor(this.bgColor)
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)

      Button(){
        Text('动画')
          .fontSize(20)
          .fontColor(Color.White)
      }
      .width(60)
      .height(60)
      .margin({ bottom: 10, right: 10 })
      .onClick(()=>{
        if (this.flag) {
          this.boxWidth = 100
          this.boxHeight = 100
          this.bgColor = Color.Red
        }else {
          this.boxWidth = 200
          this.boxHeight = 200
          this.bgColor = Color.Green
        }
        this.flag = !this.flag
      })
    }
  }
}

最终呈现的效果如下: 

【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验,HarmonyOS(鸿蒙开发),harmonyos,华为,鸿蒙开发,经验分析,页面路由

给个下面的案例加深一下印象吧,使用translate改变一下元素的位置:

// 公共样式
@Extend(Text) function actionSheet() {
  .fontSize(18)
  .fontColor('#666')
  .width('100%')
  .height(20)
  .textAlign(TextAlign.Center)
}
@Entry
@Component

struct test {
  @State boxPosition: number = 220
  @State flag: boolean = false
  build(){
    Stack({
      alignContent: Alignment.BottomEnd
    }){
      Column(){
        Button(){
          Text('show actionSheet')
            .fontSize(30)
            .fontColor(Color.White)
        }
        .onClick(()=>{
          animateTo({
            duration: 500
          },()=>{
            if(this.flag){
              this.boxPosition = 220
            }else {
              this.boxPosition = 0
            }
            this.flag = !this.flag
          })
        })
        .width('80%')
        .height(60)
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)

      Column(){
        List({ space: 44 }){
          ListItem(){
            Text('相册选择')
              .actionSheet()
          }
          ListItem(){
            Text('相机拍照')
              .actionSheet()
          }
          ListItem(){
            Text('取消')
              .actionSheet()
          }
        }
        .divider({ strokeWidth: 1, color: Color.Gray })
      }
      .width('100%')
      .height(220)
      .justifyContent(FlexAlign.Center)
      .backgroundColor('#efefef')
      .translate({
        y: this.boxPosition
      })
    }
  }
}

结果如下:

【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验,HarmonyOS(鸿蒙开发),harmonyos,华为,鸿蒙开发,经验分析,页面路由

显示动画

闭包内的变化均会触发动画,包括由数据变化引起的组件的增删、组件属性的变化等,可以做较为复杂的动画,其显示动画的接口为如下函数,第一个参数指定动画参数,第二个参数为动画的闭包函数。

animateTo(value: AnimateParam, event: () => void): void

以下给出显示动画执行的范例:

@Entry
@Component

struct test {
  @State boxWidth: number = 100
  @State boxHeight: number = 100
  @State flag: boolean = false
  build(){
    Stack({
      alignContent: Alignment.BottomEnd // 设置Stack层叠组件按钮居于最下方
    }){
      Column(){
        Row(){
        }
        .width(this.boxWidth)
        .height(this.boxHeight)
        .backgroundColor(Color.Red)
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)

      Button(){
        Text('动画')
          .fontSize(20)
          .fontColor(Color.White)
      }
      .width(60)
      .height(60)
      .margin({ bottom: 10, right: 10 })
      .onClick(()=>{
        animateTo({
          duration: 1000, // 动画的执行时间
        },()=>{
          if (this.flag) {
            this.boxWidth = 100
            this.boxHeight = 100
          }else {
            this.boxWidth = 200
            this.boxHeight = 200
          }
          this.flag = !this.flag
        })
      })
    }
  }
}

最终呈现的效果如下:

【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验,HarmonyOS(鸿蒙开发),harmonyos,华为,鸿蒙开发,经验分析,页面路由

当然我们也可以给显示动画函数加一些动画参数,使动画效果更有视觉性,如下:

【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验,HarmonyOS(鸿蒙开发),harmonyos,华为,鸿蒙开发,经验分析,页面路由

组件转场动画

组件的插入、删除过程即为组件本身的转场过程,组件的插入、删除动画称为组件内转场动画。通过组件内转场动画,可以定义组件出现、消失的效果。transition函数的入参为组件内转场的效果,可以定义平移、透明度、旋转、缩放这几种转场样式的单个或者组合的转场效果,必须和animateTo一起使用才能产生组件的转场效果。组件内转场动画的接口为如下代码:

transition(value: TransitionOptions)

以下给出组件转场动画执行的范例:

@Entry
@Component

struct test {
  @State flag: boolean = false
  build(){
    Stack({
      alignContent: Alignment.BottomEnd
    }){
      Column(){
        if(this.flag){
          Row(){
            Image("https://img-blog.yssmx.com/direct/b4ef01bec5c54a25b07024e76c8e6b0d.jpeg")
              .width(200)
              .height(200)
          }
          .width(200)
          .height(200)
          .justifyContent(FlexAlign.Center)
          .transition({
            type: TransitionType.Insert, // 显示执行动画
            opacity: 0,
            translate: { x: 300, y: 200 },
            scale: { x: 0, y: 0 }
          })
          .transition({
            type: TransitionType.Delete, // 删除执行动画
            opacity: 0,
            translate: { x: -300, y: 200 },
            scale: { x: 0, y: 0 }
          })
        }
      }
      .width('100%')
      .height('100%')
      .padding(20)
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)

      Button(){
        Text(this.flag ? '隐藏' : '显示')
          .fontColor(Color.White)
          .fontSize(20)
          .onClick(()=>{
            animateTo({
              duration: 1000
            },()=>{
              this.flag = !this.flag
            })
          })
      }
      .width(80)
      .height(80)
      .margin({ bottom: 10, right: 10 })
    }
  }
}

最终呈现的效果如下: 

【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验,HarmonyOS(鸿蒙开发),harmonyos,华为,鸿蒙开发,经验分析,页面路由

弹簧曲线动画

ArkUI提供了预置动画曲线,指定了动画属性从起始值到终止值的变化规律,如Linear、Ease、EaseIn等。同时ArKUI也提供了由弹簧振子物理模型产生的弹簧曲线。通过弹簧曲线,开发者可以设置超过设置的终止值,在终止值附近震荡,直至最终停下来的效果。弹簧曲线的动画效果比其他曲线具有更强的互动性、可玩性。

弹簧曲线的接口包括两类,一类是springCurve,另一类是springMotion和responsiveSpringMotion,这两种方式都可以产生弹簧曲线,这里主要给大家讲解一下springCurve实现登录界面抖动动画,其springCurve的接口函数如下:

构造函数包括初速度(velocity)、弹簧系统的质量(mass)、刚度(stiffness)、阻尼(damping)。构建springCurve时,可指定质量为1,根据springCurve中的参数说明,调节刚度、阻尼两个参数,达到想要的震荡效果。

springCurve(velocity: number, mass: number, stiffness: number, damping: number)

以下给出弹簧曲线动画执行的范例: 

import curves from '@ohos.curves'
@Entry
@Component

struct test {
  @State translateX: number = 0

  jumpWidthSpeed(velocity: number) {
    this.translateX = 10 // 起始位置
    animateTo({
      duration: 1000,
      curve: curves.springCurve(velocity, 1, 1, 1)
    },()=>{
      this.translateX = 0 // 最终的位置
    })
  }
  build(){
      Column(){
        Row(){
          Text("登录框")
            .width('100%')
            .fontSize(40)
            .textAlign(TextAlign.Center)
        }
        .width(200)
        .height(200)
        .margin({ top: 20 })
        .backgroundColor(Color.Gray)
        .translate({
          x: this.translateX
        })

        Row(){
          Button("jump 10")
            .fontSize(14)
            .onClick(()=>{
              this.jumpWidthSpeed(10) // 以初速度10的弹簧曲线进行平移
            })
          Button("jump 200")
            .fontSize(14)
            .onClick(()=>{
              this.jumpWidthSpeed(200) // 以初速度200的弹簧曲线进行平移
            })
        }
        .width('100%')
        .margin({ top: 40 })
        .justifyContent(FlexAlign.SpaceAround)
      }
    .width('100%')
    .height('100%')
  }
}

最终呈现的效果如下: 

【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验,HarmonyOS(鸿蒙开发),harmonyos,华为,鸿蒙开发,经验分析,页面路由

路径动画

通过路径动画也可以实现弹簧曲线,使用路径动画我们可以自定义我们元素的运动轨迹,以下是路径动画实现的接口函数:

path表示位移动画的运动路径;from表示运动路径的起点;to表示运动路径的终点;rotatable表示是否跟随路径进行旋转。

motionPath({path: string, from?: number, to?: number, rotatable?: boolean})

以下给出路径动画执行的范例:  

@Entry
@Component

struct test {
  @State flag: boolean = true
  build(){
    Column(){
      Row(){
        Text('路径曲线')
          .fontSize(20)
          .width('100%')
          .textAlign(TextAlign.Center)
      }
      .width(100)
      .height(100)
      .backgroundColor(Color.Gray)
      // 按照我们设置的坐标(10,600)、(400,600)、(400,500)这三个点进行运动
      .motionPath({ path: 'Mstart.x start.y L10 600 L400 600 L400 500 Lend.x end.y', from: 0.0, to: 1.0, rotatable: false })
      .margin(10)
      .onClick(()=>{
        animateTo({
          duration: 4000
        },()=>{
          this.flag = !this.flag
        })
      })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
    .alignItems(this.flag ? HorizontalAlign.Start : HorizontalAlign.End)
  }
}

最终呈现的效果如下:  

【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验,HarmonyOS(鸿蒙开发),harmonyos,华为,鸿蒙开发,经验分析,页面路由

共享元素转场动画

在不同页面间,有使用相同的元素(例如同一幅图)的场景,可以使用共享元素转场动画衔接。为了突出不同页面间相同元素的关联性,可为它们添加共享转场动画。如果相同元素在不同页面间的大小有差异,即可达到放大缩小视图的效果,共享元素转场的接口函数如下:

其中根据sharedTransitionOptions中的type参数,共享元素转场分为Exchange类型的共享元素转场和Static类型的共享元素转场。

sharedTransition(id: string, options?: sharedTransitionOptions)

Exchange类型的共享元素转场:交换型的共享元素转场,需要两个页面中存在通过sharedTransition函数配置为相同id的组件,它们称为共享元素。这种类型的共享元素转场适用于两个页面间相同元素的衔接,会从起始页共享元素的位置,大小过渡到目标页的共享元素的位置、大小。如果不指定type,默认为Exchange类型的共享元素转场,这也是最常见的共享元素转场的方式。使用Exchange类型的共享元素转场时,共享元素转场的动画参数由目标页options中的动画参数决定。以下给出实现的基本步骤:

1)我们在首页设置图片的默认转场,通过点击事件进行路由的跳转:

【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验,HarmonyOS(鸿蒙开发),harmonyos,华为,鸿蒙开发,经验分析,页面路由

2)在另一个页面中我们通过sharedTransition函数配置为相同id的组件,将图片放大,然后点击图片后再回退到原始页面

【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验,HarmonyOS(鸿蒙开发),harmonyos,华为,鸿蒙开发,经验分析,页面路由

实现的效果如下:

【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验,HarmonyOS(鸿蒙开发),harmonyos,华为,鸿蒙开发,经验分析,页面路由

Static类型的共享元素转场:静态型的共享元素转场通常用于页面跳转时,标题逐渐出现或隐藏的场景,只需要在一个页面中有Static的共享元素,不能再两个页面中出现相同id的Static类型的共享元素。在跳转到该页面(即目标页)时,配置Static类型sharedTransition的组件做透明度从0到该组件设定的透明度的动画,位置保持不变。在该页面(即起始页)消失时,做透明度逐渐变为0的动画,位置保持不变。以下给出实现的基本步骤:

1)原页面还是通过Exchange给出图片的转场效果

【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验,HarmonyOS(鸿蒙开发),harmonyos,华为,鸿蒙开发,经验分析,页面路由

2)另一个页面除了有图片之外,还有其他内容,比如text,这里设置文本内容为Static,有一个淡入淡出的效果实现

【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验,HarmonyOS(鸿蒙开发),harmonyos,华为,鸿蒙开发,经验分析,页面路由

实现的效果如下:

【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验,HarmonyOS(鸿蒙开发),harmonyos,华为,鸿蒙开发,经验分析,页面路由

结合共享元素转场动画效果,接下来我们实现朋友圈预览图片的效果案例 :

首先我们在主页面设置默认的Exchange转场效果:

import router from '@ohos.router'
interface ImageListData {
  uniqueId: string,
  author: string,
  imageUrl: string
}

@Entry
@Component
struct FriendPage {
  listData: ImageListData[] = [
    {
      "uniqueId": 'Candy-Shop',
      "author": 'Mohamed Chahin',
      "imageUrl": 'https://www.itying.com/images/flutter/1.png',
    },
    {
      "uniqueId": 'Childhood',
      "author": 'Google',
      "imageUrl": 'https://www.itying.com/images/flutter/2.png',
    },
    {
      "uniqueId": 'Alibaba-Shop',
      "author": 'Alibaba',
      "imageUrl": 'https://www.itying.com/images/flutter/3.png',
    },
    {
      "uniqueId": 'Alibaba-Shop1',
      "author": 'Alibaba1',
      "imageUrl": 'https://www.itying.com/images/flutter/4.png',
    },
    {
      "uniqueId": 'Alibaba-Shop2',
      "author": 'Alibaba2',
      "imageUrl": 'https://www.itying.com/images/flutter/5.png',
    },
    {
      "uniqueId": 'Alibaba-Shop3',
      "author": 'Alibaba3',
      "imageUrl": 'https://www.itying.com/images/flutter/6.png',
    },
  ]
  build() {
    Column(){
      Grid(){
        ForEach(this.listData,(item: ImageListData)=>{
          GridItem(){
            Image(item.imageUrl)
              .objectFit(ImageFit.Auto)
              .sharedTransition(item.uniqueId,{
                duration: 300
              })
          }
          .onClick(()=>{
            router.pushUrl({
              url: "pages/FriendImagePage",
              params: {
                uniqueId: item.uniqueId,
                imgUrl: item.imageUrl
              }
            })
          })
        })
      }
      .columnsTemplate(`1fr 1fr`)
      .columnsGap(10)
      .rowsGap(10)
    }
    .padding(10)
    .width('100%')
    .height('100%')


  }

  // 去掉页面转场动画
  pageTransition(){
    PageTransitionEnter({ type: RouteType.None, duration: 0 })
    PageTransitionExit({ type: RouteType.None, duration: 0 })
  }
}

接下来我们在预览效果的页面设置Exchange转场和Static转场效果:

import router from '@ohos.router'
interface ImageListData {
  uniqueId: string,
  author: string,
  imageUrl: string
}

@Entry
@Component
struct FriendImagePage {
  @State uniqueId: string = ''
  @State imageIndex: number = 0
  listData: ImageListData[] = [
    {
      "uniqueId": 'Candy-Shop',
      "author": 'Mohamed Chahin',
      "imageUrl": 'https://www.itying.com/images/flutter/1.png',
    },
    {
      "uniqueId": 'Childhood',
      "author": 'Google',
      "imageUrl": 'https://www.itying.com/images/flutter/2.png',
    },
    {
      "uniqueId": 'Alibaba-Shop',
      "author": 'Alibaba',
      "imageUrl": 'https://www.itying.com/images/flutter/3.png',
    },
    {
      "uniqueId": 'Alibaba-Shop1',
      "author": 'Alibaba1',
      "imageUrl": 'https://www.itying.com/images/flutter/4.png',
    },
    {
      "uniqueId": 'Alibaba-Shop2',
      "author": 'Alibaba2',
      "imageUrl": 'https://www.itying.com/images/flutter/5.png',
    },
    {
      "uniqueId": 'Alibaba-Shop3',
      "author": 'Alibaba3',
      "imageUrl": 'https://www.itying.com/images/flutter/6.png',
    },
  ]
  // build方法执行之前触发
  aboutToAppear(){
    // 获取上一个页面的传值
    let params: object = router.getParams()
    this.uniqueId = params["uniqueId"]
    // 获取轮播图默认选中的索引值
    for (let index = 0; index < this.listData.length; index++) {
      if (this.listData[index].uniqueId == this.uniqueId) {
        this.imageIndex = index
      }
    }
  }
  // build方法执行完毕后触发
  onPageShow(){

  }
  // 页面销毁时触发
  onPageHide(){

  }
  build() {
    Row() {
      Column() {
        Swiper(){
          ForEach(this.listData,(item: ImageListData)=>{
            Image(item.imageUrl)
              .width('100%')
              .objectFit(ImageFit.Auto)
              .sharedTransition(item.uniqueId,{
                duration: 300
              })
          })
        }
        .height('100%')
        .index(this.imageIndex)
      }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Black)
      .justifyContent(FlexAlign.Center)
      .sharedTransition('bg',{ // 设置淡入淡出的效果
        duration: 300,
        type: SharedTransitionEffectType.Static
      })
      .onClick(()=>{
        router.back()
      })
    }
  }

  // 去掉页面转场动画
  pageTransition(){
    PageTransitionEnter({ type: RouteType.None, duration: 0 })
    PageTransitionExit({ type: RouteType.None, duration: 0 })
  }
}

最终呈现的效果如下:

【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验,HarmonyOS(鸿蒙开发),harmonyos,华为,鸿蒙开发,经验分析,页面路由

页面转场动画

两个页面发生跳转,一个页面消失,另一个页面出现,这时可以配置各自页面的页面转场参数实现自定义的页面转场效果。页面转场效果写在pageTransition函数中,通过PageTransitionEnter和PageTransitionExit指定页面进入和退出的动画效果。

PageTransitionEnter的接口为:

PageTransitionEnter({type?: RouteType, duration?: number, curve?: Curve | string, delay?:number)

PageTransitionExit的接口为:

PageTransitionExit({type?: RouteType, duration?: number, curve?: Curve|string, delay?:number})

上述接口定义了PageTransitionEnter和PageTransitionExit组件,可通过slide、 translate、 scale opacity属性定义不同的页面转场效果。对于PageTransitionEnter而言,这些效果表示入场时起点值,对于PageTransitionExit而言,这些效果表示退场的终点值,这一点与组件转场transition配置方法类似。此外,PageTransitionEnter提供了onEnter接口进行自定义页面入场动画的回调,PageTransitionExit提供了onExit接口进行自定义页面退场动画的回调。根据这个函数我们可以设置如下效果:

// 自定义动画
pageTransition(){
  PageTransitionEnter({
    duration: 1000,
    type: RouteType.None // 界面中的所有动画效果中,优先执行该自定义动画效果
  }).onEnter((type: RouteType, progress: number) => {

  }).slide(SlideEffect.Bottom) // 动画效果从下向上执行

  PageTransitionExit({
    duration: 1000,
    type: RouteType.None // 界面中的所有动画效果中,优先执行该自定义动画效果
  }).onExit((type: RouteType, progress: number) => {

  }).slide(SlideEffect.Right) // 动画效果从上向下执行
}

拿之前的朋友圈预览图片的案例进行举例,如下:

【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验,HarmonyOS(鸿蒙开发),harmonyos,华为,鸿蒙开发,经验分析,页面路由文章来源地址https://www.toymoban.com/news/detail-777563.html

到了这里,关于【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 文盘Rust——子命令提示,提高用户体验 | 京东云技术团队

    上次我们聊到 CLI 的领域交互模式。在领域交互模式中,可能存在多层次的子命令。在使用过程中如果全评记忆的话,命令少还好,多了真心记不住。频繁 --help 也是个很麻烦的事情。如果每次按 ‘tab’ 键就可以提示或补齐命令是不是很方便呢。这一节我们就来说说 ‘autoc

    2024年02月09日
    浏览(32)
  • 前端用户体验设计:创造卓越的用户界面和交互

    💂 个人网站:【工具大全】【游戏大全】【神级源码资源网】 🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】 💅 寻找学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 用户体验(User Experience,UX)是前端开发中至关重要的一环。一个优秀的用户体验

    2024年02月04日
    浏览(41)
  • 改变用户体验:Whirl动画加载库的无限可能

    哈喽!欢迎来到程序视点。今天小二哥要分享的不是 Animate.js,也不是 Move.js,而是能提供108种加载动画的库: Whirl . 让加载动画变得丰富多彩! 话不多说,直接来看例子。 以上只是冰山一角。whirl的CSS加载动画集合中有108种选项供你挑选。选中喜欢的动画后,点击“Grab th

    2024年02月06日
    浏览(47)
  • 多模态交互:利用多媒体元素提高用户满意度

    作者:禅与计算机程序设计艺术 在智能手机、平板电脑等新型移动终端上,用户通过不同类型的输入方式(触摸屏、触控笔、键盘)进行交互,包括语音、文本、手势、动作、图像、视频等多种形式。不同类型的输入方式都可以为应用提供丰富的内容和服务,如信息搜索、购

    2024年02月13日
    浏览(56)
  • 了解防抖和节流:提升前端交互体验的实用策略

    本文将重点介绍前端性能优化方法之一的防抖和节流。首先解释了它们的概念和原理,然后探讨了它们在前端开发中的应用场景,如输入框搜索、滚动事件等。最后,通过简单的代码示例展示了如何实现防抖和节流函数。通过学习和应用这两种技术,我们可以有效地减少不必

    2024年02月05日
    浏览(38)
  • 用户体验革命:Facebook如何重新定义社交交互

    在数字化的时代,社交媒体不仅仅是连接人与人之间的桥梁,更是用户体验不断演进的舞台。Facebook,作为全球最大的社交媒体平台之一,一直在努力通过创新和技术提升,重新定义社交交互,为用户带来更加丰富、便捷、个性化的社交体验。本文将深入探讨Facebook如何引领用

    2024年01月23日
    浏览(68)
  • 【PyQt5实现多线程更新UI】- 提高程序效率,优化用户体验

    【PyQt5实现多线程更新UI】- 提高程序效率,优化用户体验 在PyQt5应用程序的开发中,当程序需要处理大量数据或进行复杂的计算时,如果仅使用主线程,会导致GUI界面失去响应,用户体验较差。为了解决这个问题,通常需要使用多线程技术。 而在使用多线程时,往往需要更新

    2024年02月07日
    浏览(32)
  • HarmonyOS鸿蒙开发指南:基于ArkTS开发 轻量级智能穿戴 体验应用、构建布局、绘制样式​​​​​​​和交互事件

    目录 体验应用 构建布局 绘制样式​​​​​​​ 交互事件 HelloWorld工程目录如下图所示: 图1  目录结构 pages/index/index.hml

    2024年02月01日
    浏览(51)
  • 用户界面设计和交互设计中的用户体验个性化(AI)

    作者:禅与计算机程序设计艺术 随着互联网、移动互联网、物联网等新型信息技术的广泛应用,传统的静态网站在面对动态变化的需求时显得力不从心。因此,动态网站应运而生。动态网站能够更好地满足用户的需要,用户可以快速找到自己想要的信息、做出决策或进行交易

    2024年02月09日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包