鸿蒙应用开发小例-制作数字时钟并添加小动画

粘几抓抓

已于 2024-04-04 13:16:28 修改

阅读量589

点赞数 12

分类专栏：鸿蒙开发小例文章标签：鸿蒙 harmonyos 华为

于 2024-04-03 17:59:46 首次发布

本文链接：https://blog.csdn.net/MonkeyZ_/article/details/137351367

版权

鸿蒙开发小例专栏收录该内容

9 篇文章 0 订阅

订阅专栏

实现效果

视频

数字时钟小动画

截图

样式设计思路

居中显示时间，并设置成白色。三个彩色圆点围绕时间显示，加上周期性运动动画。

三个彩色圆点设置不同的动画周期时长，模拟类似行星运动的效果。

代码实现

constants下定义了一些通用的数值和颜色，请自行替换。

例子中使用到的色值：{ THREE: ['#5cd7c4', '#f5ce04', '#e13519', '#ffffff'] }

时间显示

直接使用TextClock组件，并设置format属性，显示为我们需要的格式。

TextClock()
    .format('HH:mm')
    .fontSize(50)
    .fontWeight(FontWeight.Bolder)
    .fontColor(constants.COLOR_GROUP.THREE[3])

三个圆点

使用ForEach循环生成三个圆点组件。

圆点组件外层Row组件控制圆点位置和动画属性，里层Row组件显示圆点样式。

三个圆点的不同之处：颜色、位置、动画时长。

      ForEach([0, 1, 2], (item) => {
        Row() {
          Row() {}
            .width(20).height(20)
            .borderRadius(10)
            .backgroundColor(constants.COLOR_GROUP.THREE[item])
        }
        .width(200 + item * 60)
        .rotate({ angle: this.borderRotate })
        .animation({
          duration: (item + 1) * 10000,
          playMode: PlayMode.Normal,
          tempo: 1,
          curve: Curve.Linear,
          iterations: -1
        })
      }, (item, index) => String(index))

触发动画

这里使用了在aboutToAppear生命周期回调函数中加定时器的方式改变属性来触发动画。/捂脸

如果有更好的方式请不吝赐教～

@State borderRotate: number = 0

aboutToAppear() {
    setTimeout(() => {
        this.borderRotate = 360
    }, 100)
}

完结散花

如发现文章内容有任何问题，请提出您的宝贵意见予以指正，感谢您的阅读。