點擊下載源碼：
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);}通過這個設計，我們不僅實現了優雅的時間頁面展示，而且在交互和用戶體驗方面也有了重要考量。?
?
)
