在输入时启动/停止 js 动漫时间轴的最佳方法是什么
What is the best method of starting/ stoping js anime timeline on input
我正在尝试创建一个动画(使用 anime.js),它在用户开始输入时播放一次动画时间轴,并在用户在输入框中输入时循环播放。当用户停止输入时,动画将完成当前循环并停止播放。
这是我目前的进度,您可以观察到动画工作不正常:https://codepen.io/andrewbentley/full/XqMrze
这是我的 anime.js 代码时间表:
var basicTimeline = anime.timeline({
loop: true,
autoplay: false,
duration: 700
});
basicTimeline
.add({
targets: '#circ1',
duration: 100,
translateY: -10,
easing: 'easeInQuad'
})
.add({
targets: '#circ1',
duration: 100,
translateY: 0,
easing: 'easeInQuad'
})
.add({
targets: '#circ2',
duration: 100,
translateY: -10,
easing: 'easeInQuad'
})
.add({
targets: '#circ2',
duration: 100,
translateY: 0,
easing: 'easeInQuad'
})
.add({
targets: '#circ3',
duration: 100,
translateY: -10,
easing: 'easeInQuad'
})
.add({
targets: '#circ3',
duration: 100,
translateY: 0,
easing: 'easeInQuad'
})
.add({
targets: '#circ3',
delay: 100
});
document.querySelector('#email').onkeypress = basicTimeline.play;
document.querySelector('#email').onkeyup = basicTimeline.pause;
有谁能告诉我在使用 anime.js 时间轴实用程序和使用 onkeypress
、onkeyup
等事件侦听器时达到预期效果的最佳方法.
我认为您需要一个计时器,它可以在一段时间不活动后暂停您的动画。
https://codepen.io/anon/pen/qYoPKQ
var timer = false;
document.querySelector('#email').onkeypress = function () {
if(basicTimeline.paused) basicTimeline.play();
if(timer) clearTimeout(timer);
timer = setTimeout(function() {
basicTimeline.pause();
basicTimeline.reset();
}, 500);
};
这里提出了在当前循环结束时停止动画的问题:
on github 那里有一些很好的建议。
也许最好的来自 Edrees Jalili
function pausableLoopAnime({loopComplete, ...options}) {
const instance = anime({
...options,
loop: true,
loopComplete: function(anim) {
if(instance.shouldPause) anim.pause();
if(typeof loopComplete === 'function') loopComplete(anim);
}
});
instance.pauseOnLoopComplete = () => instance.shouldPause = true;
return instance;
}
const animation= pausableLoopAnime({
targets: '.polymorph',
points: [
{ value: '215, 110 0, 110 0, 0 47.7, 0 67, 76' },
{ value: '215, 110 0, 110 0, 0 0, 0 67, 76' }
],
easing: 'easeOutQuad',
duration: 1200,
});
setTimeout(animation.pauseOnLoopComplete, 100)
我正在尝试创建一个动画(使用 anime.js),它在用户开始输入时播放一次动画时间轴,并在用户在输入框中输入时循环播放。当用户停止输入时,动画将完成当前循环并停止播放。
这是我目前的进度,您可以观察到动画工作不正常:https://codepen.io/andrewbentley/full/XqMrze
这是我的 anime.js 代码时间表:
var basicTimeline = anime.timeline({
loop: true,
autoplay: false,
duration: 700
});
basicTimeline
.add({
targets: '#circ1',
duration: 100,
translateY: -10,
easing: 'easeInQuad'
})
.add({
targets: '#circ1',
duration: 100,
translateY: 0,
easing: 'easeInQuad'
})
.add({
targets: '#circ2',
duration: 100,
translateY: -10,
easing: 'easeInQuad'
})
.add({
targets: '#circ2',
duration: 100,
translateY: 0,
easing: 'easeInQuad'
})
.add({
targets: '#circ3',
duration: 100,
translateY: -10,
easing: 'easeInQuad'
})
.add({
targets: '#circ3',
duration: 100,
translateY: 0,
easing: 'easeInQuad'
})
.add({
targets: '#circ3',
delay: 100
});
document.querySelector('#email').onkeypress = basicTimeline.play;
document.querySelector('#email').onkeyup = basicTimeline.pause;
有谁能告诉我在使用 anime.js 时间轴实用程序和使用 onkeypress
、onkeyup
等事件侦听器时达到预期效果的最佳方法.
我认为您需要一个计时器,它可以在一段时间不活动后暂停您的动画。
https://codepen.io/anon/pen/qYoPKQ
var timer = false;
document.querySelector('#email').onkeypress = function () {
if(basicTimeline.paused) basicTimeline.play();
if(timer) clearTimeout(timer);
timer = setTimeout(function() {
basicTimeline.pause();
basicTimeline.reset();
}, 500);
};
这里提出了在当前循环结束时停止动画的问题: on github 那里有一些很好的建议。
也许最好的来自 Edrees Jalili
function pausableLoopAnime({loopComplete, ...options}) {
const instance = anime({
...options,
loop: true,
loopComplete: function(anim) {
if(instance.shouldPause) anim.pause();
if(typeof loopComplete === 'function') loopComplete(anim);
}
});
instance.pauseOnLoopComplete = () => instance.shouldPause = true;
return instance;
}
const animation= pausableLoopAnime({
targets: '.polymorph',
points: [
{ value: '215, 110 0, 110 0, 0 47.7, 0 67, 76' },
{ value: '215, 110 0, 110 0, 0 0, 0 67, 76' }
],
easing: 'easeOutQuad',
duration: 1200,
});
setTimeout(animation.pauseOnLoopComplete, 100)