Не плавная анимация на смартфонах, как можно доработать, есть ли способ ограничить частоту кадров для анимаций?

Question

[Aspirant555]

В общем добавляю анимацию. На ПК всё отлично, смартфон не вывозит... Менял на translate3d, не помогло.

Изучая вопрос, пришёл к выводу, что это происходит из-за присвоения максимальной частоты кадров для каждого анимированного элемента, возможно, что есть способ ограничить частоту кадров, или синхронизировать элементы?

Нашёл функцию animation-timing-function: steps(5, end);

пробую на деле, по результату отпишусь.

В общем, ограничил частоту в 30 кадров в сек, стало получше, но не сильно.

В упор не используется GPU, даже с

document.getElementById('g'+x[2]).style.willChange  = 'transform';

var c = document.getElementById('gobl3').getBoundingClientRect();
              var d = document.getElementById(x[2]).getBoundingClientRect();
              var d2 = document.getElementById(x[7]).getBoundingClientRect();
              
              document.getElementById('g'+x[2]).style.animation = '0.5s forwards g'+x[2];
              document.getElementById('g'+x[7]).style.animation = '0.5s ease 0.5s 1 normal forwards running g'+x[7];
              document.getElementById('gg'+x[2]).style.animation = '0.5s forwards gg'+x[2];
              document.getElementById('gg'+x[7]).style.animation = '0.5s ease 0.5s 1 normal forwards running gg'+x[7];
              
              function getRndInteger(min, max) {
                return Math.floor(Math.random() * (max - min + 1) ) + min;
              }

              var z = getRndInteger(-5, 5);
              var a = c.left-d.left;
              var a2 = c.left-d2.left;
              var b = c.top-d.top;
              var b2 = c.top-d2.top;
              var style = document.createElement('style');
                    style.id = "style1";
              var keyFrames = '\
              @keyframes g'+x[2]+' {\
                from {\
                      transform: translate('+a+'px, '+b+'px) rotateX(180deg);\
                  }\
                  to {\
                    transform: translate(0px, 0px) rotateX(0deg) rotate('+ z +'deg);\
                      z-index: 1;\
                      visibility: visible;\
                  }\
              }\
              @keyframes gg'+x[2]+' {\
                    from {\
                      transform: translate('+a+'px, '+b+'px) rotateX(180deg);\
                      visibility: visible;\
                  }\
                  to {\
                    transform: translate(0px, 0px) rotateX(0deg) rotate('+ z +'deg);\
                    visibility: hidden;\
                      z-index: 0;\
                  }\
              }\
              @keyframes g'+x[7]+' {\
                from {\
                  transform: translate('+a2+'px, '+b2+'px) rotateX(180deg);\
                  }\
                  to {\
                    transform: translate(0px, 0px) rotateX(0deg) rotate('+ z +'deg);\
                      z-index: 1;\
                      visibility: visible;\
                  }\
              }\
              @keyframes gg'+x[7]+' {\
                    from {\
                      transform: translate('+a2+'px, '+b2+'px) rotateX(180deg);\
                      visibility: 1;\
                  }\
                  to {\
                    transform: translate(0px, 0px) rotateX(0deg) rotate('+ z +'deg);\
                    visibility: hidden;\
                      z-index: 0;\
                  }\
              }';
              style.innerHTML = keyFrames;
        //      if (document.getElementById('style1')) {
        //        document.getElementById('style1').remove();
        //   }
              document.getElementById('razdacha').appendChild(style);

Comments

[Сергей delphinpro]

ну поменяйте смартфон на нормальный. Или (лучше) отключите нахрен свои анимации на мобилах. Они никому не упёрлись.

[Aspirant555]

Сергей delphinpro, да вроде должен вывозить простую анимацию квалком 630, да и в играх проблем не было. Просто, как буд-то аппаратное ускорение не подключается, хотя хаком в таких ситуациях используют translate3d