了解更多开源请访问：开源基础软件社区https://ost.51cto.com本实验使用UnionpiTiger开发包并烧录OpenHarmony-3.1-Release，Windows安装DevEcoStudio3.0.0.900。实现一个滚动的抽奖页面游戏，联皮虎开发板实际演示效果如下。点击开始滚动，点击停止三个滚动框依次停止。1.新建工程打开DevEcoStudio3.0.0.900新建空能力工程，如下图：工程配置参考如下：整个工程目录的结果预览（手册见下面说明添加一些目录）。2.新建一个滚动图片组件因为三个滚动图片可以复用，所以我们直接写成组件，实现方法如下：(1)在entry/src/main/ets下新建文件夹util和img/MainAbility新建util文件夹和img文件夹，在img目录下添加图片文件slot1~slot6的图片资源（自己要的图片可以自己找，推荐使用正方形的PNG，大小其中案例中为200*200）。新建文件的方法如下图所示。在MainAbility下右击选择New->Directory，输入文件夹名称（util或img），回车新建文件。（2）在util目录下新建slot.ets，在entry/src/main/ets/MainAbility/util目录下右击，选择New->eTSFile，进入slot，回车新建一。(3)slot.ets滚动组件的实现代码使用ImageAnimator帧动画组件实现逐帧播放图片的能力。可配置播放图片列表，可配置每张图片播放时长。详细介绍可以参考ImageAnimatorsslot.ets的代码如下，代码在注释中有解释。//@Entry@Componentexportstructslot{//@Statestate:AnimationStatus=AnimationStatus.Running//@StatehitNumber:number=3//@StateslotWidth:number=100//@StateslotHeight:number=100/*AnimationStatusstateInitial动画的初始状态。Running动画正在播放。Paused动画暂停。Stopped动画处于停止状态*/@Linkstate:AnimationStatus/*hitNumber:这里使用preDecode属性显示状态停止后最后解码的图片*/@LinkhitNumber:number/*Componentwidth*/@LinkslotWidth:串|number/*组件高度*/@LinkslotHeight:string|numberbuild(){Stack(){ImageAnimator()/*所有图片*/.images([{src:'/img/slot1.png',//img文件夹与pages同级duration:100//单位为毫秒，默认时长为1000ms；当时长为0时，不播放图像；该值的改变只会在下一个循环开始时生效；当images中的任意一帧被设置后单独设置时长，属性设置无效。},{src:'/img/slot2.png',持续时间:100},{src:'/img/slot3.png',持续时间:100},{src:'/img/slot4.png',持续时间:100},{src:'/img/slot5.png',duration:100},{src:'/img/slot6.png',duration:100}]).state(this.state)//用于控制播放地位。.reverse(false)//设置播放顺序。false表示从第一张图播放到最后一张图；true表示从最后一张图片播放到第一张图片。.fixedSize(true)//设置图片大小是否固定为组件大小。true表示图片的大小与组件的大小相同。此时设置图片的width、height、top、left属性是无效的。false表示每张图片的width、height、top和left属性必须单独设置。preDecode(this.hitNumber)//preDecode默认值为0，即不开启预解码。如果该值设置为2，则当前播放会在页面加载时，将接下来的两张图片提前加载到缓存中，以提高性能。.fillMode(FillMode.Forwards)//设置动画开始前后的状态.iterations(-1)//设置播放顺序。false表示从第一张图播放到最后一张图；true表示从最后一张图片播放到第一张图片。.onStart(()=>{//状态回调，动画开始时触发console.info('Start')}).onPause(()=>{//状态回调，动画暂停时触发console.info('Pause')}).onRepeat(()=>{//状态回调，动画重放时触发。console.info('Repeat')}).onCancel(()=>{//状态回调，animation播放取消时触发console.info('Cancel')}).onFinish(()=>{//状态回调，动画播放结束时触发console.info('Finish')})}.height(this.slotHeight).width(this.slotWidth)}}如果想先预览效果，可以修改slot.ets如下，这样就可以预览了。@Entry//取消注释@Statestate:AnimationStatus=AnimationStatus.Running//取消注释@StatehitNumber:number=3//取消注释@StateslotWidth:number=100//取消注释@StateslotHeight:number=100//取消注释//@链接状态：AnimationStatus//Comment//@LinkhitNumber:number//Comment//@LinkslotWidth:string|number//注释//@LinkslotHeight:string|number//评论预览效果如下：3.整个页面的实现(1)slot.ets的引用方法如下：直接通过import导入。import{slot}from'../util/slot';//导入滚动图片组件(2)完整的页面代码主要包括标题、背景图片、滚动图片组件、两个按钮。具体实现代码如下。import{slot}from'../util/slot';//导入滚动图片组件@Entry@ComponentstructIndex{//文字信息@Statemessage:string='Drawing'//第一张滚动图片默认或选中ImageID(随机数1~6)@StatehitID1:number=Math.floor(Math.random()*5)+1//第一个滚动图像的状态@Statestate1:AnimationStatus=AnimationStatus.Paused//第一个两张滚动图片默认或选中的图片ID（随机数1~6）@StatehitID2:number=Math.floor(Math.random()*5)+1//第二张滚动图片的状态@Statestate2:AnimationStatus=AnimationStatus.Paused//默认或选中的第三张滚动图片的图片ID（随机数1~6）@StatehitID3:number=Math.floor(Math.random()*5)+1//第三张滚动图片的状态@Statestate3:AnimationStatus=AnimationStatus.Paused//滚动图片组件的宽度@StateslotWidth:string='80vp'//滚动图片的高度agecomponent@StateslotHeight:string='80vp'build(){Row(){Column(){//TitleText(this.message).fontSize('30vp').height('30vp')//背景图片+三张滚动图片Row(){//三张滚动图片Row(){//第一张滚动图片slot({state:$state1,hitNumber:$hitID1,s??lotWidth:$slotWidth,slotHeight:$slotHeight})//第二个滚动图像槽({state:$state2,hitNumber:$hitID2,slotWidth:$slotWidth,slotHeight:$slotHeight})//第一个三个滚动图像slot({state:$state3,hitNumber:$hitID3,slotWidth:$slotWidth,slotHeight:$slotHeight})}.margin({left:'35vp',top:'10vp'})}.backgroundImage('/img/machine.png')//背景图片.backgroundImageSize({height:'100%',width:'100%',}).backgroundImagePosition({x:'0vp',y:'0vp'}).height('280vp').width('360vp').margin({top:'0vp',left:'40vp'})//KeyRow(){//开始按钮，点击开始3次每次滚动框开始Button('Start').width('100vp').height('45vp').padding('5vp').margin({top:'0vp',left:'0vp'}).onClick(()=>{console.info('START');setTimeout(()=>{this.state1=AnimationStatus.Running;控制台。info('ChangeSlot1Running');},500)setTimeout(()=>{this.state2=AnimationStatus.Running;console.info('ChangeSlot2Running');},1000)setTimeout(()=>{this.state3=AnimationStatus.Running;console.info('ChangeSlot3Running');},1500)})//点击停止从第一个滚动框停止，点击三次停止滚动框Button('Stop').width('100vp').height('45vp').padding('5vp').margin({top:'0vp',left:'10vp'}).onClick(()=>{console.info('STOP');如果(this.state1==AnimationStatus.Paused&&this.state2==AnimationStatus.Paused&&this.state3==AnimationStatus.Running){this.hitID3=Math.floor(Math.random()*5)+1;console.info('暂停编号3='+this.hitID3);this.state3=AnimationStatus.Paused;}if(this.state1==AnimationStatus.Paused&&this.state2==AnimationStatus.Running&&this.state3==AnimationStatus.Running){this.hitID2=Math.floor(Math.random()*5)+1;console.info('pausenumber2='+this.hitID2);this.state2=AnimationStatus.Paused;}if(this.state1==AnimationStatus.Running&&this.state2==AnimationStatus.Running&&this.state3==AnimationStatus.Running){this.hitID1=Math.floor(Math.random()*5)+1;console.info('暂停编号1='+this.hitID1);这个.state1=动画状态。暂停；}})}}.width('100%').height('100%').align(Alignment.Center)}.height('100%')}}横屏预览效果如下：vertical的屏幕预览效果如下：4.对HAP进行签名打包，在OTG上运行连接联派Tiger开发板，使用DevEcoStudio3.0.0.900的自动签名。然后点击绿色的运行按钮下载到开发板。操作步骤见动画。感谢您阅读以上文章。文章相关附件可点击下方原文链接下载：https://ost.51cto.com/resource/2320。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。
