在鸿蒙（HarmonyOS Next）开发中，stateStyles()、动画（animation）和图形变换是增强用户界面交互性和视觉效果的重要工具。这些特性允许开发者创建动态且响应式的UI组件，提升用户体验。下面我们详细探讨每个概念及其在鸿蒙中的应用方式。
环境及工具
HarmonyOS 5.0.0 Release
DevEcoStudio
适用于HarmonyOS Next原生开发
1.通用属性
1.1多态样式
stateStyles() 是鸿蒙提供的一个用于定义组件状态样式的方法。它允许您根据组件的不同状态（如按下、选中、禁用等）来设置不同的外观属性，例如背景颜色、边框、文本颜色等。这对于按钮、开关等需要反馈用户操作的组件非常有用。
属性：stateStyles()
| 参数 | 描述 |
|---|---|
| normal | 组件无状态时的样式（默认状态） |
| pressed | 组件按下状态的样式 |
| disabled | 组件禁用状态的样式 |
| focused | 组件获焦状态的样式 |
/*
.stateStyles({
状态: {
属性
}
})
*/
@Entry
@Component
struct Index {
build() {
Column() {
Text('文本')
.width(50)
.height(50)
.backgroundColor(Color.Red)
.stateStyles({
pressed: {
.width(200)
}
})
}
.padding(20)
}
}
1.2动画animation
鸿蒙支持多种类型的动画，包括补间动画（Tween Animation）、帧动画（Frame Animation）以及属性动画（Property Animation）。通过动画，您可以为UI元素添加平滑过渡效果，使界面更加生动活泼。 组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
属性：animation
参数： {}
| 参数 | 描述 |
|---|---|
| duration | 设置动画时长。默认值：1000单位：毫秒 |
| curve | 设置动画曲线默认值：Curve.EaseInOut |
| delay | 设置动画延迟执行的时长。默认值：0，不延迟播放。单位：毫秒 |
| iterations | 设置播放次数。默认值：1设置为-1时表示无限次播放。设置为0时表示无动画效果。 |
@Entry
@Component
struct Index {
build() {
Column() {
Text('文本')// 正常状态下的样式
.width(100)
.height(50)
.backgroundColor(Color.Red)
.stateStyles({
// 正常状态下的样式
normal:{
.width(100)
.height(50)
.backgroundColor(Color.Red)
},
// 增加按压状态下的样式
pressed: {
// 这些属性有你自己需要实现的效果来决定
.width(200)
.height(100)
}
})
.animation({
duration:2000, //2000毫秒 = 2秒 -> 用户按下文本的时候宽高由100和50在2秒钟内变为200和100
curve:Curve.Linear , //Curve.Linear线性动画
// delay:1000, //延迟1秒以后再执行动画
iterations:-1, // -1表示一致执行下去
playMode:PlayMode.Alternate, // 奇数是正向，偶数是反向的
tempo:10 // 动画播放速度，优先级高于duration
})
}
.height('100%')
.width('100%')
}
}
1.3图形变换
图形变换指的是对UI组件执行几何变换，如旋转、缩放和平移。鸿蒙提供了 Transform 类及其子类来实现这些变换，用于对组件进行平移、旋转、缩放、矩阵变换等操作。
1.3.1平移
作用：可使组件在以组件左上角为坐标原点的坐标系中进行移动
属性：translate()
参数：{x?: X轴移动距离, y?: Y轴移动距离, z?: Z轴移动距离}
@Entry
@Component
struct Index {
build() {
Column() {
Text('内容')
.height(100)
.width(100)
.backgroundColor(Color.Red)
/*基本语法：
* translate({x:,y:,z:})
* x:正数是往右边 ，负数往左
* y：正数是往下边 ，负数往上
* z：正数是往离眼球远的位置（里->物体变小） ，负数往离眼球近的位置（外-> 物体变大）
* */
// .translate({x:50,y:50,z:100})
.translate({x:0,y:0})
.stateStyles({
// normal:{
// .translate({x:0,y:0})
// },
pressed:{
.translate({x:100,y:100})
}
})
.animation({})
}
.height('100%')
.width('100%')
}
}
1.3.2缩放
作用：分别设置X轴、Y轴、Z轴的缩放比例，默认值为1
属性：scale(),
参数： {x?: X轴缩放比例, y?: Y轴缩放比例, z?: Z轴缩放比例, centerX?: Y轴中心点坐标, centerY? Y轴中心点坐标}
@Entry
@Component
struct Index {
build() {
Column() {
Text('我是缩放效果')
.height(100)
.width(100)
.backgroundColor(Color.Red)
.scale({x:1,y:1}) //初始缩放比，1:表示不缩放
.stateStyles({
pressed:{
.scale({x:1.5,y:1.5}) //按压的时候放到到原来的1.5倍，设置数字大小表示缩放
}
})
.animation({})
}
.height('100%')
.width('100%')
}
}
1.3.3旋转
作用：可使组件在以组件左上角为坐标原点的坐标系中进行旋转
属性：rotate()
参数：{angle: 旋转角度, centerX?: Y轴中心点坐标, centerY? Y轴中心点坐标}
@Entry
@Component
struct Index {
build() {
Column() {
Text('我是旋转动画')
.height(100)
.backgroundColor(Color.Red)
.margin({top:100})
.rotate({
angle:0, // 初始角度为0
centerX:'50%', //旋转中心点x位置为组件宽度的一半
centerY:30 //旋转中心点y位置为离组件上边30vp的位置
})
.stateStyles({
pressed:{
.rotate({
angle:360, // 按压组件后-角度变为360
centerX:'50%',
centerY:30
})
}
})
.animation({
iterations:-1, // 循环执行动画
curve:Curve.Linear // 匀速执行动画
})
}
.height('100%')
.width('100%')
}
}
注意事项
- 保持简洁：虽然动画和图形变换可以显著提升UI的吸引力，但过度使用可能导致界面变得复杂且难以理解。确保动画服务于功能需求，而不是单纯为了装饰。
- 性能优化：复杂的动画可能会消耗大量资源，影响应用程序的性能。尽量减少不必要的动画，并选择合适的动画类型以平衡视觉效果与性能之间的关系。
- 一致性设计：在整个应用程序中保持一致的动画风格和行为模式，有助于提高用户的熟悉感和满意度。
- 考虑无障碍性：对于有特殊需求的用户群体，应考虑到他们可能无法正常感知动画或图形变换，因此要确保核心功能不依赖于这些特性。
