鸿蒙HarmonyOS开发:如何灵活运用动画效果提升用户体验

本文主要是介绍鸿蒙HarmonyOS开发:如何灵活运用动画效果提升用户体验,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

      • 一、动画概述
        • 1、动画的目的
      • 二、显式动画 (animateTo)
        • 1、接口
        • 2、参数
        • 3、AnimateParam对象说明
        • 4、示例
        • 5、效果
      • 三、属性动画 (animation)
        • 1、接口
        • 2、参数
        • 3、AnimateParam对象说明
        • 4、系统可动画属性
        • 4、示例
        • 5、效果

一、动画概述

动画的原理是在一个时间段内,多次改变UI外观,由于人眼会产生视觉暂留,所以最终看到的就是一个“连续”的动画。UI的一次改变称为一个动画帧,对应一次屏幕刷新,而决定动画流畅度的一个重要指标就是帧率FPS(Frame Per Second),即每秒的动画帧数,帧率越高则动画就会越流畅。

ArkUI中,产生动画的方式是改变属性值且指定动画参数。动画参数包含了如动画时长、变化规律(即曲线)等参数。当属性值发生变化后,按照动画参数,从原来的状态过渡到新的状态,即形成一个动画。

UI(用户界面)中包含开发者与设备进行交互时所看到的各种组件(如时间、壁纸等)。属性作为接口,用于控制组件的行为。例如,开发者可通过位置属性调整组件在屏幕上的位置。

属性值的变化,通常会引起UI的变化。动画可在UI发生改变时,添加流畅的过渡效果。如果不加入动画,属性将在一瞬间完成变化。造成突兀感的同时,容易导致用户失去视觉焦点。

1、动画的目的
  • 使界面的过渡自然流畅。
  • 增强用户从界面获得的反馈感和互动感。
  • 在内容加载等场景中,增加用户的耐心,缓解等待带来的不适感。
  • 引导用户了解和操作设备。

在需要为UI变化添加过渡的场景,都可以使用动画,如开机、应用启动退出、下拉进入控制中心等。这些动画可向用户提供关于其操作的反馈,并有助于让用户始终关注界面。

二、显式动画 (animateTo)

提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。同属性动画,布局类改变宽高的动画,内容都是直接到终点状态,例如文字、Canvas的内容、linearGradient等,如果要内容跟随宽高变化,可以使用renderFit属性配置。

1、接口
animateTo(value: AnimateParam, event: () => void): void
2、参数
参数类型是否必填描述
valueAnimateParam设置动画效果相关参数。
event() => void指定动效的闭包函数,在闭包函数中导致的状态变化系统会自动插入过渡动画。
3、AnimateParam对象说明
名称类型是否必填描述
durationnumber动画持续时间,单位为毫秒。默认值:1000
temponumber动画播放速度,值越大动画播放越快,值越小播放越慢,为0时无动画效果。默认值:1
curveCurve 、 ICurve9+ 、 string动画曲线。默认值:Curve.EaseInOut
delaynumber动画延迟播放时间,单位为ms(毫秒),默认不延时播放。默认值:0
iterationsnumber动画播放次数。默认播放一次,设置为-1时表示无限次播放。设置为0时表示无动画效果。默认值:1
playModePlayMode动画播放模式,默认播放完成后重头开始播放。默认值:PlayMode.Normal
onFinish() => void动画播放完成回调。
4、示例
  • 实现应用欢迎页的动画效果
  • 延迟0.5s自动跳转到首页
  • @Styles装饰器、@Extend装饰器的使用
import router from '@ohos.router'@Entry
@Component
struct AnimateTo {@State isShow: boolean = false@State title: string = '快速单词记忆神器'@State message: string = "Falling in love with memorizing words"onPageShow() {animateTo({duration: 800,onFinish: () => {setTimeout(() => {router.replaceUrl({url: "pages/Index"})}, 500)}}, () => {this.isShow = true})}build() {Column() {if (this.isShow) {Image($r("app.media.logo")).logoStyle().transition({type: TransitionType.Insert,opacity: 0,translate: { x: -160 }})Text(this.title).titleStyle().transition({type: TransitionType.Insert,opacity: 0,translate: { x: 160 }})}Blank()Text(this.message).footerStyle()}.bgStyle()}
}@Styles function bgStyle() {.width('100%').height('100%').backgroundImage($r('app.media.img_splash_bg')).backgroundImageSize({ width: '100%', height: '100%' })
}@Extend(Text) function titleStyle() {.fontSize(20).fontColor(Color.White).fontWeight(FontWeight.Bold).margin({ top: 30 })
}@Extend(Image) function logoStyle() {.width(90).height(90).margin({ top: 120 })
}@Extend(Text) function footerStyle() {.fontSize(12).fontColor('#546B9D').fontWeight(FontWeight.Bold).margin({ bottom: 30 })
}
5、效果

