OpenHarmony实战开发-动画曲线、如何实现动画衔接

2024-04-29 06:12

本文主要是介绍OpenHarmony实战开发-动画曲线、如何实现动画衔接,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

UI界面除了运行动画之外,还承载着与用户进行实时交互的功能。当用户行为根据意图变化发生改变时,UI界面应做到即时响应。例如用户在应用启动过程中,上滑退出,那么启动动画应该立即过渡到退出动画,而不应该等启动动画完成后再退出,从而减少用户等待时间。对于桌面翻页类从跟手到离手触发动画的场景,离手后动画的初始速度应承继手势速度,避免由于速度不接续导致停顿感的产生。针对以上场景,系统已提供动画与动画、手势与动画之间的衔接能力,保证各类场景下动画平稳光滑地过渡的同时,尽可能降低开发难度。

假设对于某一可动画属性,存在正在运行的动画。当UI侧行为改变该属性终点值时,开发者仅需在animateTo动画闭包中改变属性值或者改变animation接口作用的属性值,即可产生动画。系统会自动衔接之前的动画和当前的动画,开发者仅需要关注当前单次动画的实现。

import curves from '@ohos.curves'
class SetSlt{scaleToggle:boolean = trueset():void{this.scaleToggle = !this.scaleToggle;}
}
let CurAn:Record<string,curves> = {'curve':curves.springMotion()}
// 第一步:声明相关状态变量
@state scaleToggle: boolean = true;...
Column() {Button()// 第二步:将状态变量设置到相关可动画属性接口.scale(this.scaleToggle ? 1 : 0.5)// 第三步:通过点击事件改变状态变量值,影响可动画属性值.onclick(() => {let sets = new SetSlt()sets.set()})// 第四步:通过隐式动画接口开启隐式动画,动画终点值改变时,系统自动添加衔接动画.animation(CurAn)
}
...

完整示例如下。通过点击click,红色方块的缩放属性会发生变化。当连续快速点击click时,缩放属性的终点值连续发生变化,当前动画也会平滑过渡到朝着新的缩放属性终点值运动。

import curves from '@ohos.curves';
class SetSlt{isAnimation:boolean = trueset():void{this.isAnimation = !this.isAnimation;}
}
@Entry
@Component
struct AnimationToAnimationDemo {@State SetAnimation: SetSlt = new SetSlt();build() {Column() {Text('ArkUI').fontWeight(FontWeight.Bold).fontSize(12).fontColor(Color.White).textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xf56c6c).width(100).height(100).scale({ x: this.SetAnimation.isAnimation ? 2 : 1, y: this.SetAnimation.isAnimation ? 2 : 1 }).animation({ curve: curves.springMotion(0.4, 0.8) })Button('Click').margin({ top: 200 }).onClick(() => {this.SetAnimation.set()})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

在这里插入图片描述

手势与动画的衔接

使用滑动、捏合、旋转等手势的场景中,跟手过程中一般会触发属性的改变。离手后,这部分属性往往会继续发生变化,直到到达属性终点值。

离手阶段的属性变化初始速度应与离手前一刻的属性改变速度保持一致。如果离手后属性变化速度从0开始,就好像正在运行的汽车紧急刹车,造成观感上的骤变是用户和开发者都不希望看到的。

针对在手势和动画之间进行衔接的场景(如列表滑动),可以在跟手阶段每一次更改组件属性时,都做成使用跟手弹簧曲线的属性动画。离手时再用离手弹簧曲线产生离手阶段的属性动画。对于采用springMotion曲线的动画,离手阶段动画将自动继承跟手阶段动画的速度,并以跟手动画当前位置为起点,运动到指定的属性终点。

import curves from '@ohos.curves'
class SetOffset{offsetX:number = 0;offsetY:number = 0;set(x:number,y:number):void{this.offsetX = x;this.offsetY = y;}
}
// 第一步:声明相关状态变量
@state offsetX: number = 0;
@State offsetY: number = 0;
targetOffsetX: number = 100;
targetOffsetY: number = 100;
...
Column() // 第二步:将状态变量设置到相关可动画属性接口.translate({ x: this.offsetX, y: this.offsetY}).gesture(PanGesture({}).onActionUpdate((event?: GestureEvent) => {// 第三步:在跟手过程改变状态变量值,并且采用reponsiveSpringMotion动画运动到新的值animateTo({curve: curves.responsiveSpringMotion()}, () => {if(event){let setxy = new SetOffset();setxy.set(event.offsetX,event.offsetY)}})}).onActionEnd(() => {// 第四步:在离手过程设定状态变量终点值,并且用springMotion动画运动到新的值,springMotion动画将继承跟手阶段的动画速度animateTo({curve: curves.SpringMotion()}, () => {let setxy = new SetOffset();setxy.set(targetOffsetX,targetOffsetY)})}))
...

完整的示例和效果如下。

import curves from '@ohos.curves';@Entry
@Component
struct SpringMotionDemo {@State positionX: number = 100;@State positionY: number = 100;diameter: number = 50;build() {Column() {Row() {Circle({ width: this.diameter, height: this.diameter }).fill(Color.Blue).position({ x: this.positionX, y: this.positionY }).onTouch((event?: TouchEvent) => {if(event){if (event.type === TouchType.Move) {// 跟手过程,使用responsiveSpringMotion曲线animateTo({ curve: curves.responsiveSpringMotion() }, () => {// 减去半径,以使球的中心运动到手指位置this.positionX = event.touches[0].windowX - this.diameter / 2;this.positionY = event.touches[0].windowY - this.diameter / 2;console.info(`move, animateTo x:${this.positionX}, y:${this.positionY}`);})} else if (event.type === TouchType.Up) {// 离手时,使用springMotion曲线animateTo({ curve: curves.springMotion() }, () => {this.positionX = 100;this.positionY = 100;console.info(`touchUp, animateTo x:100, y:100`);})}}})}.width("100%").height("80%").clip(true) // 如果球超出父组件范围,使球不可见.backgroundColor(Color.Orange)Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Center }) {Text("拖动小球").fontSize(16)}.width("100%")Row() {Text('点击位置: [x: ' + Math.round(this.positionX) + ', y:' + Math.round(this.positionY) + ']').fontSize(16)}.padding(10).width("100%")}.height('100%').width('100%')}
}

在这里插入图片描述

如果大家还没有掌握鸿蒙,现在想要在最短的时间里吃透它,我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP开发教程步骤:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发学习手册》:

如何快速入门:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

在这里插入图片描述

开发基础知识:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

在这里插入图片描述

基于ArkTS 开发:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

这篇关于OpenHarmony实战开发-动画曲线、如何实现动画衔接的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

pandas中位数填充空值的实现示例

《pandas中位数填充空值的实现示例》中位数填充是一种简单而有效的方法,用于填充数据集中缺失的值,本文就来介绍一下pandas中位数填充空值的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是中位数填充?为什么选择中位数填充?示例数据结果分析完整代码总结在数据分析和机器学习过程中,处理缺失数

Golang HashMap实现原理解析

《GolangHashMap实现原理解析》HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持高效的插入、查找和删除操作,:本文主要介绍GolangH... 目录HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

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

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

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组