javascript - 无限图像自动收报机动画口吃

Question

我正在使用 jQuery 的 animate 创建一个无限的图像自动收报机 - 原则上这很有效，但动画断断续续。在网上(大量)查看了 Velocity 等各种替代方案并尝试了这些替代方案之后，我就是无法顺利地工作。我认为问题是 jQuery 本身没有充分利用 GPU 引起的，但我不确定如何解决这个问题。

HTML 看起来像这样:

var img;

function imgScroll() {
  img = $(".retailer-scroller .gallery-row img").first();
  var newspeed = 80000 / (40 - (Math.sqrt(img.width()) * 1.65));
  img.animate({
    width: 0,
    padding: 0
  }, newspeed, 'linear', function() {
    img.removeAttr("style");
    img.remove();
    $(".retailer-scroller .gallery-row").append(img);
    imgScroll();
  });
}
$(document).ready(function() {
  imgScroll();
});

.retailer-scroller {
  width: 100%;
  height: 70px;
  position: relative;
  overflow: hidden;
  margin: 10px 0;
}
.retailer-scroller .gallery-row {
  min-width: 2000px;
  height: 65px;
  position: absolute;
  left: -500px;
  white-space: nowrap;
  padding: 0;
}
.retailer-scroller .gallery-row img {
  display: inline-block;
}
.img-responsive {
  height: auto;
  max-width: 100%;
}
.retailer-scroller img {
  filter: grayscale(100%);
  max-height: 65px;
  opacity: 0.75;
  padding-left: 50px;
  width: auto;
}
.retailer-scroller img:hover {
  filter: none;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="retailer-scroller">
  <div class="row gallery-row">
    <img alt="boots" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/boots.png">
    <img alt="specsavers" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/specsavers.png">
    <img alt="RSMcCollLogo" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/RSMcCollLogo.jpg">
    <img alt="kirkgate-barbers" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/kirkgate-barbers1.jpg">
    <img alt="semichem-red" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/semichem-red.jpg">
    <img alt="Poundland-Logo" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/Poundland-Logo.jpg">
    <img alt="shoezone" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/shoezone.png">
    <img alt="lidl" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/lidl.png">
    <img alt="HandT_pawn" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/HandT_pawn-e1427199428773.jpg">
    <img alt="store21logo2" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/store21logo2-e1427200645809.jpg">
    <img alt="Peacocks-Logo" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/Peacocks-Logo.jpg">
    <img alt="optical express" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/optical-express.png">
    <img alt="farmfoods" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/farmfoods.png">
    <img alt="bankofscotland" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/bankofscotland.png">
    <img alt="cancerresearch" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/cancerresearch.png">
    <img alt="bhf-gallery" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/bhf-gallery.png">
    <img alt="Card_Factory" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/Card_Factory.jpg">
    <img alt="superdrug" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/superdrug.png">
    <img alt="Basic CMYK" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/lloyds_pharmacy.jpg">
    <img alt="Ramsdens-Financial-Limited-Logo" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/Ramsdens-Financial-Limited-Logo.gif">
    <img alt="poundstretcher" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/poundstretcher.png">
    <img alt="73e4616e_380x97" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/73e4616e_380x97.png">
  </div>
</div>

关于如何让这个动画更流畅有什么想法吗？在页面上使用上面的代码时，它会变慢并且变得更加不稳定/跳跃。

如有任何帮助，我们将不胜感激。

Answer 1

经过更多的测试和挫折，我终于找到了这个网站 enter link description here并将我的代码修改为如下所示:

$(document).ready(function(){
	$(".retailer-scroller .gallery-row img").clone().appendTo( ".retailer-scroller .gallery-row" ); 
});

@-webkit-keyframes loop {
  0% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -moz-transform: translateX(-750%);
    -ms-transform: translateX(-750%);
    -webkit-transform: translateX(-750%);
    transform: translateX(-750%);
  }
}
@-moz-keyframes loop {
  0% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -moz-transform: translateX(-750%);
    -ms-transform: translateX(-750%);
    -webkit-transform: translateX(-750%);
    transform: translateX(-750%);
  }
}
@-ms-keyframes loop {
  0% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -moz-transform: translateX(-750%);
    -ms-transform: translateX(-750%);
    -webkit-transform: translateX(-750%);
    transform: translateX(-750%);
  }
}
@keyframes loop {
  0% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -moz-transform: translateX(-750%);
    -ms-transform: translateX(-750%);
    -webkit-transform: translateX(-750%);
    transform: translateX(-750%);
  }
}
.retailer-scroller {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.retailer-scroller > .scroller-block {
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  min-width: 100% !important;
  height: 80px;
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-animation: loop 160s linear infinite;
  -moz-animation: loop 160s linear infinite;
  -o-animation: loop 160s linear infinite;
  animation: loop 160s linear infinite;
}
.retailer-scroller > .scroller-block > .gallery-row {
  white-space: nowrap;
  float: left;
  display: inline-block;
  overflow: hidden;
  height: 80px;
  min-width: 100%;
}
.retailer-scroller > .scroller-block > .gallery-row img {
    margin: 0 20px;
    max-height: 60px !important;
    width: auto !important;
    display: inline-block;
    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");
    filter:gray; 
    -webkit-filter:grayscale(100%); 
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="retailer-scroller">
<div class="scroller-block">
<div class="row gallery-row">
<img alt="boots" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/boots.png" >
<img alt="specsavers" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/specsavers.png">
<img alt="RSMcCollLogo" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/RSMcCollLogo.jpg">
<img alt="kirkgate-barbers" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/kirkgate-barbers1.jpg">
<img alt="semichem-red" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/semichem-red.jpg">
<img alt="Poundland-Logo" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/Poundland-Logo.jpg">
<img alt="shoezone" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/shoezone.png">
<img alt="lidl" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/lidl.png">
<img alt="HandT_pawn" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/HandT_pawn-e1427199428773.jpg">
<img alt="store21logo2" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/store21logo2-e1427200645809.jpg">
<img alt="Peacocks-Logo" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/Peacocks-Logo.jpg">
<img alt="optical express" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/optical-express.png">
<img alt="farmfoods" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/farmfoods.png">
<img alt="bankofscotland" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/bankofscotland.png">
<img alt="cancerresearch" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/cancerresearch.png">
<img alt="bhf-gallery" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/bhf-gallery.png">
<img alt="Card_Factory" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/Card_Factory.jpg">
<img alt="superdrug" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/superdrug.png">
<img alt="Basic CMYK" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/lloyds_pharmacy.jpg">
<img alt="Ramsdens-Financial-Limited-Logo" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/Ramsdens-Financial-Limited-Logo.gif">
<img alt="poundstretcher" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/poundstretcher.png">
<img alt="73e4616e_380x97" class="img-responsive" src="//s3.amazonaws.com/studio4-demofiles/nkg/73e4616e_380x97.png">
</div>
</div>
</div>

我希望这对其他人有帮助。