点击下载源码：

https://download.csdn.net/download/liuhaikang/89509449

做一个时间屏幕，可以点击切换白色和黑色，有渐变效果，使用到了鸿蒙的动画效果。

在这个设计中，我们首先引入了通用能力包，以实现功能齐全且界面友好的时间页面。通过引入AppUtil和DateUtil工具包，我们可以轻松处理应用程序的布局和时间格式化需求。

import { common } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { AppUtil } from './Utils/AppUtil';
import { DateUtil } from './Utils/DateUtil';

页面设计与交互

这个时间页面设计结构采用了组件化的方式，通过Column()和Text()等函数构建出页面的主体结构。同时，页面具有可交互性，用户可以通过点击动作改变字体颜色和背景色的设置。

@Entry
@Component
struct TimePage {
  // 页面初始化与逻辑控制
  // ...

  build() {
    // 构建页面主体
    Column() {
      Text(this.timeText)
        .fontSize(this.bigFontSize)
        .fontColor(this.fontColor)
        .animation({ duration: 2000, curve: Curve.EaseOut, iterations: 1, playMode: PlayMode.Normal });

      Text(this.dateText)
        .fontSize(this.smallFontSize)
        .fontColor(this.fontColor)
        .animation({ duration: 2000, curve: Curve.Ease, iterations: 1, playMode: PlayMode.Normal });
    }
    // 页面交互设计
    .onClick(() => {
      // 点击切换颜色
      if (this.flag) {
        this.fontColor = TimePage.whiteColor;
        this.bgColor = TimePage.blackColor;
      } else {
        this.fontColor = TimePage.blackColor;
        this.bgColor = TimePage.whiteColor;
      }
      this.flag = !this.flag;
    })
    // 设置背景色、动画效果等
    .backgroundColor(this.bgColor)
    .animation({ duration: 2000, curve: Curve.Ease, iterations: 1, playMode: PlayMode.Normal })
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

页面优化与用户体验

除了页面设计外，我们还在页面显示时做了一些优化工作，例如设置了横屏显示，同时在页面切换或离开时清除定时器，避免资源浪费。

  onPageShow(): void {
    AppUtil.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED);
  }

  aboutToDisappear(): void {
    clearInterval(this.intervalID);
  }

通过这个设计，我们不仅实现了优雅的时间页面展示，而且在交互和用户体验方面也有了重要考量。