单击不同容器时播放相同的乐透动画

问题描述

我正在寻找一种在点击不同容器时播放相同乐透动画的方法，但似乎无法实现。我该怎么做？

示例代码如下：

$('.lottie-container').on('click',function() {
  playlottie($(this));
})

function playlottie(lottiecontainer) {
  var animation = bodymovin.loadAnimation({
    container: lottiecontainer,renderer: 'svg',loop: false,autoplay: false,path: "https://assets10.lottiefiles.com/packages/lf20_rd4wrn81.json"
  });
  animation.goToAndplay(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie_svg.min.js"></script>

<div class="lottie-container">container1</div><br>
<div class="lottie-container">container2</div>

解决方法

我认为是因为脚本插件错误。

你可以看到你通过你的函数得到了对象。

$('.lottie-container').on('click',function() {
  playlottie($(this));
})

function playlottie(lottiecontainer) {
  console.log($(lottiecontainer).text());
  var animation = bodymovin.loadAnimation({
    container: $(lottiecontainer),renderer: 'svg',loop: false,autoplay: false,path: "https://assets10.lottiefiles.com/packages/lf20_rd4wrn81.json"
  });
  animation.goToAndPlay(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie_svg.min.js"></script>

<div class="lottie-container">container1</div><br>
<div class="lottie-container">container2</div>