Question

客户要求为其bootstrap3网站提供客户徽标的旋转器。徽标的大小不一致，旋转器应在无限循环中自动旋转。

动画不流畅。特别是在FireFox上。有没有更有效的方法来处理动画？

HTML

 buildTypes {
        release {
            debuggable false
            jniDebuggable false
            signingConfig signingConfigs.config
            minifyEnabled false
            zipAlignEnabled true

            applicationVariants.all { variant ->
                variant.outputs.each { output ->
                    def outputFile = output.outputFile
                    if ((variant.buildType.name == 'release') && outputFile != null && outputFile.name.endsWith('.apk')) {
                        def fileName = "myFileName_release_" + defaultConfig.versionName + ".apk"
                        output.outputFile = new File(outputFile.parent, fileName)
                    }
                }
            }


        }
        debug {
            debuggable true
            jniDebuggable false
            renderscriptDebuggable false
            minifyEnabled false
            zipAlignEnabled true
            signingConfig signingConfigs.config

            applicationVariants.all { variant ->
                variant.outputs.each { output ->
                    def outputFile = output.outputFile
                    if ((variant.buildType.name == 'debug') && outputFile != null && outputFile.name.endsWith('.apk')) {
                        def fileName = "myFileName_debug_" + defaultConfig.versionName + ".apk"
                        output.outputFile = new File(outputFile.parent, fileName)
                    }
                }
            }
        }
    }

CSS

<div id="clients_carousel" class="col-md-12 hidden-xs hidden-sm">
  <ul id="scroller" class="clearfix">
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/01/keesler.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/07/wcd.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/07/viva.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/07/magma.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/07/safe.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/2ndimage.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/balboa1.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/smile.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/nfib.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/dental1-e1424199396391.png" alt=""></li>
  </ul>
</div>

JS

#clients_carousel {
  position: relative;
  margin: 0px auto;
  padding: 0px;
  width: 100%;
  height: 40px;
  overflow: hidden;
}

#clients_carousel ul {
  position: absolute;
  list-style-type: none;
  top: 0px;
  left: 0px;
  height: 40px;
  margin: 0px;
  padding: 0px;
  width: 9999px;
}

#clients_carousel ul li {
  float: left;
  position: relative;
  margin: 0px;
  height: 40px;
  padding: 0px 15px;
}

#clients_carousel ul li img {
  height: 40px !important;
  width: auto !important;
}

Answer 1

动画效果最佳，为60 fps（每秒帧数）。 60fps是每~16.7ms的更新。

考虑到这一点，您应该使用16或17作为setInterval。您也可以考虑使用requestAnimationFrame来驱动动画回调（如果您需要传统浏览器支持，github上有一个polyfill）。

Answer 2

我当然没有查看你的所有代码，只是查看了javascript并更改了执行的间隔。简而言之，我调整了数学，似乎有所帮助。你可以调整更多来微调它。另外，请确保您的文件尽可能小以便加载。这是网络开发101，但我想说以防万一。

setInterval(function() {
    if (!$('#clients_carousel ul').is(':animated')) {
      var fWidth = parseInt($('#clients_carousel ul li:first').outerWidth(true), 10);
      var lIndent = parseInt($('#clients_carousel ul').css("left"), 10);
      if (fWidth < Math.abs(lIndent)) {
        $('#clients_carousel ul li:last').after($('#clients_carousel ul li:first'));
        var newIndent = lIndent + fWidth;
        $('#clients_carousel ul').css('left', newIndent + 'px');
        lIndent = newIndent;
      }
      $('#clients_carousel ul').animate({
        left: lIndent - 2
      }, 50, "linear");
    }
  }, .001);

如何平滑setInterval动画？

2 个答案: