了解更多开源请访问：开源基础软件社区https://ost.51cto.com项目介绍本项目基于OpenHarmonyArkUI框架：TS扩展声明式开发范式。语法和概念可以参考官网官方文档地址：基于TS扩展的声明式开发范式，因为OpenHarmony的相对于HarmonyOS的API，API在功能上比较完备和成熟，一些新技术也较早被曝光，所以本项目直接使用OpenHarmonySDK开发。工具版本：DevEcoStudio3.0Beta4SDK版本：3.1.6.6(APIVersion8Release)效果演示主要API路径绘制组件路径属性方法：commands("路径绘制命令")。命令参数说明Mx,y移动到指定点x,yLx,y画线到指定点x,yQx1,y1x,y画x,y,x1的二次贝塞尔曲线,y1为控制点Arx,ryx-rotationflag1flag2x,y绘制椭圆，解释如下命令解释：rx,ry：指椭圆半轴的大小x-rotation：指X轴夹角椭圆的水平方向顺时针方向flag1：有两个A值，1表示大角度圆弧，0表示小角度圆弧。flag2：有两个值，决定从起点到终点的方向，1为顺时针，0为逆时针x,y：终点坐标执行步骤1，绘制底部背景bottombackground：使用Path根据路径命令绘制的组件，在矩形中间挖空一个半圆。@Entry@ComponentstructIndex{@StatepathValue:string=''build(){Row(){Path().width('100%').height(60).fill('#FFD33C').commands(this.pathValue).onAreaChange((oldValue:Area,newValue:Area)=>{//获取组件的宽高constwidth=vp2px(parseInt(newValue.width.toString()))constheight=vp2px(parseInt(newValue.height.toString()))//改变绘制路径的命令this.pathValue=`M0,0L${width/2-vp2px(40)},0A1,1000${width/2+vp2px(40)},0L${width},0L${width},${height}L0,${height}`})}.justifyContent(FlexAlign.Center).width('100%').height('100%')}}2.画一个实心圆，设置圆角：borderRadius圆角半径为宽高的一半，设置position使其居中。@Entry@ComponentstructIndex{privatenavWidth=0privatenavHeight=0@StateoffsetX:number=0@StatepathValue:string=''build(){Column(){Stack({alignContent:Alignment.TopStart}){//背面Path().width('100%').height('100%').fill('#FFD33C').commands(this.pathValue).onAreaChange((oldValue:Area,newValue:Area)=>{this.navWidth=vp2px(parseInt(newValue.width.toString()))this.navHeight=vp2px(parseInt(newValue.height.toString()))this.updateData(px2vp(this.navWidth/2))})//实心圆Row().width(60).height(60).borderRadius(30).backgroundColor('#FFD33C').position({x:this.offsetX-vp2px(10),y:-30}).shadow({radius:15,color:'#ffaaaaaa'})}.width('100%').height(60)}.justifyContent(FlexAlign.Center).width('100%').height('100%')}//更新数据updateData(x){this.offsetX=xthis.pathValue=`M0,0L${vp2px(x)-vp2px(40)},0A1,1000${vp2px(x)+vp2px(40)},0L${this.navWidth},0L${this.navWidth},${this.navHeight}L0,${this.navHeight}`}}3.给圆圈位置变化动画添加触摸事件，改变x坐标点，使用显式Animations添加动画效果@Entry@ComponentstructIndex{privatenavWidth=0privatenavHeight=0@StateoffsetX:number=0@StatepathValue:string=''build(){Column(){Stack({alignContent:Alignment.TopStart}){//背面Path().width('100%').height('100%').fill('#FFD33C').commands(this.pathValue).onAreaChange((oldValue:Area,newValue:Area)=>{this.navWidth=vp2px(parseInt(newValue.width.toString()))this.navHeight=vp2px(parseInt(newValue.height.toString()))this.updateData(px2vp(this.navWidth/2))})。onTouch((event:TouchEvent)=>this.touchEvent(event))//实心圆Row().width(60).height(60).borderRadius(30).backgroundColor('#FFD33C').position({x:this.offsetX-vp2px(10),y:-30}).shadow({radius:15,color:'#ffaaaaaa'})}.width('100%').height(60)}.justifyContent(FlexAlign.Center)。width('100%').height('100%')}//触摸事件touchEvent(event:TouchEvent){letx=event.touches[0].xif(event.type===TouchType.Up){//显式动画animateTo({delay:50,duration:300},()=>{this.updateData(x)})}}//更新数据updateData(x){this.offsetX=xthis.pathValue=`M0,0L${vp2px(x)-vp2px(40)},0A1,1000${vp2px(x)+vp2px(40)},0L${this.navWidth},0L${this.navWidth},${this.navHeight}L0,${this.navHeight}`}}4.给icon文字布局动画添加点击事件，改变selectedindex，item中设置Y轴偏移量，使用属性动画添加动画效果（示例代码）@Entry@ComponentstructIndex{@StateitemWidth:number=0@StateselectIndex:number=0privatelistItem=['Home','Category','ShoppingCart','My']build(){Column(){Text().layoutWeight(1)Row(){ForEach(this.listItem,(item,index)=>{Column(){Image($r('app.media.icon')).width(30).height(30).margin({top:15,bottom:24})Text(item).fontSize(12)}.backgroundColor('#FFD33C').width(this.itemWidth).height('100%').offset({y:this.selectIndex===index?-23:0})//Y轴offset.animation({duration:350})//属性animation.onClick(()=>{//点击改变选中的索引this.selectIndex=index})},item=>item)}.width('100%').height(60).backgroundColor('#FFD33C')}.width('100%').height('100%').onAreaChange((oldValue:Area,newValue:Area)=>;{this.itemWidth=parseInt(newValue.width.toString())/4})}}总结本项目只使用了两个动??画的基本功能，难点主要是组件Path中的路径绘制命令（本项目仅使用几个命令）如果你有兴趣，可以查看其他命令。各种命令的组合可以产生很酷的效果。要了解更多关于开源内容的信息，请访问：https://ost.51cto.com。