在这里插入图片描述

三、属性动画 (animation)

组件的某些通用属性变化时,可以通过属性动画实现渐变过渡效果,提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。布局类改变宽高的动画,内容都是直接到终点状态,例如文字、Canvas的内容、linearGradient等,如果要内容跟随宽高变化,可以使用renderFit属性配置。

1、接口
animation(value:AnimateParam)
2、参数
参数类型是否必填描述
valueAnimateParam设置动画效果相关参数。
3、AnimateParam对象说明

同显式动画 (animateTo)

4、系统可动画属性
分类说明
布局属性位置、大小、内边距、外边距、对齐方式、权重等。
仿射变换平移、旋转、缩放、锚点等。
背景背景颜色、背景模糊等。
内容文字大小、文字颜色,图片对齐方式、模糊等。
前景前景颜色等。
OverlayOverlay属性等。
外观透明度、圆角、边框、阴影等。
4、示例

只对写在animation之前的属性生效,而对写在animation之后的属性无效。

@Entry
@Component
struct AnimationPage {@State message: string = 'Hello World'@State myWidth: number = 300;@State myHeight: number = 200;@State flag: boolean = false;@State myColor: Color = Color.Blue;build() {Column({space:20}) {Text(this.message).textAlign(TextAlign.Center).fontColor(Color.White).fontSize(20).fontWeight(FontWeight.Bold).width(this.myWidth).height(this.myHeight).backgroundColor(this.myColor).animation({ duration: 1000, curve: Curve.Linear })Button("属性动画").fontSize(16).width(200).onClick(() => {if (this.flag) {this.myWidth = 300;this.myHeight = 200;this.myColor = Color.Blue;} else {this.myWidth = 200;this.myHeight = 100;this.myColor = Color.Pink;}this.flag = !this.flag;})}.padding(20).width('100%').height('100%')}
}
5、效果

在这里插入图片描述

这篇关于鸿蒙HarmonyOS开发:如何灵活运用动画效果提升用户体验的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1093416

相关文章

SpringBoot UserAgentUtils获取用户浏览器的用法

《SpringBootUserAgentUtils获取用户浏览器的用法》UserAgentUtils是于处理用户代理(User-Agent)字符串的工具类,一般用于解析和处理浏览器、操作系统以及设备... 目录介绍效果图依赖封装客户端工具封装IP工具实体类获取设备信息入库介绍UserAgentUtils

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

Mysql用户授权(GRANT)语法及示例解读

《Mysql用户授权(GRANT)语法及示例解读》:本文主要介绍Mysql用户授权(GRANT)语法及示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql用户授权(GRANT)语法授予用户权限语法GRANT语句中的<权限类型>的使用WITH GRANT

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S

鸿蒙中Axios数据请求的封装和配置方法

《鸿蒙中Axios数据请求的封装和配置方法》:本文主要介绍鸿蒙中Axios数据请求的封装和配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1.配置权限 应用级权限和系统级权限2.配置网络请求的代码3.下载在Entry中 下载AxIOS4.封装Htt

鸿蒙中@State的原理使用详解(HarmonyOS 5)

《鸿蒙中@State的原理使用详解(HarmonyOS5)》@State是HarmonyOSArkTS框架中用于管理组件状态的核心装饰器,其核心作用是实现数据驱动UI的响应式编程模式,本文给大家介绍... 目录一、@State在鸿蒙中是做什么的?二、@Spythontate的基本原理1. 依赖关系的收集2.

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版:拆分成模块让模块更强大:使用 __init__.py你一定会遇到的问题模www.

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

Spring Security方法级安全控制@PreAuthorize注解的灵活运用小结

《SpringSecurity方法级安全控制@PreAuthorize注解的灵活运用小结》本文将带着大家讲解@PreAuthorize注解的核心原理、SpEL表达式机制,并通过的示例代码演示如... 目录1. 前言2. @PreAuthorize 注解简介3. @PreAuthorize 核心原理解析拦截与