75 lines
2.5 KiB
Plaintext
75 lines
2.5 KiB
Plaintext
|
@Component
|
|||
|
|
export default struct imageBtn {
|
|||
|
|
//状态变量unPressed，用于控制按钮的状态
|
|||
|
|
@State unPressed: boolean = true
|
|||
|
|
btnWidth: string
|
|||
|
|
btnHeight: string
|
|||
|
|
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
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|