【报Bug】微信小程序上面不能够监听动画开始事件和结束事件

怎么解决的，没找到监听动画结束

楼主发帖时间是 2019-09-09 17:23

这都1年半了， 还不能给解决吗？ 同求同求同求

都尼玛2022年还没解决？？？？

都尼玛2023年还没解决？？？？

在微信小程序中，可以使用 animation 组件来创建动画。但是，目前 animation 组件并没有提供动画开始事件和结束事件的监听方法。

不过，你可以通过以下方法实现动画的开始和结束事件的监听：

使用 animation.export() 方法将动画导出为 JSON 对象，并在导出的 JSON 对象中添加 success 和 complete 回调函数，在动画开始和结束时分别调用这两个回调函数。例如：

// 创建一个动画实例  
const animation = wx.createAnimation({  
  duration: 1000,  
  timingFunction: 'ease',  
})  

// 开始动画  
animation.translateX(100).step()  

// 导出动画  
const animationData = animation.export()  

// 添加 success 和 complete 回调函数  
animationData.success = () => {  
  console.log('动画开始')  
}  
animationData.complete = () => {  
  console.log('动画结束')  
}  

// 在页面中使用 animation 组件  
<animation animation-data="{{animationData}}" />

使用 requestAnimationFrame() 方法，在每一帧动画开始和结束时分别调用回调函数。例如：
// 创建一个动画实例
const animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease',
})

// 开始动画
animation.translateX(100).step()

// 定义开始和结束时间戳
let startTime, endTime

// 定义开始和结束回调函数
const startCallback = () => {
console.log('动画开始')
}
const endCallback = () => {
console.log('动画结束')
}

// 定义动画函数
const animate = () => {
// 获取当前时间戳
const now = Date.now()

// 如果开始时间戳未定义，则设置为当前时间戳
if (!startTime) {
startTime = now
}

// 计算已经过去的时间
const elapsed = now - startTime

// 如果已经过去的时间大于等于动画时长，则表示动画已经结束
if (elapsed >= 1000) {
// 调用结束回调函数
endCallback()
return
}

// 调用开始回调函数
if (!endTime) {
startCallback()
}

// 在下一帧继续执行动画函数
requestAnimationFrame(animate)
}

// 在下一帧开始执行动画函数
requestAnimationFrame(animate)

// 在页面中使用 animation 组件
<animation animation-data="{{animation.export()}}" />
以上两种方法都可以实现动画开始和结束事件的监听，具体可以根据实际情况选择使用。

首先，我们需要了解一下微信小程序的动画原理。在微信小程序中，动画的实现是通过CSS3的transition和animation属性来完成的。而这两种属性都没有提供监听动画开始事件和结束事件的接口，因此我们无法直接在这里监听动画事件。

不过，我们可以通过wx.createAnimation()方法来创建动画实例，在创建实例的时候可以设置动画的持续时间、缓动函数等属性，同时也可以设置动画的回调函数，包括开始、进行中、结束时的回调函数。具体代码如下：

const animation = wx.createAnimation({  
  duration: 1000,  
  timingFunction: 'ease',  
  delay: 0,  
  transformOrigin: '50% 50% 0'  
});  

animation.translateX(100).step();  

this.setData({  
  animationData: animation.export()  
});  

animation.rotate(360).step({  
  duration: 1000,  
  timingFunction: 'ease',  
  delay: 0,  
  transformOrigin: '50% 50% 0',  
  success: function() {  
    console.log('animation finished');  
  }  
});  

this.setData({  
  animationData: animation.export()  
});

在这个例子中，我们创建了一个动画实例animation，并设置了translateX的属性，将页面上的某个元素向右移动100px，同时在动画结束时设置了一个回调函数，输出一条信息到控制台。最后，我们将动画的属性通过setData()方法导出到页面中，让动画生效。

这样，我们就可以在微信小程序中实现动画事件的监听啦！如果还有其他问题，欢迎在评论区留言