масштабирование фонового изображения с помощью js animate - изображение дрожит

У меня есть контейнер DIV с фоновым изображением.

Когда я анимирую его с помощью JS Animate Scale, я получаю эффект тряски. Как сделать его гладким?

$('body').on('click', '#container', function() {
  $("#container").animate({
   "background-size": 1000 + "px"
  }, 4000);
});
#container {
  width: 500px;
  height: 300px;
  margin-top: 100px;
  margin-left: 100px;
  background-color: #eeeeee;
  background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
  background-repeat: no-repeat;
  background-position: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

Вот JSFiddle: https://jsfiddle.net/rn6kwup0/


javascript css shake jquery-animate
person Дмитрий Верёвкин    schedule 30.10.2019    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Что-то вроде этого может сработать. Он использует преобразования css3 для плавного масштабирования:

https://jsfiddle.net/21j3hbae/

    .container {
        width: 500px;
        height: 300px;
        margin-top: 100px;
        margin-left: 100px;
        background-color: #eeeeee;


    }

    .container .inner-image {
      width: inherit;
      height: inherit;
      background-repeat: no-repeat;
        background-position: center;
      background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
      transform: scale(0.5);
      transition: all 8s ease;
      background-size: 100% auto;
    }

    .container.animate .inner-image {
      transform: scale(2);
    }
person Rohan Bhangui    schedule 30.10.2019

arrow_upward
0
arrow_downward

Дрожание возникает из-за того, что при перерисовке не используется аппаратное ускорение. При анимации важно выбрать определенные свойства для анимации, чтобы улучшить производительность. Анимация transform лучше, чем background-size.

Чтобы добиться изменения от меньшего к большему, я изменил функцию jQuery animate() на просто css() изменение преобразования масштаба. Значение внутри функции scale() — это новый размер. В этом примере 2 равно 200% исходного размера.

$("#container").css({
  "transform": "scale(2)"
});

Добавленное свойство transition в CSS управляет продолжительностью и любым смягчением изменений. Вы можете поместить этот подход внутри div с overflow: hidden для достижения эффекта фонового изображения.

$('body').on('click', '#container', function() {
  // use transform instead of animating background-size
  $("#container").css({
    "transform": "scale(2)"
  });
});
#container {
  width: 500px;
  height: 300px;
  margin-top: 100px;
  margin-left: 100px;
  background-color: #eeeeee;
  background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
  background-repeat: no-repeat;
  background-position: center;
  /* control the transition speed here, the second value is duration */
  transition: all 3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

person BugsArePeopleToo    schedule 30.10.2019
comment
Я думаю, он хочет сохранить серый фон - person Rohan Bhangui; 30.10.2019

arrow_upward
0
arrow_downward

Также установите размер фона для начального состояния, добавьте смягчение для анимации. Это то, чего я достиг.

   $('body').on('click', '#container', function() {

        $("#container").animate({
            "background-size": 100 + "%"
        }, {duration: 9000,
      easing: "linear"});


    });
    #container {
        width: 500px;
        height: 300px;
        margin-top: 100px;
        margin-left: 100px;
        background-color: #eeeeee;
        background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
        background-repeat: no-repeat;
        background-position: center;

        background-size: 10%;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

person Trapti Rahangdale    schedule 30.10.2019