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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/831744.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SSD能否全面取代HDD?

硬盘制造商希捷希望我们理解关于固态硬盘&#xff08;SSD&#xff09;取代传统硬盘&#xff08;HDD&#xff09;这一神话背后的三个真相&#xff1a;SSD价格不会与旋转磁盘价格相匹配&#xff0c;SSD制造产能无法与HDD产能相匹敌&#xff0c;以及SSD并不适合近线硬盘工作负载。…

特斯拉FSD落地分析

再续前缘 媒体的神经从马斯克的湾流私人飞机起飞那一刻开始,就开始被牵动着。28/4 号的突然访华,在大多数人看来其实已经早已是计划之中,从摆在台面上的消息来看,主要目的是为了在大陆推广FSD的落地,也为8月份FSD 的正式版本做预热,和中国上海的第一次联姻造就了特斯拉m…

孪生网络、匹配网络和原型网络:详解与区分

孪生网络、匹配网络和原型网络 孪生网络、匹配网络和原型网络&#xff1a;详解与区分孪生网络&#xff08;Siamese Networks&#xff09;核心概念工作原理 匹配网络&#xff08;Matching Networks&#xff09;核心概念工作原理 原型网络&#xff08;Prototypical Networks&…

.NET高级面试指南专题二十九【备忘录模式介绍,用于需要撤销操作或在发生错误时恢复对象状态的情况】

备忘录模式是一种行为型设计模式&#xff0c;用于捕获对象的内部状态并在不破坏其封装性的情况下将其保存&#xff0c;以便稍后可以将对象恢复到先前的状态。这种模式通常用于需要撤销操作或在发生错误时恢复对象状态的情况。 原理 备忘录模式包含以下几个关键角色&#xff1a;…

基于yolov2深度学习网络模型的鱼眼镜头中人员检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 load yolov2.mat% 加载训练好的目标检测器 img_size [448,448]; imgPath test/; % 图像…

2023第十四届蓝桥杯国赛C/C++ 大学 A 组 圆上的连线

思路&#xff1a;很显然总的方案数等于挑选偶数点的方案数乘以对应偶数点的连线方案数之和&#xff0c;挑选偶数点的方案数靠组合数得出&#xff0c;偶数点的连线方案数就是个卡特兰数。具体为什么是卡特兰数&#xff0c;可以任选一个点&#xff0c;枚举这个点所连边的位置&…

GZIPOutputStream JSON压缩

一、背景 小王瞥了一眼历史记录表&#xff0c;不禁惊呼&#xff1a;“这表怎么这么大&#xff1f;”同事们闻声纷纷围拢过来查看。仔细一瞧&#xff0c;发现这个表的大小竟然超过了3G。主管随即指示小王打开相应的表数据检查&#xff0c;发现其中存储了用户的权限信息&#xf…

【编译原理】程序运行的四个阶段,从源代码到可执行文件的完整过程解析

引言 程序的运行过程经历了多个阶段&#xff0c;从源代码到最终的可执行文件&#xff0c;涉及了预处理、编译、汇编和链接等步骤。本篇博客将深入解析程序运行的四个主要阶段&#xff0c;并结合一个简单的示例来说明每个阶段的作用。 四个阶段 阶段一&#xff1a;预处理&…

算法提高之二维费用的背包问题

算法提高之二维费用的背包问题 核心思想&#xff1a;二维01背包 每个物品只能用一次 所以是01背包模板用f[j][k] 表示第一维费用不超过V 第二维费用不超过M的方案 #include <iostream>#include <cstring>#include <algorithm>using namespace std;const i…

2011NOIP普及组真题 2. 统计单词数

线上OJ&#xff1a; 一本通&#xff1a;http://ybt.ssoier.cn:8088/problem_show.php?pid1954 核心思想 1、本题中比较单词不考虑大小写&#xff0c;所以在比较前先统一转换为小写或者大写。然后再比较即可。 2、由于 s2 会有前导空格&#xff0c;且可能单词之间的空格不止1个…

