当前位置：首页 > news >正文

鸿蒙（HarmonyOS）ArkTS 实战：animate属性动画可复用圆形扩散菜单

news 2026/5/26 3:01:47

圆形扩散菜单这几年在APP中比较少见了，记得15年左右APP都有各种各样炫酷的动画效果，看到设计搞出来的动画效果就头大因为我不会在当时。这份内容讲一下实现原理已经完整代码。

最终效果

点击主按钮，子菜单沿圆形轨迹向外扩散展开
再次点击，菜单平滑收回、缩放、渐隐
包含位移、透明度、缩放组合动画
支持自定义菜单数量、半径、起始角度、间隔角度

核心原理

布局：使用Stack堆叠容器，实现菜单居中叠加
坐标计算：以主按钮为圆心，子菜单中心距离主按钮中心为半径，通过三角函数将角度转为坐标这样很容易得到子菜单的中心点。
动画：translate + opacity + scale + 弹簧曲线组合动效。
通信：父组件控制开关，子组件负责渲染动画（@Prop父子通信）

完整代码

import{curves}from"@kit.ArkUI";// 坐标类型：x + yinterfaceMenuPoint{x:number;y:number;}@Componentexportstruct SpreadMenu{// 接收父组件传：菜单是否打开 + 菜单列表@Prop isOpen:boolean;@Prop menuList:string[];// 配置privateradius:number=90;privatestartAngle:number=180;privateangleStep:number=45;build(){Stack(){// 自动生成菜单ForEach(this.getMenuPositions(),(item:MenuPoint,index:number)=>{this.buildItem(item.x,item.y,this.menuList[index]);})}.width("100%").height("100%");}// 获取所有坐标privategetMenuPositions():MenuPoint[]{constpositions:MenuPoint[]=[];for(leti:number=0;i<this.menuList.length;i++){// 开始角度 + 偏移角度constangle:number=this.startAngle+i*this.angleStep;// 存储每一个子菜单的中心点positions.push({x:this.getX(angle),y:this.getY(angle)});}returnpositions;}// 角度 => XprivategetX(angle:number):number{constradian:number=(angle-90)*Math.PI/180;returnthis.radius*Math.cos(radian);}// 角度 => YprivategetY(angle:number):number{constradian:number=(angle-90)*Math.PI/180;returnthis.radius*Math.sin(radian);}// 子菜单@BuilderbuildItem(x:number,y:number,label:string){Column(){Text(label).fontColor(Color.White).fontSize(12)}.width(50).height(50).backgroundColor("#007AFF").borderRadius(25).justifyContent(FlexAlign.Center).translate({x:this.isOpen?x:0,y:this.isOpen?y:0}).opacity(this.isOpen?1:0).scale({x:this.isOpen?1:0.5,y:this.isOpen?1:0.5}).animation({duration:350,curve:curves.springMotion()});}}@Entry @Component struct SpreadMenuPage{@State isOpen:boolean=false;@State menuList:string[]=["用户","搜索","添加","删除","分享"];build(){Stack({alignContent:Alignment.Center}){// 菜单组件（父组件控制状态）SpreadMenu({isOpen:this.isOpen,menuList:this.menuList})// 主按钮（外置）Button({stateEffect:true,buttonStyle:ButtonStyleMode.NORMAL}){Text('菜单').fontColor(Color.White).textAlign(TextAlign.Center)}.width(60).height(60).backgroundColor("#007AFF").borderRadius(30).onClick(()=>{this.isOpen=!this.isOpen;}).zIndex(999)// 周期1，阻尼0.25 稍微来点弹簧效果.animation({curve:curves.springMotion(1,0.25),duration:1000})}.width('100%').height('100%').backgroundColor('#f5f5f5');}}