[英]How can I get one section of this rollover animation to loop continuously?
I have an animation I'd like to use for a rollover effect with the following basic states:我有一个动画,我想用于具有以下基本状态的翻转效果:
I almost have it working except for a continuous loop on the resting state.除了在静止状态下连续循环外,我几乎让它工作。 The loop plays only once and then sits static.循环只播放一次,然后静止不动。 My code sits as follows:我的代码如下:
Codepen: https://codepen.io/anon/pen/pBXKeN代码笔: https ://codepen.io/anon/pen/pBXKeN
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);
}
I have tried setting loop to true, but this causes all 3 states to loop, which is not the desired effect for the mouseenter and mouseleave effects.我曾尝试将 loop 设置为 true,但这会导致所有 3 个状态循环,这不是 mouseenter 和 mouseleave 效果的预期效果。 Is there a way to get a single section to loop?有没有办法让单个部分循环?
Also I'm happy to switch to jQuery if it makes things simpler.如果它使事情变得更简单,我也很高兴切换到 jQuery。
Solved with a combination of setting loop to true, looping between 2 frames for the "pause" effect and more closely monitoring the hover state.通过将循环设置为 true、在 2 帧之间循环以实现“暂停”效果以及更密切地监视悬停状态的组合来解决。 I'm sure this could be improved further, but at this point I'm just glad to have it working.我相信这可以进一步改进,但在这一点上,我很高兴让它工作。
Updated Codepen: https://codepen.io/matt3/pen/NVxWYJ更新 Codepen: https ://codepen.io/matt3/pen/NVxWYJ
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.