Lottie 动画和悬停：更简单的方法？

Question

我是编码新手，在从事实际项目的同时尝试尽可能多地学习。

我有 8 个 div，每个 div 都有它在 dividual lottie 动画中（每个动画都有它的 .json 文件）。我想在悬停时播放相应的 div 动画。

所以我的 html 看起来像这样

var containerHorloge = document.getElementById("anim-horloge");
var containerBalance = document.getElementById("anim-balance");
var containerOrdi = document.getElementById("anim-ordi");
var containerFamille = document.getElementById("anim-famille");
var containerLunettes = document.getElementById("anim-lunettes");
var containerBonhomme = document.getElementById("anim-bonhomme");
var containerCoupes = document.getElementById("anim-coupes");
var containerPinpoint = document.getElementById("anim-pinpoint");

var animHorloge = bodymovin.loadAnimation({
    container:  containerHorloge,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-horloge.json'

});
var animBalance = bodymovin.loadAnimation({
    container:  containerBalance,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-balance.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerOrdi,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-ordi.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerFamille,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-famille.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerLunettes,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-lunettes.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerBonhomme,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-bonhomme.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerCoupes,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-coupes.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerPinpoint,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-pinpoint.json'
});


$(".section-cases .vc_col-sm-3.div-horloge").on('mouseenter', function(event) {
    event.preventDefault();
    onEnter:animHorloge.play();

})

<div class="vc_col-sm-3 div-horloge"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>

（例如，我只是给了一个 div 一个特定的 class，但是每个 div 都会有它自己的特定 class..也许。大声笑）现在我知道我可以分别调用每个 div 上的每个动画，但我想弄清楚是否有更简洁/更短的方法来做到这一点？一个循环？我想到了一个 forEach 循环，但我什至不知道如何将每个动画与每个 div 相关联。也许数组？

同样，我对编码还很陌生，知道一些基础知识，但对循环、数组等知之甚少。

非常感谢！

编辑

这就是我让它工作的方式（感谢@sam-osb 的回答）

var lottiePlayer = document.getElementsByTagName("lottie-player");

$(lottiePlayer).on('mouseenter', function(event) {
    console.log(this);
    this.setDirection(1)
    this.play()

}).on('mouseleave', function(event) {
    this.setDirection(-1)
    this.play()
});

<div class="box">
        <lottie-player src="/wp-content/uploads/svg/SOURCE_HERE.json"></lottie-player>
        <p>Lorem ipsum</p>
</div>
<div class="box">
        <lottie-player src="/wp-content/uploads/svg/SOURCE_HERE.json"></lottie-player>
        <p>Lorem ipsum</p>
</div>

问题是我想将鼠标悬停在 PARENT (.box div...)

所以我试过了：

$(lottiePlayer).closest(".box")on('mouseenter', function(event) {
    $(this).find(lottiePlayer).play();

})

// or

$(lottiePlayer).closest(".box")on('mouseenter', function(event) {
    this.find(lottiePlayer).play();

})

// or even 

$(lottiePlayer).closest(".box")on('mouseenter', function(event) {
    lottiePlayer.play();

})

// and then

$(".box")on('mouseenter', function(event) {
  this.find(lottiePlayer).play();
 

})

而且总是 returns .play() 不是一个函数...

我知道我在做一些愚蠢的错误，但不知道大声笑

Answer 1

您可以使用带有 'hover' 属性的库在悬停时播放动画，并让它为您加载动画，这样您就可以删除所有 bodymovin 调用：

https://github.com/LottieFiles/lottie-player

只需将 CDN 包含在 HTML 文件的 head 中：

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

然后声明你的元素：

<lottie-player src="URL" hover></lottie-player>

Answer 2

所以在这里和其他问题中得到非常有用的答案后，正确的方法是：

var lottiePlayer = document.getElementsByTagName("lottie-player");

$(".vc_col-sm-3").on('mouseover', function(event) {
  $(this).find(lottiePlayer)[0].play();

});

Lottie 动画和悬停：更简单的方法？

Lottie animations and hovers: simpler way?

javascript

jquery

lottie