笔记 HarmonyOS实战开发：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 卡片中使用。

playMode 取值

playMode的枚举值

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

动画枚举 Curve的取值含义

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)。

代码演示：

@Entry
@Component
struct AnimationPage {
  @State translateY: number = 1
  @State bgColor: ResourceColor = Color.Green
  @State fontColor: ResourceColor = '#0094ff'
  @State fontWeight: number = 700

  build() {
    Column() {
      Text('一只小风华')

        .width(100)
        .height(100)
        .fontWeight(this.fontWeight)
        .backgroundColor(this.bgColor)
        .textAlign(TextAlign.Center)//组件平移
        .translate({ y: this.translateY })//透明度
        .opacity(1)//动画效果
        .animation({
          //动画时长  参数类型 number 默认值为：1秒
          duration: 1500, //动画播放时间为1.5秒

          //动画曲线  默认的枚举类型为:Curve.EaseOut
          curve: Curve.EaseInOut,//EaseInOut 表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)

          //设置动画延迟 默认不延迟播放 默认值为：0
          delay: 500, //延迟0.5秒播放

          //动画播放次数 默认值为1 设置为-1时将无限播放
          iterations: 5, //播放次数为5次

          //动画的播放模式，默认播放完成后重头开始播放 默认值为：PlayMode.Normal
          playMode: PlayMode.Alternate, //Alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。

          //结束回调 动画播放完成时触发
          onFinish: () => {
            console.log('我是一只小风华~') //当动画播放完成时，控制台输出：我是一只小风华~
          }


        })
      Button('修改状态变量')
        .onClick(() => {
          this.bgColor = Color.Pink
          this.translateY = 100
          this.fontColor = Color.Pink
          this.fontWeight = 900
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceAround)

  }
}

代码效果展示：                                         

控制台onFinish输出展示：