介绍
学习鸿蒙eTS有一群了，最近仿照网很容易写出一个音乐播放，感觉eTS学还是上手的，有些地方可能写的不太好，起来多指教。效果图
说明
完整的UI界面和动画效果，等有了搞一下音乐播放的功能。还有现在就是没有真正的播放功能，播放音乐听不到声音，等下把播放音乐了，哪个播放了大佬能用真机帮我测试下，哈哈哈
演示实现
我把界面划分成了四个部分来实现的：标题组件（TitleCpt）、转盘组件（DiskCpt）、组件（ActionCpt）以及音乐组件（CtrlCpt），代码如下：
@Entry
@Component
struct PlayPage {
@State diskAngle: number = 0
@State styliAngle: number = 30
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
TitleCpt()
DiskCpt({ diskAngle: $diskAngle, styliAngle: $styliAngle })
ActionCpt()
CtrlCpt({ diskAngle: $diskAngle, styliAngle: $styliAngle })
}
.width('100%')
.height('100%')
.padding({ left: 16, right: 16 })
.backgroundImage('./common/bg.jpg')
.backgroundImageSize({ width: 1280, height: 2340 })
}
}
下面的分别介绍下这几个组件的实现。
1、标题组件（TitleCpt）实现：
@Component
export default struct TitleCpt {
build() {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Image($r('app.media.cyc')).height(50).width(50)
Column() {
Text('真的爱你').fontColor(Color.White).fontSize(20)
Text('Beyond').fontColor(Color.White).fontSize(15)
}
Image($r("app.media.ic_share")).height(50).width(50)
}
.height(60)
}
}
2、转盘组件（DiskCpt）实现：
@Component
export default struct DiskCpt {
[url=home.php?mod=space&uid=41289]@Link[/url] diskAngle: number
@Link styliAngle: number
build() {
Stack({ alignContent: Alignment.Top }) {
Stack({ alignContent: Alignment.Center }) {
Image($r('app.media.f63')).height(300).width(300)
Image($r('app.media.dog')).height(200).width(200)
Image($r('app.media.pic_disc')).height(300).width(300)
}.margin({ top: 100 })
.rotate({ x: 0, y: 0, z: 1, angle: this.diskAngle })
Stack() {
Image($r('app.media.pic_styli')).height(185).width(101).margin({ left: 70 })
}
.rotate({ x: 0, y: 0, z: 1,
angle: -this.styliAngle,
centerX: '50%',
centerY: 0
})
}
.layoutWeight(1)
.padding({ top: 40 })
}
}
3、互动组件（ActionCpt）实现：
@Component
export default struct ActionCpt {
build() {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) {
Image($r("app.media.ic_love")).height(50).width(50)
Image($r("app.media.ic_download")).height(50).width(50)
Image($r("app.media.ic_comment")).height(50).width(50)
Image($r("app.media.ic_more")).height(50).width(50)
}
}
}
4、音乐控制组件（CtrlCpt）实现：
@Component
export default struct CtrlCpt {
@State sliderValue: number = 40
@State playImage: string= './common/ic_play.png'
@Link diskAngle: number
@Link styliAngle: number
private interval: number = 0
startDiskRotate() {
this.interval = setInterval(() => {
this.diskAngle += 1
}, 10)
}
stopDiskRotate() {
setTimeout(() => {
clearInterval(this.interval)
}, 600)
}
startStyli() {
animateTo({
duration: 600,
curve: Curve.Smooth,
}, () => {
this.styliAngle = 0
})
}
stopStyli() {
animateTo({
duration: 600,
tempo: 0.5,
curve: Curve.Smooth,
}, () => {
this.styliAngle = 30
})
}
build() {
Column() {
Row() {
Text('01:10').fontColor('#cccccc').fontSize(15)
Slider({
value: this.sliderValue, min: 0, max: 100, step: 1,
style: SliderStyle.OutSet
})
.blockColor(Color.White)
.trackColor('#cccccc')
.selectedColor(Color.White)
.showTips(false)
.layoutWeight(1)
.onChange((value: number, mode: SliderChangeMode) => {
this.sliderValue = value
console.info('value:' + value + 'mode:' + mode.toString())
})
Text('01:10').fontColor('#cccccc').fontSize(15)
}
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Image($r("app.media.ic_play_mode")).height(50).width(50)
Row() {
Image($r("app.media.ic_play_pre")).height(50).width(50)
Image(this.playImage).height(50).width(50)
.onClick(() => {
if (this.playImage === './common/ic_play.png') {
this.playImage = './common/ic_pause.png'
this.startDiskRotate()
this.startStyli()
} else {
this.playImage = './common/ic_play.png'
this.stopDiskRotate()
this.stopStyli()
}
})
Image($r("app.media.ic_play_next")).height(50).width(50)
}
Image($r("app.media.ic_play_list")).height(50).width(50)
}
.padding({ bottom: 16 })
}
}
}
总结
开发过程中遇到的问题主要有两个：
兄弟组件传值的问题，使用@State和@Link解决了兄弟组件之间的数据绑定问题
动画，找了半天没找到问题可以手动启动和暂停的动画，最后参考Codela《基础组件滑块的使用（eTS）》，使用setInterval来实现的动画。
原作者：愿得一人心
3
/6 
工商网监
湘ICP备2023018690号
1908
淘帖
3
赞
回复
显身卡
