HarmonyOS鸿蒙Next中动画中的控件无法触发事件
HarmonyOS鸿蒙Next中动画中的控件无法触发事件
个人在工作中写了一段动画代码，代码动画运行中，无法触发事件。让我颇为惆帐。onClick 无效了
代码如下：
import { display, router } from '@kit.ArkUI';
let screenWidth: number = px2vp(display.getDefaultDisplaySync().width)
@Entry
@Component
struct TestAnimationPage {
@State starList: string[] = ["1","1","1","1","1"]
// 动画设置
private times: number[] = [4500, 5500, 6500]
@State isFinish: boolean = false
private btnWidth: number = 277 //277 80
private btnHeight: number = 72 //72 44
private startPointX: number = (screenWidth + this.btnWidth)
private endPointX: number = -this.btnWidth
//
onPageShow(): void {
setTimeout(() => {
this.startAnimation()
}, 500)
}
stopAnimation() {
// animateTo({
// duration: 0,
// onFinish: () => {
// }
// }, () => {
// })
}
startAnimation() {
// console.log('startAnimation --------- aboutToDisappear')
// 建议使用this.getUIContext()?.animateTo()
this.isFinish = !this.isFinish
// animateTo({
// duration: this.times[Math.random()%3],
// curve: Curve.Linear,
// delay:(Math.random()%3*200),
// iterations: -1,
// // playMode: PlayMode.Normal,
// onFinish: () => {
// this.isFinish = !this.isFinish
// }
// }, () => {
// this.isFinish = !this.isFinish
// })
}
build() {
Column() {
ForEach(this.starList, (item: string, index: number) => {
//
Button('anmiationas')
.onClick(() => {
console.log('BulletComment');
router.pushUrl({ url: 'pages/APage', params: item })
})
.id('BulletComment')
.width(this.btnWidth)
.height(this.btnHeight)
.position({ x: (this.isFinish ? this.endPointX : this.startPointX), y: 10 + (this.btnHeight + 15) * index })
.animation({
iterations: -1,
duration: this.times[index%3],
curve: Curve.Linear,
delay: (Math.random() % 3 * 200)
})
})
//
}
.width('100%')
.layoutWeight(1)
.alignItems(HorizontalAlign.End)
}
}
更多关于HarmonyOS鸿蒙Next中动画中的控件无法触发事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html
11 回复
如果你是想要实现弹幕功能，你可以看看这个，用的三方插件。
更多关于HarmonyOS鸿蒙Next中动画中的控件无法触发事件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
问题已经解决 停止的时候可以用，有点击效果，运动中不可用，控件不超出容器外就行了。不太完美
```typescript
import { AnimatorOptions, AnimatorResult, promptAction, display } from '[@kit](/user/kit).ArkUI';
let screenWidth: number = px2vp(display.getDefaultDisplaySync().width)
[@Entry](/user/Entry)
[@Component](/user/Component)
struct TestAnimationPage {
textWidth: number = 80;
begin = screenWidth + this.textWidth
end = 0
[@State](/user/State) positionX: number = this.begin;
list: string[] = ['1', '1', '1', '1', '1', '1'];
build() {
Column({
space: 15
}) {
ForEach(this.list, (item: string, index: number) => {
Text("Animat")
.position({ x: this.positionX, y: index * (30 + 10) })
.height(30)
.width(80)
.backgroundColor(Color.Green)
.animation({
duration: 5000,
curve: Curve.Ease,
iterations: -1,
delay: (index % 4 * 300)
}) // 第三步:为自定义可动画属性接口绑定动画
.onClick(() => {
console.log('animatableWidth ')
promptAction.showToast({ message: 'ok' })
})
})
}
.width("100%")
.layoutWeight(1)
.justifyContent(FlexAlign.Start)
Button("Play")
.height(50)
.width(120)
.onClick(() => {
this.positionX = this.end
})
}
}
你看看这样的呢
import { AnimatorOptions, AnimatorResult } from '@kit.ArkUI';
@Entry
@Component
struct Index {
@State starList: string[] = ["1", "1", "1", "1", "1"]
private btnHeight: number = 72
@State arr: number[] = [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
// 创建动画的初始参数
options: AnimatorOptions = {
duration: 5000,
easing: "friction",
delay: 0,
fill: "forwards",
direction: "normal",
iterations: 2,
// 动画onFrame 插值首帧值
begin: 0,
// 动画onFrame 插值尾帧值
end: 350.0
};
@State result: AnimatorResult | undefined = undefined
@State translateX: number = 0
aboutToAppear(): void {
this.result = this.getUIContext().createAnimator(this.options);
// 设置接收到帧时回调，动画播放过程中每帧会调用onFrame回调
this.result
.onFrame = (value: number) => {
this.translateX = value
}
}
onPageHide(): void {
this.result = undefined;
}
build() {
Column() {
Button('播放')
.onClick(() => {
this.result?.play();
}).width(80).height(35)
Button("暂停")
.onClick(() => {
this.result?.pause();
}).width(80).height(35)
ForEach(this.starList, (item: string, index: number) => {
Button('anmiationas')
.id('BulletComment')
.width(200)
.height(this.btnHeight)
.onClick(() => {
console.log('BulletComment');
})
.translate({
x: this.translateX - this.arr[index],
y: 10 + (this.btnHeight + 15) * index
})
})
}
.width('100%')
.layoutWeight(1)
.alignItems(HorizontalAlign.Start)
}
}
在HarmonyOS鸿蒙Next中，动画中的控件无法触发事件可能是由于动画过程中控件的状态发生了变化，导致事件监听器无法正常响应。鸿蒙系统的动画机制可能会改变控件的可见性、位置或交互状态，从而影响事件的触发。具体原因可能包括：
- 动画过程中控件不可见：如果动画将控件的透明度设置为0或将其移出可视区域，控件将无法接收触摸事件。
- 动画改变了控件的位置：如果动画改变了控件的位置，但未正确更新事件监听器的坐标范围，可能导致事件无法触发。
- 动画影响了控件的交互状态：某些动画可能会临时禁用控件的交互功能，导致事件无法响应。
要解决此问题，可以检查动画过程中控件的状态变化，确保控件在动画期间保持可交互状态。可以通过调试工具查看控件的属性变化，确认事件监听器是否正确绑定。
