鸿蒙开发之两种动画
鸿蒙开发正当时,现在入手正是好时机。还在犹豫不决的朋友们,小编在这里建议大家早点入手!在这里分享一份鸿蒙学习路线图帮助那些不知道怎么入门的朋友,另外一些鸿蒙开发的资料文档也顺便分享给大家,扫下方二维码就能免费送呢!1、UI开发(ArkTS声明式开发范式)概述2、开发布局3、添加组件4、显示图片5、使用动画6、支持交互事件7、性能提升的推荐方法设置深色模式上传文件在新窗口中打开页面管理位置权限并发概
布局更新动画
显式动画和属性动画(animation)是ArkUI提供的最基础和常用的动画功能。在布局属性如尺寸属性、位置属性发生变化时,可以通过属性动画或显式动画,按照动画参数过渡到新的布局参数状态。
动画类型 | 特点 |
---|---|
显式动画 | 闭包内的变化均会触发动画,包括由数据变化引起的组件的增删、组件属性的变化等,可以做较为复杂的动画。 |
属性动画 | 动画设置简单,属性变化时自动触发动画。 |
使用显式动画产生布局更新动画
显式动画的接口为:
animateTo(value: AnimateParam, event: () => void): void
第一个参数指定动画参数,第二个参数为动画的闭包函数。
以下是使用显式动画产生布局更新动画的示例。示例中,当Column组件的alignItems属性改变后,其子组件的布局位置结果发生变化。只要该属性是在animateTo的闭包函数中修改的,那么由其引起的所有变化都会按照animateTo的动画参数执行动画过渡到终点值。
@Entry
@Component
struct LayoutChange {
// 用于控制Column的alignItems属性
@State itemAlign: HorizontalAlign = HorizontalAlign.Start;
allAlign: HorizontalAlign[] = [HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End];
alignIndex: number = 0;
build() {
Column() {
Column({ space: 10 }) {
Button("1").width(100).height(50)
Button("2").width(100).height(50)
Button("3").width(100).height(50)
}
.margin(20)
.alignItems(this.itemAlign)
.borderWidth(2)
.width("90%")
.height(200)
Button("click").onClick(() => {
// 动画时长为1000ms,曲线为EaseInOut
animateTo({ duration: 1000, curve: Curve.EaseInOut }, () => {
this.alignIndex = (this.alignIndex + 1) % this.allAlign.length;
// 在闭包函数中修改this.itemAlign参数,使Column容器内部孩子的布局方式变化,使用动画过渡到新位置
this.itemAlign = this.allAlign[this.alignIndex];
});
})
}
.width("100%")
.height("100%")
}
}
除直接改变布局方式外,也可直接修改组件的宽、高、位置。
@Entry
@Component
struct LayoutChange2 {
@State myWidth: number = 100;
@State myHeight: number = 50;
// 标志位,true和false分别对应一组myWidth、myHeight值
@State flag: boolean = false;
build() {
Column({ space: 10 }) {
Button("text")
.type(ButtonType.Normal)
.width(this.myWidth)
.height(this.myHeight)
.margin(20)
Button("area: click me")
.fontSize(12)
.margin(20)
.onClick(() => {
animateTo({ duration: 1000, curve: Curve.Ease }, () => {
// 动画闭包中根据标志位改变控制第一个Button宽高的状态变量,使第一个Button做宽高动画
if (this.flag) {
this.myWidth = 100;
this.myHeight = 50;
} else {
this.myWidth = 200;
this.myHeight = 100;
}
this.flag = !this.flag;
});
})
}
.width("100%")
.height("100%")
}
}
在第二个Button的点击事件中,使用animateTo函数,在闭包中修改this.myWidth和this.myHeight状态变量,而这两个状态变量分别为第一个Button的宽、高属性值,所以第一个Button做了宽高动画。
与此同时,第二个Button也产生了一个位置动画。这是由于第一个Button的宽高变化后,引起了Column内部其他组件的布局结果也发生了变化,第二个Button的布局发生变化也是由于闭包内改变第一个Button的宽高造成的。
如果不希望第二个Button有动画效果,有两种方式可以实现。一种是给做第一个Button外面再加一个容器,使其动画前后的大小都在容器的范围内,这样第二个Button的位置不会被第一个Button的位置所影响。修改后的核心代码如下。
Column({ space: 10 }) {
Column() {
// Button放在足够大的容器内,使其不影响更外层的组件位置
Button("text")
.type(ButtonType.Normal)
.width(this.myWidth)
.height(this.myHeight)
}
.margin(20)
.width(200)
.height(100)
Button("area: click me")
.fontSize(12)
.onClick(() => {
animateTo({ duration: 1000, curve: Curve.Ease }, () => {
// 动画闭包中根据标志位改变控制第一个Button宽高的状态变量,使第一个Button做宽高动画
if (this.flag) {
this.myWidth = 100;
this.myHeight = 50;
} else {
this.myWidth = 200;
this.myHeight = 100;
}
this.flag = !this.flag;
});
})
}
.width("100%")
.height("100%")
另一种方式是给第二个Button添加布局约束,如position的位置约束,使其位置不被第一个Button的宽高影响。核心代码如下:
Column({ space: 10 }) {
Button("text")
.type(ButtonType.Normal)
.width(this.myWidth)
.height(this.myHeight)
.margin(20)
Button("area: click me")
.fontSize(12)
// 配置position属性固定,使自己的布局位置不被第一个Button的宽高影响
.position({ x: "30%", y: 200 })
.onClick(() => {
animateTo({ duration: 1000, curve: Curve.Ease }, () => {
// 动画闭包中根据标志位改变控制第一个Button宽高的状态变量,使第一个Button做宽高动画
if (this.flag) {
this.myWidth = 100;
this.myHeight = 50;
} else {
this.myWidth = 200;
this.myHeight = 100;
}
this.flag = !this.flag;
});
})
}
.width("100%")
.height("100%")
使用属性动画产生布局更新动画
显式动画把要执行动画的属性的修改放在闭包函数中触发动画,而属性动画则无需使用闭包,把animation属性加在要做属性动画的组件的属性后即可。
属性动画的接口为:
animation(value: AnimateParam)
其入参为动画参数。想要组件随某个属性值的变化而产生动画,此属性需要加在animation属性之前。有的属性变化不希望通过animation产生属性动画,可以放在animation之后。上面显式动画的示例很容易改为用属性动画实现。例如:
@Entry
@Component
struct LayoutChange2 {
@State myWidth: number = 100;
@State myHeight: number = 50;
@State flag: boolean = false;
@State myColor: Color = Color.Blue;
build() {
Column({ space: 10 }) {
Button("text")
.type(ButtonType.Normal)
.width(this.myWidth)
.height(this.myHeight)
// animation只对其上面的type、width、height属性生效,时长为1000ms,曲线为Ease
.animation({ duration: 1000, curve: Curve.Ease })
// animation对下面的backgroundColor、margin属性不生效
.backgroundColor(this.myColor)
.margin(20)
Button("area: click me")
.fontSize(12)
.onClick(() => {
// 改变属性值,配置了属性动画的属性会进行动画过渡
if (this.flag) {
this.myWidth = 100;
this.myHeight = 50;
this.myColor = Color.Blue;
} else {
this.myWidth = 200;
this.myHeight = 100;
this.myColor = Color.Pink;
}
this.flag = !this.flag;
})
}
}
}
上述示例中,第一个button上的animation属性,只对写在animation之前的type、width、height属性生效,而对写在animation之后的backgroundColor、margin属性无效。运行结果是width、height属性会按照animation的动画参数执行动画,而backgroundColor会直接跳变,不会产生动画。
-
使用属性动画时,会按照指定的属性动画参数执行动画。每个组件可为自己的属性配置不同参数的属性动画。
-
显式动画会对动画闭包前后造成的所有界面差异执行动画,且使用同一动画参数,适用于统一执行的场景。此外,显式动画也可以用于一些非属性变量造成的动画,如if/else的条件,ForEach使用的数组元素的删减。
-
如果一个属性配置了属性动画,且在显式动画闭包中改变该属性值,属性动画优先生效,会使用属性动画的动画参数。
最后
鸿蒙开发正当时,现在入手正是好时机。
还在犹豫不决的朋友们,小编在这里建议大家早点入手!
在这里分享一份鸿蒙学习路线图帮助那些不知道怎么入门的朋友,另外一些鸿蒙开发的资料文档也顺便分享给大家,扫下方二维码就能免费送呢!
鸿蒙学习路线图
路线图适合人群:
- IT开发人员:想要拓展职业边界,享受新技术带来的溢价红利
- 零基础小白:鸿蒙爱好者,希望从0到1学习,增加一项技能
HarmonyOS 4.0 APP Developer
OpenHarmony 5.0 Next视音频
OpenHarmony 5.0 Next进阶
OpenHarmony 5.0 Next分布式
学习资料
内容概要:《鸿蒙零基础入门学习指南》、《鸿蒙开发学习之UI》、《鸿蒙开发学习之Web》、《鸿蒙开发学习之应用模型》
内容特点:条理清晰,含图像化表示更加易懂。
领取方式:扫描下方二维码即可免费领取!!!
《鸿蒙零基础入门学习指南》
一、快速入门
适用于HarmonyOS应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用,快速了解工程目录的主要文件,熟悉HarmonyOS应用开发流程。
- 开发准备
- 构建第一个ArkTS应用(Stage模型)
- 构建第一个ArkTS应用(FA模型)
- 构建第一个JS应用(FA模型)
二、开发基础知识
- 应用程序包基础知识
- 应用配置文件(Stage模型)
- 应用配置文件概述(FA模型)
三、资源分类与访问
应用开发过程中,经常需要用到颜色、字体、间距、图片等资源,在不同的设备或配置中,这些资源的值可能不同。
- 资源分类与访问
- 创建资源目录和资源文件
- 资源访问
四、学习ArkTs语言
ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展,继承了TS的所有特性,是TS的超集。因此,在学习ArkTS语言之前,建议开发者具备TS语言开发能力。
- 初识ArkTS语言
- 基本语法
- 状态管理
- 其他状态管理
- 渲染控制
领取方式:扫描下方二维码即可免费领取!!!
《鸿蒙开发学习之UI》
一、方舟开发框架(ArkUI)概述
二、基于ArkTS声明式开发范式
- 1、UI开发(ArkTS声明式开发范式)概述
- 2、开发布局
- 3、添加组件
- 4、显示图片
- 5、使用动画
- 6、支持交互事件
- 7、性能提升的推荐方法
三、兼容JS的类Web开发范式
- 1、概述
- 2、框架说明
- 3、构建用户界面
- 4、常见组件开发指导
- 5、动效开发指导
- 6、自定义组件
领取方式:扫描下方二维码即可免费领取!!!
《鸿蒙开发学习之Web》
Web组件概述
使用Web组件加载页面
设置基本属性和事件
- 设置深色模式
- 上传文件
- 在新窗口中打开页面
- 管理位置权限
在应用中使用前端页面JavaScript
- 应用侧调用前端页面函数
- 前端页面调用应用侧函数
- 建立应用侧与前端页面数据通道
- 管理页面跳转及浏览记录导航
- 管理Cookie及数据存储
- 自定义页面请求响应
- 使用Devtools工具调试前端页面
ArkTS语言基础类库概述
并发
- 并发概述
- 使用异步并发能力进行开发
- 使用多线程并发能力
- 容器类库
- XML生成、解析、与转换
- 通知
窗口管理
- 窗口开发概述
- 管理应用窗口(Stage模型)
- 管理应用窗口(FA模型)
WebGL
- 概述
- WebGL开发指导
媒体
- 媒体应用开发概念
- 图片
安全
- 访问控制
- ohos.permission.USE_BLUETOOTH
- ohos.permission.DISCOVER_BLUETOOTH
- ohos.permission.MANAGE_BLUETOOTH
- ohos.permission.INTERNET
- ohos.permission.INTERNET
- …
网络与连接
- 网络管理
- IPC与RPC通信
电话服务
- 电话服务开发概述
- 跳转拨号页面
- 获取当前蜂窝网络信号信息
数据管理
- 数据管理概述
- 应用数据持久化
- 场景介绍
- 运作机制
- 约束限制
- 接口说明
- …
文件管理
- 文件管理概述
- 应用文件
- 用户文件
- 分布式文件系统
后台任务管理
- 后台任务总体概述
- 短时任务
- 长时任务
- 延时任务
- 代理提醒
设备管理
- USB服务
- 位置服务
- 传感器
- 分布式跟踪开发指导
- 错误管理
- …
国际化
- 国际化开发概述
- Intl开发指导
- I18n开发指导
应用测试
- 自动化测试框架使用指南
Native API相关指导
- Native API在应用工程中的使用指导
- Drawing开发指导
- Rawfile开发指导
- NativeWindow 开发指导
- …
领取方式:扫描下方二维码即可免费领取!!!
《鸿蒙开发学习之应用模型》
应用模型概述
- 应用模型的构成要素
- 应用模型解读
Stage模型开发指导
- Stage模型开发概述
- Stage模型应用组件
FA模型开发指导
- FA模型开发概述
- FA模型应用组件配置
- 进程模型
- 线程模型
领取方式:扫描下方二维码即可免费领取!!!
更多推荐
所有评论(0)