hello大家好啊,这里是鸿蒙开天组,今天我们来学习鸿蒙中的动画属性。
先来说说动画~
属性值的变化,通常会引发 UI 的变化,结合动画可以让这个变化过程【更为流畅】,反之这个过程将在一瞬间完成,用户体验不好,观感突兀。这就是动画的作用:链接
HarmonyOS 中的动画主要分为:
- 属性动画
- 转场动画
- 组件动画
这么三类,一些和动画相关的其他细节咱们接着往下学。
今天咱们主要来学习属性动画。
属性动画-animation
接下来看看如何让咱们的应用动起来
组件的某些通用属性变化时,可以通过属性动画实现渐变过渡效果,提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
基本使用
使用动画的核心步骤如下:
- 声明相关状态变量
- 将状态变量设置到相关可动画属性方法上
- 通过属性动画接口开启属性动画(在属性动画上面的属性会应用动画)
- 通过状态变量改变UI界面
// 最核心写法,相关动画属性后续展开
组件
.属性1()
.属性2()
// .... animation 必须在需要动画的属性的后面
.animation({})
看完了概念,让我们来试一下~
基础模板
@Entry
@Component
struct Page01_animation {
// 1. 声明相关状态变量
@State translateY: number = 1
@State bgColor: ResourceColor = Color.Pink
@State fontColor: ResourceColor = '#0094ff'
@State fontWeight: number = 100
build() {
Column() {
Text('C')
.width(100)
.height(100)
.opacity(1)
.textAlign(TextAlign.Center)
// 2.将状态变量设置到相关可动画属性接口
.fontWeight(this.fontWeight)
.backgroundColor(this.bgColor)
.translate({ y: this.translateY })
Button('修改状态变量')
.onClick(() => {
// 4. 通过状态变量改变UI界面
this.bgColor = '#0094ff'
this.translateY = 100
this.fontColor = Color.Pink
this.fontWeight = 900
})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.SpaceAround)
}
}
在上面的模板代码中,我们需要为容器添加动画,也就是给text的变量改变添加一个过渡。
为了方便理解,接下来的参考代码将变量改变的部分进行了函数封装,这样我们就可以得到这样一个结果 :
@Entry
@Component
struct Page01_animation {
// 1. 声明相关状态变量
@State translateY: number = 1
@State bgColor: ResourceColor = Color.Pink
@State fontColor: ResourceColor = '#0094ff'
@State fontWeight: number = 100
@State isOrNot: boolean = false
onclickEventEnd() {
// 4. 通过状态变量改变UI界面
this.bgColor = '#0094ff'
this.translateY = 100
this.fontColor = Color.Pink
this.fontWeight = 900
}
onclickEventStart() {
// 4. 通过状态变量改变UI界面
this.bgColor = Color.Pink
this.translateY = 1
this.fontColor = Color.Pink
this.fontWeight = 100
}
build() {
Column() {
Text('C')
.width(100)
.height(100)
.opacity(1)// 2.将状态变量设置到相关可动画属性接口
.fontWeight(this.fontWeight)
.backgroundColor(this.bgColor)
.textAlign(TextAlign.Center)
.translate({ y: this.translateY })
// 3.通过属性动画接口开启属性动画
.animation({})
Button('修改状态变量')
.onClick(() => {
if (this.isOrNot) {
this.onclickEventStart()
this.isOrNot = !this.isOrNot
} else {
this.onclickEventEnd()
this.isOrNot = !this.isOrNot
}
})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.SpaceAround)
}
}
常用属性
可以通过动画参数(以对象的形式传递)来定制动画效果
组件
.animation({ 动画参数 })
名称 | 参数类型 | 必填 | 描述 |
duration | number | 否 | 动画时长,单位为毫秒。 默认值:1000 |
curve | string | Curve | ICurve | 否 | 设置动画曲线。 默认值:Curve.EaseInOut |
delay | number | 否 | 动画延迟播放时间。单位为毫秒,默认不延时播放。 默认值:0 取值范围:(-∞, +∞) |
iterations | number | 否 | 动画播放次数。 默认值:1 取值范围:[-1, +∞) 说明: 设置为-1时表示无限次播放。设置为0时表示无动画效果。 |
playMode | PlayMode | 否 | 动画播放模式,默认播放完成后重头开始播放。 默认值:PlayMode.Normal |
onFinish | () => void | 否 | 结束回调,动画播放完成时触发。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
动画曲线枚举值:
名称 | 描述 |
Linear | 表示动画从头到尾的速度都是相同的。 |
Ease | 表示动画以低速开始,然后加快,在结束前变慢,CubicBezier(0.25, 0.1, 0.25, 1.0)。 |
EaseIn | 表示动画以低速开始,CubicBezier(0.42, 0.0, 1.0, 1.0)。 |
EaseOut | 表示动画以低速结束,CubicBezier(0.0, 0.0, 0.58, 1.0)。 |
EaseInOut | 表示动画以低速开始和结束,CubicBezier(0.42, 0.0, 0.58, 1.0)。 |
FastOutSlowIn | 标准曲线,CubicBezier(0.4, 0.0, 0.2, 1.0)。 |
LinearOutSlowIn | 减速曲线,CubicBezier(0.0, 0.0, 0.2, 1.0)。 |
FastOutLinearIn | 加速曲线,CubicBezier(0.4, 0.0, 1.0, 1.0)。 |
ExtremeDeceleration | 急缓曲线,CubicBezier(0.0, 0.0, 0.0, 1.0)。 |
Sharp | 锐利曲线,CubicBezier(0.33, 0.0, 0.67, 1.0)。 |
Rhythm | 节奏曲线,CubicBezier(0.7, 0.0, 0.2, 1.0)。 |
Smooth | 平滑曲线,CubicBezier(0.4, 0.0, 0.4, 1.0)。 |
Friction | 阻尼曲线,CubicBezier(0.2, 0.0, 0.2, 1.0)。 |
playMode 播放模式枚举值
名称 | 描述 |
Normal | 动画正向播放。 |
Reverse | 动画反向播放。 |
Alternate | 先正向播放,再反向播放。 |
AlternateReverse | 先反向播放,后正向播放。 |
非常多的属性值,这里就不逐个尝试啦~有兴趣的可以自己尝试一下。
案例-折扣信息
接下来咱们来写一个小小的案例
需求:
动画效果:
- 元素大小切换
- 动画次数无限,元素【加载之后】开启动画
点击按钮触发
咱们先考虑如何实现点击开启动画,元素加载之后涉及到一个还未学习的知识点
核心步骤:有布局,有逻辑
1.布局:用 Text 方便调整实现布局
2.动画:animation
a.次数无限次
b.动画线性:匀速
c.改变的是缩放
i.宽高,定义在@State
3.如何触发:
a.点击触发
模板代码
@Entry
@Component
struct Page02_animationDemo1 {
build() {
Column({ space: 50 }) {
Text('全场低至一分购')
.fontSize(30)
.fontWeight(900)
.fontColor(Color.Red)
.backgroundColor('#e8b66d')
.padding(10)
.borderRadius(20)
}
.width('100%')
.height('100%')
.padding(20)
}
@Styles
fullSize() {
.width('100%')
.height('100%')
}
}
参考代码
@Entry
@Component
struct Page02_animationDemo1 {
// 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 Page03_appearAnddisAppear {
@State isShow: boolean = false
build() {
Column({ space: 50 }) {
Button('切换显示')
.onClick(() => {
this.isShow = !this.isShow
})
if (this.isShow) {
Text('我是文本')
.width('100%')
.onAppear(() => {
console.log('加载了')
})
.onDisAppear(() => {
console.log('卸载了')
})
}
}
.width('100%')
.height('100%')
.padding(20)
}
}
案例调整后的效果
@Entry
@Component
struct Page04_animationDemo1_event {
// 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%')
}
}
今天的文章就到这里啦!这里是鸿蒙开天组,感谢大家的关注,咱们下篇文章再见!