77 lines
2.6 KiB
Plaintext
77 lines
2.6 KiB
Plaintext
@Component
|
||
export default struct imageBtn {
|
||
//状态变量unPressed，用于控制按钮的状态
|
||
@State unPressed: boolean = true
|
||
btnWidth?: string | number
|
||
btnHeight?: string | number
|
||
imgSrc?: Resource
|
||
opacityNum: number = 1
|
||
|
||
@Styles
|
||
customStyle(){
|
||
.width('100%')
|
||
.height('100%')
|
||
}
|
||
|
||
build() {
|
||
Column() {
|
||
Column() {
|
||
Stack() {
|
||
// Image($r('app.media.topB_back'))
|
||
Row() {
|
||
// 判断当前组件为放开状态
|
||
if (this.unPressed) {
|
||
// 插入Row组件，配置过渡效果
|
||
Image(this.imgSrc)// 水波纹扩散动画：Row组件backgroundColor属性变更（#fff -> #ccc），系统插入动画过渡效果，从组建的中心点开始放大，scale{0,0}变更scale{1,1}
|
||
.transition({
|
||
type: TransitionType.Insert,
|
||
opacity: 0,
|
||
})
|
||
}
|
||
// 判断当前组件为按下状态
|
||
else if (!this.unPressed) {
|
||
// 插入Row组件，配置过渡效果
|
||
Image(this.imgSrc)
|
||
.opacity(this.opacityNum)
|
||
.onAppear(() => {
|
||
// 水波纹聚拢动画：Row组件backgroundColor属性变更（#ccc -> #fff），插入动画过渡效果，scale{1,1}变化为scale{0,0}
|
||
animateTo({
|
||
duration: 500,
|
||
// 聚拢动画播放完成后，需要衔接扩散动画，此时Row组件backgroundColor属性变更（#fff -> #ccc），插入动画过渡效果，scale{0,0}变化为scale{1,1}
|
||
onFinish: () => {
|
||
this.opacityNum = 1
|
||
}
|
||
},
|
||
() => {
|
||
this.opacityNum = 0.2
|
||
})
|
||
})
|
||
}
|
||
// 其他状态
|
||
|
||
}
|
||
.justifyContent(FlexAlign.Center)
|
||
.alignItems(VerticalAlign.Center)
|
||
}
|
||
.customStyle()
|
||
}
|
||
.width(this.btnWidth)
|
||
.height(this.btnHeight)
|
||
}
|
||
// onTouch事件，监听状态
|
||
.onTouch((event: TouchEvent) => {
|
||
// 当按钮按下时，更新按钮的状态（unPressed：true -> false）
|
||
if (event.type == TouchType.Down) {
|
||
animateTo({ duration: 400 }, () => {
|
||
this.unPressed = !this.unPressed
|
||
})
|
||
}
|
||
// 当按钮放开时，更新按钮的状态（unPressed：false -> true）
|
||
if (event.type == TouchType.Up) {
|
||
animateTo({ duration: 400 }, () => {
|
||
this.unPressed = !this.unPressed
|
||
})
|
||
}
|
||
})
|
||
}
|
||
} |