使用 js animate 缩放背景图像 - 得到抖动的图像答案

【问题标题】：scaling background image with js animate - got shaking image使用 js animate 缩放背景图像 - 得到抖动的图像
【发布时间】：2019-10-30 14:17:56
【问题描述】：

我有一个带有背景图片的 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 jquery-animate shake

【解决方案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);
    }

【讨论】：

【解决方案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>

【讨论】：

我觉得他想保持灰色背景

【解决方案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>

【讨论】：