一、animation的相关属性

组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。

1.1 animation的使用场景

当你需要使用animation时，需要在组件的后面使用：

组件.animation({动画设置，})

1.2 使用动画的核心步骤：

· 定义状态变量

· 通过一些事件修改状态变量的值

· animation监听通用属性的值变化就会显示动画

1.3 常用的属性

可以通过属性来定制动画效果

名称	参数类型	必填	描述
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.3.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.3.2 PlayMode取值

名称	描述
Normal	动画正向播放。（默认值）
Reverse	动画反向播放。
Alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
AlternateReverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

二、显示动画animationTo

属性动画 animation是作为属性使用，而animateTo显示动画是一个系统的内置函数，可以直接调用，一般事件触发时一起使用，比如点击事件，滚动事件等等

animateTo可以解决animation属性不能实现动画的场景：例如：自定义打开和关闭SideBarContainer侧边栏的动画效果 animation不能实现，但是使用animateTo可以实现

1.基本用法

// 参数 1 动画选项 和 animation 相同
// 参数 2 箭头函数，状态变量的修改写在里面
animateTo({}, () => {
  
})

2、基本用法

@Entry
@Component
struct AnimationDemo {
  // 第一步: 声明相关状态变量
  @State animate: boolean = false;
  @State translateY: number = 1
  @State bgColor: ResourceColor = Color.Pink
  @State fontColor: ResourceColor = '#0094ff'
  @State fontWeight: number = 100
  @State angle: number = 0

  // 第四步：通过状态变量改变UI界面，系统会检测改变后的UI界面与之前的UI界面的差异，对有差异的部分添加动画
  // 注意：用尺寸做动画触发测量布局，性能开销大，如果要改变组件尺寸建议使用scale
  build() {
    Column() {
      Text('itheima')
        .width(100)
        .height(100)// 第二步：将状态变量设置到相关可动画属性接口（width、height、backgroundColor、opacity、scale、rotate、translate）
          // 第三步：通过属性动画接口开启属性动画，控件的函数调用顺序是从下往上的，这个animation会作用到上面的属性
        .fontColor(this.fontColor)
        .fontWeight(this.fontWeight)
        .backgroundColor(this.bgColor)
        .textAlign(TextAlign.Center)
        .translate({ y: this.translateY })
        .rotate({ angle: this.angle })
        .opacity(1)

      // 改变位置
      Button('改变位置')
        .onClick(() => {
          animateTo({},()=>{
            this.angle += 10
          })
        })

      Button('切换动画')
        .onClick(() => {
          this.animate=!this.animate
          animateTo({
            duration: 500,
            curve: Curve.Ease, // 动画曲线
            // delay: 2000,
            // iterations: -1,
            playMode: PlayMode.Alternate,
            onFinish: () => {
              console.log('onFinish 执行啦')
            }
          },()=>{

            this.bgColor = !this.animate?Color.Pink:'#0094ff'
            this.translateY = !this.animate?1:100
            this.fontColor =!this.animate?'#0094ff':Color.Pink
            this.fontWeight =!this.animate?100: 900
            this.angle = !this.animate ? 0:135

          })

        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceAround)
  }
}

鸿蒙属性动画animation和显式动画