масштабирование фонового изображения с помощью js animate - получилось потрясающее изображение - PullRequest
Новая
       67

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

1 голос
/ 30 октября 2019

У меня есть контейнер 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/

Ответы [ 3 ]

0 голосов
/ 30 октября 2019

Встряхивание - результат отсутствия аппаратного ускорения при перерисовке. Всякий раз, когда анимация, важно выбрать определенные свойства для анимации, чтобы улучшить эту производительность. Анимация 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>
0 голосов
/ 30 октября 2019

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

   $('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>
0 голосов
/ 30 октября 2019

Нечто подобное может работать. Он использует преобразования 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);
    }
...