如何在js中动态改变div的内容而不闪烁

问题描述

欢迎，好吧，我有10个lottie动画，我想在同一个div中一一展示。当按下某个按钮时，我为每个动画执行一个函数，并在函数开始时删除 div 的所有内容以显示新内容，但很明显这会导致闪烁，我想知道是否有更聪明的方法，不会引起闪烁，请注意，我被认为是网站开发的初学者

这是一个链接 http://animationstest.atwebpages.com/,使用 W,A,D,S 移动，没有反应所以用电脑

但是请注意，例如，当您快速按 a 和 d 时，Flickr 不会发生

    <script>
    var animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),renderer: 'svg',loop: false,autoplay: true,path: 'idle.json',});


    var state = "idle";
    document.onkeydown = function(e){
    e = e || window.event;
    var key = e.which || e.keyCode;
    if(state === "idle"){
      if(key===65){
          leftmove();
     }
     if(key===68){
          rightmove();
     }
     if(key===87){
          upmove();
     }
     if(key===83){
          downmove();
     }
    }
    if(state === "leftmove"){
      if(key===68){
       leftback();
     }
    }
    if(state === "rightmove"){
      if(key===65){
          rightback();
     }
    }
    if(state === "upmove"){
      if(key===83){
          upback();
     }
    }
    if(state === "downmoved"){
      if(key===87){
          downback();
     }
    }

   }

    function leftmove(){
        document.getElementById('bm').innerHTML = "";
     animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),path: 'leftmove.json',});
    state = "leftmove";
    }

    function leftback(){
        document.getElementById('bm').innerHTML = "";
       animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),path: 'leftback.json',});
    state = "idle";
    }

    function rightmove(){
        document.getElementById('bm').innerHTML = "";
       animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),path: 'rightmove.json',});
    state = "rightmove";
    }
    function rightback(){
        document.getElementById('bm').innerHTML = "";
      animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),path: 'rightback.json',});
    state = "idle";
    }

    function upmove(){
        document.getElementById('bm').innerHTML = "";
       animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),path: 'upmave.json',});
    state = "upmove";
    }
    function upback(){
        document.getElementById('bm').innerHTML = "";
       animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),path: 'upback.json',});
    state = "idle";
    }

    function downmove(){
        document.getElementById('bm').innerHTML = "";
       animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),path: 'downmove.json',});
    state = "downmoved";
    }
    function downback(){
      document.getElementById('bm').innerHTML = "";
      animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),path: 'downback.json',});
    state = "idle";
    }
  </script>

解决方法

我能够找到另一种方法来更好、更快、更智能地完成我正在做的事情，对于那些关心我的人，我会解释我所做的，只是我试图做的是查看一个简单的 svg按下按钮的基础，所以每次用户在键盘上按下 W、S、A、D 时，我都必须删除旧的 svg 并查看新的 svg 但是这把它取下来并放入导致 Flickr 和人们由于网速较慢，切换到新的 svg 可能会延迟一秒以上，

我所做的是我使用了一个 js 动画引擎，它可以通过使用简单的代码为您的元素设置动画，我发现最好的一个是： https://github.com/juliangarnier/anime