ArkUI 动画

1. 属性动画

属性动画是通过设置组件的animation属性来给组件添加动画，当组件的width, height, opacity, backgroundColor, scale, rotate, translate等属性变更时，可以实现渐变过渡效果。

解读：给组件添加animation属性，arkUI会监控组件样式的变化，当修改了组件的样式时，aukUI发现组件样式发生了变更，会填充组件起始样式和结束样式之间的每一帧画面，从而实现样式变化的动画效果。

Text('^_^')
  .position({
    x: 10, // x轴坐标
    y: 0 // y轴坐标
  })
  .rotate({
    angle: 0, // 旋转角度
    centerX: '50%', // 旋转中心横坐标
    centerY: '50%' // 旋转中心纵坐标
  })
  .animation({
    duration: 1000,
    curve: Curve.EaseInOut
  })

animate 常用属性：

参数名称	参数类型	必填	描述
duration	number	否	设置动画时长 默认值：1000，单位：毫秒
tempo	number	否	动画播放速度，数值越大，速度越快 默认值：1
curve	string | Curve	否	设置动画曲线 默认值：Curve.EaseInOut，平滑开始和结束
delay	number	否	设置动画延迟执行的时长 默认值：0，单位：毫秒
iterations	number	否	设置播放次数 默认值：1，取值范围：[-1, +∞] 说明：-1代表无限次播放
playMode	PlayMode	否	设置动画播放模式，默认播放完成后重头开始播放 默认是：PlayMode.Normal
onFinish	() => void	否	状态回调，动画播放完成时触发

2. 显式动画

显式动画是通过全局animateTo函数来修改组件属性，实现属性变化时的渐变过渡效果。

显式动画使用起来比较灵活，也是实际开发中使用较多的一种方式。

private x: number = 10
private y: number = 0

Text('^_^')
  .position({
    x: this.x, // x轴坐标
    y: this.y // y轴坐标
  })
  .rotate({
    angle: 0, // 旋转角度
    centerX: '50%', // 旋转中心横坐标
    centerY: '50%' // 旋转中心纵坐标
  })
  .onClick(() => {
    // 显式调用animateTo函数触发动画
    .animateTo(
      { duration: 1000}, // 动画参数
      () => {
        // 修改组件属性关联的状态变量
        this.x -= 20
        this.y += 50
      }
    )
  })
  

3. 组件转场动画

组件转场动画是在组件插入或移除时的过渡动画，通过组件的transition属性来配置。

Text('^_^')
  .transition({ //转场动画参数
    type: TransitionType.Insert,
    opcity: 0, 
    rotate: {angle: -360},
    scale: {x:0, y:0}
  })

transition 常用属性：

参数名称	参数类型	必填	描述
type	TransitionType	否	类型，默认包括组件新增和删除 默认值：ALL
opacity	number	否	不透明度，为插入时起点和删除时终点的值 默认值：1，取值范围：[0, 1]
translate	{ x?: number | string, y?: number | string, z?: number | string }	否	平移效果，为插入时起点和删除时终点的值 -x：横向平移距离 -y：纵向平移距离 -z：竖向平移距离
scale	{ x?: number, y?: number, z?: number, centerX?: number | string, centerY?: number | string }	否	缩放效果，为插入时起点和删除时终点的值 -x：横向放大倍数（或缩小比例） -y：纵向放大倍数（或缩小比例） -z：当前为二维展示，该参数无效 -centerX、centerY 指缩放中心店，默认值是 ‘50%’
rotate	{ x?: number, y?: number, z?: number, angle: number | string, centerX?: number | string, centerY?: number | string }	否	旋转效果，angle是旋转角度，其他参数与scale类似