程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java、嵌入式、鸿蒙、人工智能等,专注于程序员成长那点儿事,希望在成长的路上有你相伴！君志所向,一往无前！
属性动画-animation
属性值的变化，通常会引发 UI 的变化,结合动画可以让这个变化过程更为流畅，反之这个过程将在一瞬间完成，用户体验不好，观感突兀。
组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。
支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
基本使用
使用动画的核心步骤如下：
- 声明相关状态变量
- 将状态变量设置到相关可动画属性接口
- 通过属性动画接口开启属性动画（在属性动画上面的属性会应用动画）
- 通过状态变量改变UI界面
@Entry
@Component
struct Index {
// 1. 声明相关状态变量
@State y: number = 10
@State bgColor: ResourceColor = Color.Red
@State fontColor: ResourceColor = '#0094ff'
@State fontWeight: number = 100
build() {
Column() {
Text('Feri')
.width(100)
.height(100)
.opacity(1)
// 2.将状态变量设置到相关可动画属性接口
.fontWeight(this.fontWeight)
.backgroundColor(this.bgColor)
.textAlign(TextAlign.Center)
.translate({ y: this.y })
Button('修改状态变量')
.onClick(() => {
// 4. 通过状态变量改变UI界面
this.bgColor = '#0094ff'
this.translateY = 100
this.fontColor = Color.Green
this.fontWeight = 900
})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.SpaceAround)
}
}
常用属性
可以通过动画参数(以对象的形式传递)来定制动画效果组件
动画曲线枚举值：
playMode 播放模式枚举值
效果实现
需求：
- 动画效果:
a. 元素大小切换
b. 动画次数无限，元素【加载之后】开启动画
@Entry
@Component
struct Index {
// 1. 声明相关状态变量
@State scaleX: number = 1
@State scaleY: number = 1
build() {
Column({ space: 50 }) {
Text('全场低至一分购')
.fontSize(30)
.fontWeight(900)
.fontColor(Color.Red)
.backgroundColor('#e8b66d')
.padding(10)
.borderRadius(20)// 2.将状态变量设置到相关可动画属性接口
.scale({
x: this.scaleX,
y: this.scaleY
})// 3. 通过属性动画接口开启属性动画
.animation({
duration: 1000,
curve: Curve.Ease,
playMode: PlayMode.Alternate,
iterations: -1
})
.onClick(() => {
// 4.通过状态变量改变UI界面
this.scaleX = 1.3
this.scaleY = 1.3
})
}
.width('100%')
.height('100%')
.padding(20)
}
@Styles
fullSize() {
.width('100%')
.height('100%')
}
}
组件加载自动触发
如果要实现元素加载的时候就开始动画，可以使用挂载事件来实现，这是一个通用事件
名称
支持冒泡
功能描述
onAppear(event: () => void)
否
组件挂载显示时触发此回调。从API version 9开始，该接口支持在ArkTS卡片中使用。
onDisAppear(event: () => void)
否
组件卸载消失时触发此回调。从API version 9开始，该接口支持在ArkTS卡片中使用。
效果实现-优化
@Entry
@Component
struct Index {
// 1. 声明相关状态变量
@State scaleX: number = 1
@State scaleY: number = 1
build() {
Column({ space: 50 }) {
Text('全场低至一分购')
.fontSize(30)
.fontWeight(900)
.fontColor(Color.Red)
.backgroundColor('#e8b66d')
.padding(10)
.borderRadius(20)// 2.将状态变量设置到相关可动画属性接口
.scale({
x: this.scaleX,
y: this.scaleY
})// 3. 通过属性动画接口开启属性动画
.animation({
duration: 1000,
curve: Curve.EaseInOut,
playMode: PlayMode.Alternate,
iterations: -1
})
.onAppear(() => {
// 4.通过状态变量改变UI界面
this.scaleX = 1.3
this.scaleY = 1.3
})
}
.width('100%')
.height('100%')
.padding(20)
}
@Styles
fullSize() {
.width('100%')
.height('100%')
}
}
好啦。就到这里啦，主要是说一下HarmonyOS中的属性动画效果。
