Javascript 如何使此滚动动画的一部分连续循环?
我有一个动画,我想用于具有以下基本状态的翻转效果:Javascript 如何使此滚动动画的一部分连续循环?,javascript,jquery,animation,lottie,bodymovin,Javascript,Jquery,Animation,Lottie,Bodymovin,我有一个动画,我想用于具有以下基本状态的翻转效果: 静止:在第0帧和第55帧之间连续循环 鼠标输入:播放一次第56帧到第78帧,然后在第78帧暂停 鼠标移出:播放一次第79-95帧,然后返回休息状态 除了静止状态下的连续循环外,我几乎让它工作。循环只播放一次,然后静止。我的代码如下: 代码笔: 我已经尝试将loop设置为true,但这会导致所有3个状态都循环,这不是mouseenter和mouseleave效果所需的效果。有没有办法让一个部分循环 如果jQuery能让事情变得更简单的话,我也很乐
如果jQuery能让事情变得更简单的话,我也很乐意切换到jQuery。通过将loop设置为true、在两帧之间循环以获得“暂停”效果以及更密切地监视悬停状态来解决。我相信这可以进一步改进,但在这一点上,我只是很高兴它的工作 更新的代码笔:
var animationContainer = document.getElementById("animation-container");
var animation = lottie.loadAnimation({
wrapper: document.getElementById("animation-wrapper"),
renderer: "svg",
loop: false,
autoplay: false,
prerender: true,
animationData: animationData,
});
animation.addEventListener('DOMLoaded',resting);
animationContainer.addEventListener("mouseenter", hoverStart);
animationContainer.addEventListener("mouseleave", hoverEnd);
function resting() {
animation.removeEventListener("complete", resting);
console.log('resting');
animation.playSegments([0, 55], true);
}
function hoverStart() {
console.log('hover started');
animationContainer.removeEventListener("mouseenter", hoverStart);
animation.playSegments([56, 78], true);
animationContainer.addEventListener("mouseleave", hoverEnd);
}
function hoverEnd() {
console.log('hover ended');
animationContainer.removeEventListener("mouseleave", hoverEnd);
animation.playSegments([79, 95], true);
animation.addEventListener("complete", resting);
animationContainer.addEventListener("mouseenter", hoverStart);
}
var hover = false;
animationContainer.addEventListener("mouseenter", hoverStart);
animation.addEventListener('DOMLoaded',resting);
function resting() {
console.log('resting. hover status: ' + hover);
animation.removeEventListener("loopComplete", resting);
animation.playSegments([0, 55], true);
}
function hoverStart() {
console.log('hover started. hover status: ' + hover);
animationContainer.removeEventListener("mouseenter", hoverStart);
animation.playSegments([56, 78], true);
animation.addEventListener("loopComplete", hoverPause);
}
function hoverPause() {
console.log('hover paused. hover status: ' + hover);
animation.removeEventListener("loopComplete", hoverPause);
animationContainer.addEventListener("mouseleave", hoverEnd);
animation.playSegments([77, 78], true);
console.log('hover pause complete. hover status: ' + hover);
if (!hover) {
animation.addEventListener("loopComplete", hoverEnd);
}
}
function hoverEnd() {
console.log('hover ended. hover status: ' + hover);
animationContainer.removeEventListener("mouseleave", hoverEnd);
animation.removeEventListener("loopComplete", hoverEnd);
animation.playSegments([79, 95], true);
animation.addEventListener("loopComplete", resting);
animationContainer.addEventListener("mouseenter", hoverStart);
}
animationContainer.onmouseout = function () {
hover = false;
}
animationContainer.onmouseover = function () {
hover = true;
}