更多内容请访问：Harmonyos技术社区https://harmonyos.51cto.com前言HarmonyOSArkUI3.0框架demo初体验2来了||ヽ(￣▽￣)ノミ|Ю，这次比起之前的综合1024开发实践，多了一些内容：显示动画，页面跳转和数据传输，网格容器Grid，自定义windows之类的东西。本来想做一个分布式HarmonyOSArkUI3.0木棉扫雷，但是因为没有对应API版本的分布式模拟器或者多台真机调试运行，只能以单机尴尬的实战收场￣□￣||效果图代码文件结构文本1.创建一个空白工程1.安装配置DevEcoStudio3.0DevEcoStudio3.0下载DevEcoStudio3.0安装2.创建一个EmptyeTSAbility应用DevEcoStudio下载安装成功后，打开DevEcoStudio，点击在左上角的File中，点击New，然后选择NewProject，选择EmptyAbility选项，点击Next按钮。将文件命名为扫雷（文件名不能出现中文或特殊字符，否则无法成功创建工程文件），ProjectType选择Application，选择保存路径，Language选择eTS，API7，Phone选择设备，最后点击完成按钮。3、准备工作在entry>src>main>config.json文件底部的“launchType”:“standard”后面添加如下代码，这样应用上面的标签栏就可以去掉了。config.json底部的代码："metaData":{"customizeData":[{"name":"hwc-theme","value":"androidhwext:style/Theme.Emui.Light.NoTitleBar","额外的“：”“}]}4。保存图片将图片保存到entry>src>main>resources>rawfile。二、欢迎页面1、修改文件名。在entry>src>ets>default>pages>index.ets文件上右击，在弹出的菜单栏中选择Refactor，然后在弹出的子菜单栏中选择Rename，或者按Shift+F6，命名文件logo.ets。将entry>src>main>config.json文件中“js”项中的“pages”项中的“pages/index”改为“pages/logo”。config.json底部的代码："js":[{"mode":{"syntax":"ets","type":"pageAbility"},"pages":["pages/logo"],“名称”：“默认”，“窗口”：{“designWidth”：720，“autoDesignWidth”：false}}]2。在logo.ets文件中添加背景，通过Image($rawfile('LOGO.png'))放置Logo图片，文字内容可以通过Text('kapokminesweeper')放置。属性linearGradient是设置渐变颜色，linearGradient中的angle为渐变角度，设置为180，即从上到下渐变，colors为渐变的颜色。logo.ets:@Entry@ComponentstructLogo{build(){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Column}){Image($rawfile('LOGO.png')).objectFit(ImageFit.Contain).height(300)Text('木棉扫雷').fontSize(30).fontColor(Color.White).margin({top:200})}.width('100%').height('100%').linearGradient({angle:180,colors:[['#D3D7DC',0.1],["#B4BED2",0.6],["#A0AAC8",1]})}}3.添加动画效果这里使用的动画效果是通过animateTo显式动画实现的。animateTo显式动画可以设置组件从状态A到状态B变化的动画效果，包括样式、位置信息、节点的增删等，开发者无需关注变化过程，只需要关注需要指定开始和结束状态。animateTo还提供了播放状态的回调接口，是对属性动画的增强和封装。添加状态变量opacityValue和scaleValue，并初始化为0，分别用于表示透明度和缩放倍数。在动画效果中实现这两个值从0到1，就可以实现Logo的淡出和放大效果。定义一条贝塞尔曲线cubicBezier，Curves.cubicBezier(0.1,0.2,1,1)。由于需要用到动画能力接口中的插值计算，所以需要导入curves模块。@ohos.curves模块提供线性曲线的初始化函数。线性、阶梯、三次贝塞尔和弹簧插值曲线，可以根据输入参数创建插值曲线对象。在animateTo显式动画中，设置动画持续时间（duration）为2s，延时（delay）0.1s开始播放，设置闭包函数（curve）显示动画事件，即开始状态到结束状态是透明度opacityValue和大小scaleValue从0到1。logo.ets://@ts-nocheckimportCurvesfrom'@ohos.curves'@Entry@ComponentstructLogo{@StateprivateopacityValue:number=0@StateprivatescaleValue:number=0privatecurve1=Curves.cubicBezier(0.1,0.2,1,1)build(){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Column}){Image($rawfile('LOGO.png')).objectFit(ImageFit.Contain).height(300).scale({x:this.scaleValue,y:this.scaleValue}).opacity(this.opacityValue).onAppear(()=>{animateTo({duration:2000,curve:this.curve1,delay:100,},()=>{this.opacityValue=1this.scaleValue=1})})Text('木棉扫雷').fontSize(30).fontColor(Color.White).margin({top:200})}.width('100%').height('100%').linearGradient({angle:180,colors:[['#D3D7DC',0.1],["#B4BED2",0.6],["#A0AAC8",1]]})}}4。添加跳转效果首先创建一个mainpage.ets文件。在animateTo的onFinish回调接口显示动画播放结束，调用timer定时器的setTimeout接口延时1秒后，调用router.replace显示mainpage.ets页面。路由器模块也需要导入。logo.ets://@ts-nocheckimportrouterfrom'@system.router'importCurvesfrom'@ohos.curves'@Entry@ComponentstructLogo{@StateprivateopacityValue:number=0@StateprivatescaleValue:number=0privatecurve1=Curves.cubicBezier(0.1,0.2,1,1)build(){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Column}){Image($rawfile('LOGO.png')).objectFit(ImageFit.Contain)。高度(300).scale({x:this.scaleValue,y:this.scaleValue}).opacity(this.opacityValue).onAppear(()=>{animateTo({duration:2000,curve:this.curve1,delay:100,onFinish:()=>{setTimeout(()=>{router.replace({uri:"pages/mainpage"})},1000);}},()=>{this.opacityValue=1this.scaleValue=1})})Text('木棉扫雷').fontSize(30).fontColor(Color.White).margin({top:200})}.width('100%').height('100%').linearGradient({angle:180,colors:[['#D3D7DC',0.1],["#B4BED2",0.6],["#A0AAC8",1]]})}}3.首页1.添加背景游戏页面的背景和欢迎页面几乎一样，这里不再赘述。mainpage.ets:@Entry@ComponentstructMainpage{build(){Column(){Image($rawfile('mine.png')).objectFit(ImageFit.Contain).height(300).scale({x:0.5,y:0.5}).opacity(0.8)}.width('100%').height('100%').linearGradient({angle:180,colors:[['#D3D7DC',0.1],["#B4BED2",0.6],["#A0AAC8",1]]})}}2.添加按钮从效果图中我们可以看出按钮的样式是一致的，所以我们可以使用装饰器@Component来自定义按钮。添加四个变量String、difficulty、Number_row、Number_column，分别用于记录难度文本、地雷数、格子行数、格子列数。在Button组件中设置图像和文本的样式。在装饰器@Entry装饰的组件中，通过调用自定义组件绘制三个按钮。mainpage.ets:@Entry@ComponentstructMainpage{build(){Column(){Image($rawfile('mine.png')).objectFit(ImageFit.Contain).height(300).scale({x:0.5,y:0.5}).opacity(0.8)setButton({String:'初级',difficulty:10,Number_row:9,Number_column:9});setButton({String:'中级',difficulty:30,Number_row:12,Number_column:12});setButton({String:'高级',难度:50,Number_row:16,Number_column:16});}.width('100%').height('100%').linearGradient({angle:180,colors:[['#D3D7DC',0.1],["#B4BED2",0.6],["#A0AAC8",1]]})}}@ComponentstructsetButton{privateString:stringprivatedifficulty:numberprivateNumber_row:numberprivateNumber_column:numberbuild(){Button({type:ButtonType.Capsule,stateEffect:true}){Column(){Text(this.String).textAlign(TextAlign.Center).fontSize(30).fontWeight(600).fontColor('#0000FF').margin({top:-5})Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Row}){Text('（'+this.difficulty.toString()+'一个').textAlign(TextAlign.Center).fontSize(22).fontWeight(600).fontColor('#416EBE').margin({top:-2,right:5})Image($rawfile('mine.png')).height(26).width(26)Text(this.Number_row.toString()+'*'+this.Number_column.toString()+')').textAlign(TextAlign.Center).fontSize(22).fontWeight(600).fontColor('#416EBE').margin({left:5,top:-2})}.margin({top:5})}}.width(220).height(90).backgroundColor('#F3F7FF').margin({top:10})}}3、响应点击跳转事件，首先创建一个game.ets文件，在自定义按钮组件中添加点击事件onClick()，调用router。push接口，其中uri为重定向页面，params为携带的数据，形式为params:{key:values}，在新页面调用router.getParams().key获取对应的数据页面跳转时携带的key，同样需要引入路由模块。mainpage.ets:importrouterfrom'@system.router'@Entry@ComponentstructMainpage{build(){Column(){Image($rawfile('mine.png')).objectFit(ImageFit.Contain).height(300).scale({x:0.5,y:0.5}).opacity(0.8)setButton({String:'初级',难度:10,Number_row:9,Number_column:9});setButton({String:'中级',难度:30,Number_row:12,Number_column:12});setButton({String:'高级',难度:50,Number_row:16,Number_column:16});}.width('100%').height('100%').linearGradient({angle:180,colors:[['#D3D7DC',0.1],["#B4BED2",0.6],["#A0AAC8",1]]})}}@ComponentstructsetButton{privateString:stringprivatedifficulty:numberprivateNumber_row:numberprivateNumber_column:numberbuild(){Button({type:ButtonType.Capsule,stateEffect:true}){Column(){Text(this.String).textAlign(TextAlign.Center).fontSize(30).fontWeight(600)).fontColor('#0000FF').margin({top:-5})Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Row}){Text('（'+this.难度.toString()+'a').textAlign(TextAlign.Center).fontSize(22).fontWeight(600).fontColor('#416EBE').margin({top:-2,right:5})Image($rawfile('mine.png')).height(26).width(26)Text(this.Number_row.toString()+'*'+this.Number_column.toString()+')').textAlign(TextAlign.Center).fontSize(22).fontWeight(600).fontColor('#416EBE').margin({left:5,top:-2})}.margin({top:5})}}.width(220.height(90).backgroundColor('#F3F7FF').margin({top:10}).onClick(()=>{router.push({uri:'pages/game',params:{difficulty:this...继续分享游戏页面的实现(～￣▽￣)～文章相关附件可点击下方原文链接下载https://harmonyos.51cto.com/resource/1541更多内容请访问：与华为合作共建鸿蒙技术社区https://harmonyos.51cto.com
