Блог

Добро пожаловать, у меня есть 10 анимаций лотти, и я хочу показать их одну за другой в том же 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'),
      renderer: 'svg',
      loop: false,
      autoplay: true,
      path: 'leftmove.json',
  
    });
    state = "leftmove";
    }

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

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

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

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

Я смог найти другой способ сделать то, что я делал лучше, быстрее и умнее, для тех, кому не все равно, я объясню, что я сделал, просто то, что я пытался сделать, это просмотреть простой svg на основе нажатой кнопки, поэтому мне пришлось удалитьстарый svg и просматривать новый svg каждый раз, когда пользователь нажимает W, S, A, D на клавиатуре, но это снимает его и помещает в вызывает Flickr, а у людей с низкой скоростью Интернета переключение на новый svg может быть отложено более чем на секунду,

Что я сделал, так это то, что я использовал движок анимации js, который может анимировать ваши элементы с помощью простого кода, лучший, который я нашел: https://github.com/juliangarnier/anime