Question

我有一个带背景图像的DIV容器。

当我用JS动画比例进行动画处理时-我得到了震撼的效果。如何使其平滑？

$('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/

Answer 1

类似的事情可能起作用。它使用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);
    }

Answer 2

抖动是由于未在重绘中使用硬件加速的结果。无论何时设置动画，选择某些属性进行动画以改善此性能都是很重要的。动画transform比background-size更好。

为了实现从较小到较大的更改，我将jQuery animate()函数更改为简单的css()转换比例尺更改。 scale()函数中的值为新大小。在此示例中，2等于原始大小的200％。

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

在CSS中添加的transition属性控制持续时间和更改的任何缓和。您可以使用overflow: hidden将这种方法放在div内，以实现背景图像效果。

$('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>

Answer 3

还要为初始状态设置背景大小，并为动画添加缓动。这就是我所实现的。

   $('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>

用js动画缩放背景图像-摇晃图像

3 个答案: