问题描述
我正在 8th Wall 上开发 Web-AR 动画,并且有一个包含 5 个动画的模型。这些动画属于模型的不同组件。我想通过屏幕上的按钮与动画交互。由于这些按钮,有时可以同时播放多个动画。
这是我的问题:
我想不止一次播放这些动画,而且它们需要在最后一帧暂停。我在网上搜索了关于动画在最后一帧暂停的信息,我发现了动画混合器组件的“clampWhenFinished”属性。
问题是,如果我将“clampWhenFinished: true”属性与“loop: repeat”一起使用,它不会在最后一帧停止。另一方面,如果我将“clampWhenFinished: true”属性与“loop: once”一起使用,它会在最后一帧停止,但是当我再次按下启动相同动画的按钮时,它不会再次播放动画。>
您可以在下面看到相关的代码片段。我试图用超时函数处理上面的问题,但它导致了很多错误。除此之外,我尝试使用“timeScale”属性来处理这个问题,因为我无法将“clampWhenFinished: true”属性与“loop: repeat”一起使用。
const modelTop = document.getElementById('model_top')
const animationList = ['Animation_Door_Open','Animation_Door_Close','Animation_Basket_Low','Animation_Basket_Mid','Animation_Basket_Top']
topButton.onclick = topBasket
// Play animation.
const topBasket = () => {
modelTop.setAttribute('animation-mixer',{
clip: animationList[4],timeScale: 1,loop: 'repeat',})
// Pause animation.
setTimeout(() => {
modelTop.setAttribute('animation-mixer',{
clip: animationList[4],timeScale: 0,})
},1900)
}
// Play animation reverse.
const topReverse = () => {
modelTop.setAttribute('animation-mixer',timeScale: -1,})
// Pause animation.
setTimeout(() => {
modelTop.setAttribute('animation-mixer',1800)
isTopOpen = false
}
第二个问题是,我想在其他动画完成时触发一个动画。有没有像“事件监听器”这样的选项来解决这个问题?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)