一. ImageAnimator 帧动画组件
提供逐帧播放图片的能力,ImageAnimator不是容器组件，也不需要传递参数，只需要设置属性即可。
1.属性
| 参数名称 | 参数类型 | 参数描述 |
|---|---|---|
| images | Array<ImageFrameInfo> | 设置图片帧信息集合。 说明： 不支持动态更新。 |
| state | AnimationStatus | 默认为初始状态，用于控制播放状态。 |
| duration | number | 单位为毫秒，默认时长为1000ms；duration为0时，不播放图片；值的改变只会在下一次循环开始时生效；当images中任意一帧图片设置了单独的duration后，该属性设置无效。 默认值：1000 从API version 10开始，该接口支持在ArkTS卡片中使用。 |
| iterations | number | 默认播放一次，设置为-1时表示无限次播放。 默认值：1 |
| .....更多:文档传送门 |
ImageAnimator()可以实现对动画的精确控制：启动、暂停、停止。
注意：
1.需要通过image给ImageAnimator设置一组图片。
2.务必设置宽高，否则图片不显现。
使用注意： 有性能问题
1.如果图片数量多且单个图片大，会影响性能，如果要使用要尽量对图片进行压缩处理。
案例实现：
- 点击播放，暂停，停止切换动画状态，如下效果：
代码：
@Entry
@Component
struct Index {
//设置 state的状态变量
@State stategai:AnimationStatus=AnimationStatus.Initial
build() {
Column(){
ImageAnimator()
.images([
{src:$r('app.media.loading_dog_0')},
{src:$r('app.media.loading_dog_1')},
{src:$r('app.media.loading_dog_2')},
{src:$r('app.media.loading_dog_3')},
])
.width(300)
.height(150)
// 设置帧动画组件自动运行
// .state(AnimationStatus.Running)
.state(this.stategai) //引用设置的状态变量
// 循环动画
.iterations(-1)
// 设置一次动画的执行时间
.duration(1000)
Row({space:10}){
Button('开始')
.onClick(()=>{
//设置按钮控制帧动画组件运行，启动
this.stategai=AnimationStatus.Running
})
Button('暂停')
.onClick(()=>{
//设置按钮控制帧动画组件运行，暂停
this.stategai=AnimationStatus.Paused
})
Button('停止')
.onClick(()=>{
//设置按钮控制帧动画组件运行，停止
this.stategai=AnimationStatus.Stopped
})
}
}
.width('100%')
.height('100%')
.backgroundColor('rgba(0,0,0,0.3)')
}
}
二. 属性动画animate
组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
属性：animation
参数： {}
1.参数：
| 名称 | 参数类型 | 必填 | 描述 | ||
|---|---|---|---|---|---|
| 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卡片中使用。 |
1.1 动画枚举 Curve的取值含义
| 名称 | 描述 |
|---|---|
| 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)。 |
| 自定义： | import curves from '@ohos.curves'curves.cubicBezierCurve(0.29,-0.33,.83,0.67)贝塞尔曲线数值自动生成网址：cubic-bezier.com/#.25,-0.32,… |
1.2 playMode 取值
| 名称 | 描述 |
|---|---|
| Normal | 动画正向播放。（默认值） |
| Reverse | 动画反向播放。 |
| Alternate | 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 |
| AlternateReverse | 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 |
2. 写法：
组件.animation({动画设置，})
3.案例
实现代码：
@Entry
@Component
struct AnimationDemo {
@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)
.fontWeight(this.fontWeight)
.backgroundColor(this.bgColor)
.textAlign(TextAlign.Center)
.translate({ y: this.translateY })
.opacity(1)
.animation({})
Button('修改状态变量')
.onClick(() => {
this.bgColor = '#0094ff'
this.translateY = 100
this.fontColor = Color.Pink
this.fontWeight = 900
})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.SpaceAround)
}
}
三. 显示动画animateTo
1. 显示动画animateTo的使用
属性动画 animation是作为属性使用，而animateTo显示动画是一个系统的内置函数，可以直接调用，一般事件触发时一起使用，比如点击事件，滚动事件等等。
animateTo可以解决animation属性不能实现动画的场景：
例如：自定义打开和关闭SideBarContainer侧边栏的动画效果 animation不能实现，但是使用animateTo可以实现
1.1 基本用法：
// 参数 1 动画选项 和 animation 相同
// 参数 2 箭头函数，状态变量的修改写在里面 animateTo({}, () => {
})
1.2 运用：
运用动画实现下图效果：
实现代码：
@Entry
@Component
struct Index {
@State colo:string='#ff0000'
@State kuan:number=240
@State gao:number=60
@State tmd:number=1
@State newx:number=1
@State newy:number=1
@State newz:number=5
@State aln:number=-130
// @State foncol:string='#0000ff'
build() {
Column(){
Text('iud动感光波bui')
Text('全场低至一折')
.borderRadius(18)
.margin(50)
.fontSize(26)
.textAlign(TextAlign.Center)
// fontColor不是通用属性，使用不会随着动画去改变
// .fontColor(this.foncol)
.width(this.kuan)
.height(this.gao)
.backgroundColor(this.colo)
// .opacity(this.tmd)
.scale({
x:this.newx,
y:this.newy
})
// .rotate({
// x:this.newx,
// y:this.newy,
// z:this.newz,
// centerX:'50%',
// angle:this.aln
// })
.animation({
iterations:-1,
// 需要配合iteration:-1来使用，开发常用
playMode:PlayMode.Alternate,
// 里面一般来做动画结束的收尾工作
onFinish:()=>{
AlertDialog.show({message:'结束'})
}
})
.onClick(()=>{
this.kuan=240
// this.gao=100
this.colo='#00ff00'
this.newx=1.6
this.newy=1.6
// this.foncol='#ff0000'
// this.tmd=0
// this.aln=256
// this.newz=9
})
// .onAppear事件，被注册的组件或者页面加载时就触发
// .onAppear(()=>{
// this.newx=0.9
//
// })
// .onDisAppear事件，注册的组件或者页面被销毁时触发
// .onDisAppear(()=>{
//
// })
}
.width('100%')
.height('100%')
.backgroundColor('rgba(0,0,0,0.3)')
}
}
在上面代码段中，我想让文字颜色和其背景颜色一起改变（第一次上手心血来潮了一下下迷了心智），但是 .fontColor不是通用属性，设置之后只能改动画开始的第一次，之后就不会再变化颜色。
注意！！！：
显示动画animateTo和属性动画animate一样只会监控通用属性的改变，
记住通用属性，通用属性，通用属性。我进的坑不希望有人再踩一次。
实践运用可以到下面文章里 3.3 实践案例拓展 查看详细代码
鸿蒙开发应用中侧边栏容器SideBarContainer组件与瀑布流 WaterFlow组件及Math对象侧边栏容器组件 - 掘金 (juejin.cn)
