【第三期】HarmonyOS鸿蒙Next中给LOGO增加ArkUI动效

应用简介

本文章是参加“HarmonyOS线上Codelabs系列挑战赛第三期：玩转ArkUI动效”活动写的一个应用介绍，活动地址： https://developer.huawei.com/consumer/cn/forum/topic/0202105184144967482?fid=0101587866109860105

本应用通过对“HarmonyOS”文字，增加简单的animation属性动画和animateTo显性动画，来实现对ArkUI动效的学习。

效果预览

功能简介

中间文字部分就是HarmonyOS文字LOGO，动画分别应用在每个字母上。

H、a、r、m、o、n、y这7个字母分别按照从右向左依次间隔着旋转到目标位置，O字母从极大到小的缩放方式，S字母从上到下的位移方式。

底部两个是控制按钮，Animation是播放属性动画的，animatoTo是播放显式动画的。
属性动画的内容，就是上面介绍的文字LOGO中各个字母的运行方式。
显示动画的内容，就是整体LOGO的旋转效果。

此外，前景还增加了一个冒泡的效果，点击页面，会有大小不一，颜色不同的泡泡从底部冒出来。

代码解析

代码中用了一个@Extend装饰器，这个装饰器将新的属性函数添加到内置组件上，这样可以精简部分代码。

[@Extend](/user/Extend)(Text) function formatChar () {
  .fontColor(Color.Black)
  .fontSize(55)
  .fontWeight(FontWeight.Bold)
  .align(Alignment.Start)
  .textAlign(TextAlign.Center)
}

LOGO字母都采用的是属性动画，
Harmony每个字母都应用了位移动画和旋转动画，以H字母为例，

Text("H")
  .formatChar()
  .translate({ x: this.offset_x, y: 0 })
  .rotate({
    x: 0,
    y: 0,
    z: 1,
    angle: this.rotate_z,
  })
  .animation({
    duration: 200,
    curve: Curve.LinearOutSlowIn,
    delay: 2200,
    iterations: 1,
    playMode: PlayMode.Normal
  })

字母O使用的缩放属性动画，

Text("O")
  .formatChar()
  .scale({ x: this.O_s, y: this.O_s })
  .animation({
    duration: 500,
    curve: Curve.LinearOutSlowIn,
    delay: 0,
    iterations: 1,
    playMode: PlayMode.Normal
  })

字母S使用的位移属性动画，

Text("S")
  .formatChar()
  .translate({ x: 0, y: this.S_y })
  .animation({
    duration: 500,
    curve: Curve.LinearOutSlowIn,
    delay: 500,
    iterations: 1,
    playMode: PlayMode.Normal
  })

LOGO整体使用了缩放属性动画和透明度属性动画，

Row() {
...
}
.width('100%')
.height('80%')
.justifyContent(FlexAlign.Center)
.scale({ x: this.row_s, y: this.row_s })
.opacity(this.row_o)
.rotate({
  x: 0,
  y: 0,
  z: 1,
  angle: this.row_r,
})
.animation({
  duration: 1000,
  curve: Curve.EaseInOut,
  delay: 2500,
  iterations: 1,
  playMode: PlayMode.Reverse
})

显示动画，是通过animateTo按钮给整体LOGO增加了旋转的效果。

Button('animateTo', { type: ButtonType.Normal})
  .borderRadius(10)
  .fontSize(25)
  .onClick((event: ClickEvent) => {
    if (this.flag) {
      animateTo({
        duration: 1000,
        curve: Curve.EaseInOut,
        delay: 0,
        iterations: 1,
        playMode: PlayMode.Normal,
        onFinish: () => {}
      }, () => {
        this.row_r = 0
      })
    } else {
      animateTo({
        duration: 1000,
        curve: Curve.EaseInOut,
        delay: 0,
        iterations: 1,
        playMode: PlayMode.Normal,
        onFinish: () => {}
      }, () => {
        this.row_r = 360
      })
    }
    this.flag = !this.flag;
  })
  .width('45%')
  .height('10%')

前景泡泡的显示，也是通过属性动画实现的。

@Builder RandomCircle() {
  Circle()
    .size({ width: Math.floor(Math.random() * 100) + 100, height: Math.floor(Math.random() * 100) + 100 })
    .fillOpacity(0.5)
    .fill('rgb(' + Math.floor(Math.random() * 255) + ', ' + Math.floor(Math.random() * 255) + ', ' + Math.floor(Math.random() * 255) + ')')
    .position({ x: Math.floor(Math.random() * 200), y: this.start_y })
    .opacity(this.opac_value)
    .animation({
      duration: Math.floor(Math.random() * 4000) + 2000,
      curve: Curve.EaseInOut,
      delay: 100,
      iterations: -1,
      playMode: PlayMode.Normal
    })
    .onAppear(() => {})
}

项目小结

ArkUI动效功能很丰富，使用也不复杂，但要想做出好的效果，就需要有好的创意了。