06:动画和网络
动画概述
ArkUI中,产生动画的方式是改变属性值且指定动画参数。动画参数包含了如动画时长、变化规律(即曲线)等参数。当属性值发生变化后,按照动画参数,从原来的状态过渡到新的状态,即形成一个动画。
AnimateParam对象说明
名称 | 类型 | 描述 |
---|---|---|
duration | number | 动画持续时间,单位为毫秒。默认值:1000从API version 9开始,该接口支持在ArkTS卡片中使用。说明:- 在ArkTS卡片上最大动画持续时间为1000毫秒,若超出则固定为1000毫秒。- 设置浮点型类型的值时,向下取整。例如,设置值为1.2,按照1处理。 |
tempo | number | 动画的播放速度,值越大动画播放越快,值越小播放越慢,为0时无动画效果。默认值:1.0 |
curve | Curve | ICurve | string | 动画曲线。默认值:Curve.EaseInOut从API version 9开始,该接口支持在ArkTS卡片中使用。 |
delay | number | 单位为ms(毫秒),默认不延时播放。默认值:0说明:- 设置浮点型类型的值时,向下取整。例如,设置值为1.2,按照1处理。 |
iterations | number | 默认播放一次,设置为-1时表示无限次播放。默认值:1 |
playMode | PlayMode | 设置动画播放模式,默认播放完成后重头开始播放。默认值:PlayMode.Normal从API version 9开始,该接口支持在ArkTS卡片中使用。相关使用约束请参考PlayMode说明。 |
onFinish | () => void | 动效播放完成回调。从API version 9开始,该接口支持在ArkTS卡片中使用。 |
动画分类
- ArkUI提供的动画能力按照页面的分类方式,可分为页面内的动画和页面间的动画。页面内的动画指在一个页面内即可发生的动画,页面间的动画指两个页面跳转时才会发生的动画。
- 如果按照基础能力分,可分为属性动画、显式动画、转场动画三部分。
按照页面分类的动画
按照基础能力分类的动画
页面内的动画
布局更新动画
- 使用显式动画产生布局更新动画
- 使用属性动画产生布局更新动画
显式动画(animateTo)和属性动画(animation)是ArkUI提供的最基础和常用的动画功能。在布局属性(如尺寸属性、位置属性)发生变化时,可以通过属性动画或显式动画,按照动画参数过渡到新的布局参数状态。
动画类型 | 特点 |
---|---|
显式动画 (函数) | 闭包内的变化均会触发动画,包括由数据变化引起的组件的增删、组件属性的变化等,可以做较为复杂的动画。 |
属性动画 (属性方法) | 动画设置简单,属性变化时自动触发动画。(属性值的变化需要加在animation属性之前) |
使用显式动画产生布局更新动画
显式动画的接口为:
animateTo(value: AnimateParam, event: () => void): void
第一个参数指定动画参数,第二个参数为动画的闭包函数。
案例:位置变化
// 显示动画 : 位置变化
@Entry
@Component
struct LayoutChange {
// 用于控制Column的alignItems属性
@State itemAlign: HorizontalAlign = HorizontalAlign.Start;
allAlign: HorizontalAlign[] = [HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End];
alignIndex: number = 0;
build() {
Column({space:30}) {
Text('点击修改布局位置').fontSize(30).margin({top:100})
Column({ space: 10 }) {
Button("帝心").width(100).height(50)
Button("庄生").width(100).height(50)
Button("周道").width(100).height(50)
}
.margin(20)
.alignItems(this.itemAlign)
.justifyContent(FlexAlign.Center)
.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];
});
})
.fontSize(30)
}
.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("change:尺寸")
.type(ButtonType.Normal)
.width(this.myWidth)
.height(this.myHeight)
.margin(20)
Button(this.flag ? '变小' : '变大')
.fontSize(20)
.position({ x: "40%", y: 250 })
.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%")
}
}