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

Question

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

我有 8 个 div，每个 div 都有它自己的 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>

(For the example, i just gave one div a specific class, but every div would have it's own specific class.. maybe. lol) Now i know i could just call each animation on each div separately, but i'm trying to figure out if there's a cleaner / shorter way to do this? A loop? I thought of a forEach loop, but i don't even know how i would associate each animation with each div. Maybe arrays ?

再说一次，我对编码相当陌生，并且了解一些基础知识，但对循环、数组等了解不多。

非常感谢！

编辑

这就是我让它工作的方式（感谢@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();
 

})

它总是返回 .play() 不是一个函数...

我知道我做了一些愚蠢的错误，但不知道什么哈哈

Answer 1

您可以将此库与“hover”属性一起使用，以在悬停时播放动画，并让它为您加载动画，以便您可以删除所有 bodymovin 调用：

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

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

然后声明您的元素：

Answer 2

因此，在此处和其他问题中获得非常有用的答案后，正确的方法是：

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

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

});