第五篇:通信脉络:探索计算机外设与总线体系的精髓

通信脉络&#xff1a;探索计算机外设与总线体系的精髓 1 引言 在这个技术日新月异的时代&#xff0c;理解计算机系统的基本构成要素 —— 总线和外设 —— 对于每个从事技术工作的人来说都是至关重要的。这些组件不仅是计算机通信的基石&#xff0c;也直接影响着系统的性能、效…

Enum,你学会了吗?

大家后&#xff0c;我是小七。 今天给大家分享下java.lang包下面Enum类的面试点&#xff0c;本文阅读需3分钟。 Java轮子 分享程序员日常、职场、互联网项目、开发经验&#xff0c;专注技术提升 12篇原创内容 公众号 在 Java 编程中&#xff0c;枚举类型&#xff08;Enum&…

水仙花数问题

问题描述&#xff1a; 求出0&#xff5e;100000之间的所有“水仙花数”并输出。 “水仙花数”是指一个n位数&#xff0c;其各位数字的n次方之和确好等于该数本身&#xff0c;如:153&#xff1d;1^3&#xff0b;5^3&#xff0b;3^3&#xff0c;则153是一个“水仙花数”。 #in…

一个完全免费、私有且本地运行的搜索聚合器-FreeAskInternet

什么是 FreeAskInternet FreeAskInternet 是一个完全免费、私有且本地运行的搜索聚合器&#xff0c;使用 LLM 生成答案&#xff0c;无需 GPU。用户可以提出一个问题&#xff0c;系统将使用 searxng 进行多引擎搜索&#xff0c;并将搜索结果组合到 ChatGPT3.5 LLM 中&#xff0…

迁移数据前,如何确保Oracle与Hive表中字段数量的一致性

在数据库迁移项目中&#xff0c;确保源数据库和目标数据库的表结构一致性是至关重要的。当从Oracle迁移到Hive时&#xff0c;虽然两者在架构和查询语言上存在差异&#xff0c;但字段数量的一致性检查仍然是一个基本的步骤。本文将介绍如何检查Oracle中的表的字段和Hive表中的字…

如何优雅的分析你的微信朋友圈和聊天记录

微信朋友圈、个人聊天记录、微信群聊天记录&#xff1a; 蓝奏云&#xff1a;链接:​www.lanzoub.com/b00rn0g47e 密码:9hww

Python中的enumerate函数详解

在Python编程中&#xff0c;我们经常需要在循环遍历一个序列时同时获取元素的索引和值。为了实现这一需求&#xff0c;Python提供了一个内置的enumerate函数&#xff0c;它能够方便地为我们提供序列中每个元素的索引和值。 enumerate函数 enumerate函数接受两个参数&#xff…

Pytorch基础:torch.load_state_dict()方法在加载时不会检查类型

相关阅读 Pytorch基础https://blog.csdn.net/weixin_45791458/category_12457644.html?spm1001.2014.3001.5482 笔者在使用torch.nn.module的load_state_dict中出现了一个问题&#xff0c;一个被注册的张量在加载后居然没有变化&#xff0c;一开始以为是加载出现了问题&#…

漏洞挖掘之某厂商OAuth2.0认证缺陷

0x00 前言 文章中的项目地址统一修改为: a.test.com 保护厂商也保护自己 0x01 OAuth2.0 经常出现的地方 1&#xff1a;网站登录处 2&#xff1a;社交帐号绑定处 0x02 某厂商绑定微博请求包 0x02.1 请求包1&#xff1a; Request: GET https://www.a.test.com/users/auth/weibo?…

SpringCloud微服务:Eureka 和 Nacos 注册中心

共同点 都支持服务注册和服务拉取都支持服务提供者心跳方式做健康检测 不同点 Nacos 支持服务端主动检测提供者状态&#xff1a;临时实例采用心跳模式&#xff0c;非临时&#xff08;永久&#xff09;实例采用主动检测模式Nacos 临时实例心跳不正常会被剔除&#xff0c;非临时实…