我如何使用javascript使其成为用户只能在乐蒂动画完全播放后触发悬停事件?
我怎样才能让用户只能够在乐蒂动画最初完全播放后触发鼠标悬停和鼠标左移事件 当前,当动画正在播放时,用户能够导致悬停事件,这是我不希望发生的事情 谢谢我如何使用javascript使其成为用户只能在乐蒂动画完全播放后触发悬停事件?,javascript,animation,hover,mouseevent,lottie,Javascript,Animation,Hover,Mouseevent,Lottie,我怎样才能让用户只能够在乐蒂动画最初完全播放后触发鼠标悬停和鼠标左移事件 当前,当动画正在播放时,用户能够导致悬停事件,这是我不希望发生的事情 谢谢 var anim4; var anim5 = document.getElementById('lottie5') var animation5 = { container: anim5, renderer: 'svg', loop: true, autoplay: f
var anim4;
var anim5 = document.getElementById('lottie5')
var animation5 = {
container: anim5,
renderer: 'svg',
loop: true,
autoplay: false, /*MAKE SURE THIS IS FALSE*/
rendererSettings: {
progressiveLoad: false},
path: 'https://assets1.lottiefiles.com/packages/lf20_H2PpYV.json',
name: 'myAnimation',
};
anim4 = lottie.loadAnimation(animation5);
// SCROLLING DOWN
var waypoint5 = new Waypoint({
element: document.getElementById('lottie5'),
handler: function(direction) {
if (direction === 'down') {
anim4.playSegments([[130,447],[358,447]], true);
this.destroy()
}
},
offset: '50%'
})
anim5.addEventListener("mouseenter", myScript1);
anim5.addEventListener("mouseleave", myScript2);
function myScript1(){
anim4.goToAndStop(500, true);
}
function myScript2(){
anim4.playSegments([358,447],true);
};
如果有人感兴趣,就把它弄清楚。 这可能不是最有效的方法,但对我来说很有效
anim4.addEventListener('complete', function(e) {
console.log('Animation completed');
});
anim4.addEventListener('complete', function(e) {
var elem = document.getElementById('lottie5');
elem.addEventListener('mouseover', mouseElem)
elem.addEventListener('mouseleave', mouseElem2)
function mouseElem() {
anim4.goToAndStop(150, true);
}
function mouseElem2() {
anim4.goToAndStop(30, true);
}
可能需要将循环设为false,并在动画完成时添加鼠标事件。您可以使用onComplete事件收听动画完成。感谢您的帮助,但这似乎不起作用。悬停时不会发生任何事情。你认为可能是什么?
anim4.addEventListener('complete', function(e) {
console.log('Animation completed');
});
anim4.addEventListener('complete', function(e) {
var elem = document.getElementById('lottie5');
elem.addEventListener('mouseover', mouseElem)
elem.addEventListener('mouseleave', mouseElem2)
function mouseElem() {
anim4.goToAndStop(150, true);
}
function mouseElem2() {
anim4.goToAndStop(30, true);
}