让我的动画在悬停时触发播放。我把一切都搞定了,但是当我试图再次盘旋时,似乎没有任何效果。
我写错了什么想法?
var squares = document.getElementById("test");
var animation = bodymovin.loadAnimation({
container: test,
renderer: "svg",
loop: false,
autoplay: false,
path: "https://dl.dropboxusercontent.com/BodyMovin/squares.json"
});
squares.addEventListener("mouseenter", function () {
animation.play();
});
function playAnim(anim, loop) {
if(anim.isPaused) {
anim.loop = loop;
anim.goToAndPlay(0);
}
}
function pauseAnim(anim) {
if (!anim.isPaused) {
anim.loop = false;
}
}
答案 0 :(得分:3)
当动画到达最后一帧时,它不会回到第一帧。这就是为什么如果你打电话玩,没有任何事情发生,因为它已经结束,没有更多的发挥 你应该这样做:
squares.addEventListener("mouseenter", function () {
animation.goToAndPlay(0);
});
如果你只想在它到达最后一帧时重播它,那么这应该有效:
var isComplete = true;
svgContainer.addEventListener('mouseenter', function(){
if(isComplete){
squares.goToAndPlay(0);
isComplete = false;
}
})
squares.addEventListener('complete', function(){
isComplete = true;
})
答案 1 :(得分:2)
虽然我对Bodymovin(和Lottie)的经历仅来自React Native世界,但我对此有所了解。
这应该非常直接地停止动画并在光标离开元素时重新启动它:
squares.addEventListener("mouseenter", function () {
animation.play();
});
squares.addEventListener("mouseleave", function () {
animation.gotoAndStop(0);
});