更新的全局变量未传递给变量内的函数

问题描述

所以我有这些：

var containerId = 'anim1'

var animation = bodymovin.loadAnimation({
  container: document.getElementById(containerId),renderer: 'svg',loop: false,autoplay: false,path: "https://assets10.lottiefiles.com/packages/lf20_rd4wrn81.json"
});

function playanim() {
  animation.goToAndplay(0);
}

$('div').on('click',function() {
  containerId = $(this).attr('id');
  $('#text').text(containerId + ' was just clicked');
  playanim();
})

全局变量 containerId 会在点击事件上更新，但是更新后的值不会传递到变量 containerId 中的同一个 animation。不确定这是否是 bodymovin 的特定问题 - 我怎样才能让它发挥作用？

解决方法

在以 var animation = ... 开头的行中，您正在创建一个对象，将其 container 属性设置为 document.getElementById(containerId)（使用当时 containerId 的任何值，即 { {1}}) 然后将该对象传递给 bodymovin.loadAnimation（大概是作为配置 - 我不熟悉那个库）

当 div 被点击时，'anim1' 的值正在更新，但这不会改变您之前创建的配置对象中 containerId 属性的值；这仍然等于 container。即使它确实发生了变化，除非 bodymovin 正在监视该配置对象，否则它可能没有任何区别。 bodymovin.loadAnimation 很可能在初始化时只检查 anim1 的值，然后再也不检查它。

如果每次单击 div 时都重建动画，它可能会实现您想要的效果，例如类似这样的事情（您可能还想停止旧 div 中的动画？）

container

在不了解 bodymovin 的情况下（抱歉），我不知道这是否是一种效率极低的方法。也许 bodymovin 有一种更轻量级的方法来更改已加载动画的容器，在这种情况下，您可以在点击处理程序中执行此操作。

javascript jquery lottie lottie