了解更多开源内容请访问：开源基础软件社区https://ost.51cto.com项目介绍本项目基于OpenHarmony的ArkUI框架：TS扩展的声明式开发范式。语法和概念请参考官网官方文档地址：基于TS扩展的声明式开发范式。工具版本：DevEcoStudio3.0Beta4。SDK版本：3.1.6.6（API版本8发布）。效果演示主要知识点UI状态：@Prop、@Link、@Watch。形状裁剪属性：clip。显式动画：animateTo。为了实现思维时钟的翻页效果，使用了四个Text组件，使用了堆叠容器Stack。底层：两个裁剪出来的Text用于上下显示；最上层：裁剪出来的两个Text，也是用来做动画效果的，用的是X轴角度。旋转。1.裁剪Text裁剪前：裁剪后：使用形状裁剪属性clip裁剪Text的上半部分：从坐标(0,0)向下裁剪，clip(newRect({width:this.width,height:this.高度/2}))。裁剪文本的下半部分：从坐标(0,height/2)裁剪，clip(newPath().commands(this.bottomPath))。@Entry@ComponentstructTest{privatewidth=90privateheight=110privatefontSize=70privatedefaultBgColor='#ffe6e6e6'privateborderRadius=10//下半部裁剪路径privatebottomPath=`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(newRect({width:this.width,height:this.height/2}))Text('25').margin({左：20}).width(this.width).height(this.height).fontColor(Color.Black).fontSize(this.fontSize).textAlign(TextAlign.Center).borderRadius(this.borderRadius).backgroundColor(这个.defaultBgColor).clip(newPath().commands(this.bottomPath))}.width('100%').height('100%').justifyContent(FlexAlign.Center)}}2.放入堆叠container4裁剪后的Text放入stackcontainer（代码片段）Stack(){//底层文本的上半部分Text(this.newValue).......clip(newRect({width:this.width,height:this.height/2}))//底部文本Text(this.oldValue).......clip(newPath().commands(this.bottomPath))//顶部文本动画Text(this.oldValue).......clip(newRect({width:this.width,height:this.height/2})).rotate({x:1,centerY:'50%',angle:this.angleTop})//动画顶部文本的下部Text(this.newValue).......margin({top:3}).clip(newPath().commands(this.bottomPath)).rotate({x:1,centerY:'50%',angle:this.angleBottom})}3.使用显式动画首先对顶层的上半部分进行动画处理，并停止上半部分的旋转角度从0到90，然后执行顶层下半部分的动画，将下半部分的旋转角度停止从-90转0，停止后重置初始状态，上旋转角度=0，下旋转角度=-90（代码片段）。/***开始顶部文本的上部动画*/startTopAnimate(){animateTo({duration:400,onFinish:()=>{this.startBottomAnimate()this.animateBgColor='#ffededed'}},()=>{this.angleTop=90this.animateBgColor='#ffc5c5c5'})}/***开始顶部文本的底部动画*/startBottomAnimate(){animateTo({duration:400,onFinish:()=>{this.angleTop=0this.angleBottom=-90this.animateBgColor=this.defaultBgColorthis.oldValue=this.newValue}},()=>{this.angleBottom=0this.animateBgColor=this.defaultBgColor})}4.组件封装翻页逻辑封装成组件，提供给外部调用，根据来自外部的双向数据绑定：newValue，监听数据变化，如果有则启动翻页动画（代码片段）改变。@ComponentexportstructFlipPage{//顶部动画角度@StateangleTop:number=0//顶部底部动画角度@StateangleBottom:number=-90//旧值@PropoldValue:string//新值，添加监视器@Link@Watch('valueChange')newValue:string/***监控新值变化*/valueChange(){if(this.oldValue===this.newValue)returnthis.startTopAnimate()}build(){Stack(){//底层文本的上半部分Text(this.newValue).......clip(newRect({width:this.width,height:this.height/2}))//下半部分底层文本Text(this.oldValue).......clip(newPath().commands(this.bottomPath))//为顶部文本的上部设置动画Text(this.oldValue).......clip(newRect({width:this.width,height:this.height/2})).rotate({x:1,centerY:'50%',angle:this.angleTop})//动画顶部文本的下部Text(this.newValue)......margin({top:3}).clip(newPath().commands(this.bottomPath)).rotate({x:1,centerY:'50%',角度:这个.angleBottom})}}/***开始顶层文字的上层动画*/startTopAnimate(){......}5.外部调用接口加载成功后，启动循环定时器setInterval，每隔1秒更新一次newValue的值，在翻页组件内部进行翻页动画。import{FlipPage}from'../componet/FlipPage'@Entry@ComponentstructIndex{//小时-旧值@StateoldHours:string=''//小时-新值@StatenewHours:string=''//分钟-旧值@StateoldMinutes:string=''//分钟-新值@StatenewMinutes:string=''//秒-旧值@StateoldSeconds:string=''//秒-新值@StatenewSeconds:string=''@BuilderColon(){Column(){Circle().width(8).height(8).fill(Color.Black)Circle().width(8).height(8).fill(Color.Black).margin({top:10})}.padding(10)}build(){Row(){//翻页组件-显示小时数FlipPage({oldValue:this.oldHours,newValue:$newHours})//冒号this.Colon()//翻页组件-显示分钟FlipPage({oldValue:this.oldMinutes,newValue:$newMinutes})//冒号this.Colon()//翻页组件-显示秒FlipPage({oldValue:this.oldSeconds,newValue:$newSeconds})}.justifyContent(FlexAlign.Center).width('100%').height('100%').onAppear(()=>{//打开定时器this.initDate()setInterval(()=>{this.updateDate()},1000)})}/***初始化时间*/initDate(){letdate=newDate()//设置小时this.oldHours=this.format(date.getHours())//设置分钟this.oldMinutes=this.format(date.getMinutes())//设置秒this.oldSeconds=this.format(date.getSeconds())//设置新的秒数this.newSeconds=date.getSeconds()+1===60?'00':this.format(date.getSeconds()+1)}/***更新时间*/updateDate(){letdate=newDate()console.log(`${date.getHours()}${date.getMinutes()}minutes${date.getSeconds()}seconds`)//仅当新值改变时动画if(date.getSeconds()===59){this.newSeconds='00'this.newMinutes=date.getMinutes()+1===60?'00':this.format(date.getMinutes()+1)if(date.getMinutes()===59){this.newHours=date.getHours()+1===24?'00':this.format(date.getHours()+1)}}else{this.newSeconds=this.format(date.getSeconds()+1)}}/***少于十位前补零*/format(param){letvalue=''+paramif(param<10){value='0'+param}returnvalue}}Summary根据上面的实现思路和5步流程，相信你也已经掌握了翻页时钟的原理，一步步拆分出来就非常简单了。最重要的是熟悉API，掌握声明式语法。HarmonyOS的API基于OpenHarmony。更新了，两者区别是一样的，但是OpenHarmonyAPI比较新，功能比较齐全成熟，所以本项目直接使用OpenHarmonySDK开发。项目地址：OpenHarmony-ArkUI（TS）开发翻页时钟。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。
