基于OpenHarmony开发翻页时钟

sfvcvf

效果演示：

主要知识点如下：
UI 状态：@Prop、@Link、@Watch
形状裁剪属性：clip
显式动画：animateTo

实现思路
时钟翻页效果，用到四个 Text 组件，使用堆叠容器 Stack：
底层：用到两个裁剪过后的 Text 上下显示
顶层：也是用两个裁剪后的 Text 做动画效果，进行 X 轴角度旋转

①裁剪 Text

使用形状裁剪属性 clip：
裁剪 Text 上半部：从坐标(0,0)往下裁剪，clip(new Rect({ width: this.width, height: this.height / 2 }))
裁剪 Text 下半部：从坐标(0,height / 2）往下裁剪，clip(new Path().commands(this.bottomPath))

代码如下：
@Entry
@Component
struct Test {
  private width = 90
  private height = 110
  private fontSize = 70
  private defaultBgColor = '#ffe6e6e6'
  private borderRadius = 10
  // 下半部裁剪路径
  private bottomPath = `M0 ${vp2px(this.height / 2)}
  L${vp2px(this.width)} ${vp2px(this.height / 2)}
  L${vp2px(this.width)} ${vp2px(this.height)}
  L0 ${vp2px(this.height)} Z`
  build() {
    Row() {
      Text('24')
        .width(this.width)
        .height(this.height)
        .foNTColor(Color.Black)
        .fontSize(this.fontSize)
        .textAlign(TextAlign.Center)
        .borderRadius(this.borderRadius)
        .backgroundColor(this.defaultBgColor)
        .clip(new Rect({ width: this.width, height: this.height / 2 }))
      Text('25')
        .margin({left:20})
        .width(this.width)
        .height(this.height)
        .fontColor(Color.Black)
        .fontSize(this.fontSize)
        .textAlign(TextAlign.Center)
        .borderRadius(this.borderRadius)
        .backgroundColor(this.defaultBgColor)
        .clip(new Path().commands(this.bottomPath))
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

②放入堆叠容器
四个裁剪后的 Text 放入到堆叠容器中（代码片段）：
Stack() {
      // 底层文字上部
      Text(this.newValue)
        ......
        .clip(new Rect({ width: this.width, height: this.height / 2 }))

      // 底层文字下部
      Text(this.oldValue)
        ......
        .clip(new Path().commands(this.bottomPath))

      // 顶层文字上部动画
      Text(this.oldValue)
        ......
        .clip(new Rect({ width: this.width, height: this.height / 2 }))
        .rotate({ x: 1, centerY: '50%', angle: this.angleTop })

      // 顶层文字下部动画
      Text(this.newValue)
        ......
        .margin({ top: 3 })
        .clip(new Path().commands(this.bottomPath))
        .rotate({ x: 1, centerY: '50%', angle: this.angleBottom })
    }

③使用显式动画
先顶层上部的动画，上部旋转角度从 0 到 90 停止，接下来执行顶层下部的动画，下部旋转角度从 -90 到 0 停止，停止完后重置初始状态，上部旋转角度 = 0、下部旋转角度 = -90（代码片段）。
/**
   * 启动顶层文字上部动画
   */
  startTOPAnimate() {
    animateTo({
      duration: 400,
      onFinish: () => {
        this.startBottomAnimate()
        this.animateBgColor = '#ffededed'
      }
    }, () => {
      this.angleTop = 90
      this.animateBgColor = '#ffc5c5c5'
    })
  }

  /**
   * 启动顶层文字下部动画
......

更多详细内容请下载附件查看

游客，如果您要查看本帖隐藏内容请回复