Question

我在cordova应用程序上为屏幕保护程序制作了一个图像推子/滑块。图像大小平均为200KB - 400KB HTML如下：

<div id="screensaver" class="screensaver">
  <img src="img/landing-bg_1.jpg" class="active" alt="alt" />
  <img src="img/landing-bg_2.jpg" alt="alt" />
  <img src="img/landing-bg_3.jpg" alt="alt" />
</div>

和jQuery：

function cycleImages(){

  var $active = $('#screensaver .active');
  var $next = ($active.next().length > 0) ? $active.next() : $( '#screensaver img:first ');

  $next.css('z-index',2);//move the next image up the pile

  $active.fadeToggle(500,function(){

    //fade out the top image
    $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
    $next.css('z-index',3).addClass('active');//make the next image the top one

  });

}

我遇到的问题是它在浏览器上滚动顺畅，但是一旦我将应用程序编译到APK，它就会大大减慢并变得有点跳跃。有没有办法强迫它使用硬件加速或其他东西。

我搜索了网站，但无法找到类似的问题。如果我对该网站的新用户表示抱歉：）

Answer 1

这可能不是您正在寻找的答案，但我强烈建议您不要在移动应用中使用jquery进行动画制作。这个框架很棒，但太“重”了。如果想要平滑的动画，请在opacity属性上使用CSS过渡。 CSS渲染由gpu处理。

Answer 2

谢谢@Romain Durand。我建议使用CSS3而不是jQuery，并寻找一种方法来使用animate函数而不是fadeToggle（）。根据我的逻辑，这将调用CSS功能而不是jQuery。

与此同时，我发现了一个名为jQuery Animate的强大插件：https://github.com/benbarnett/jQuery-Animate-Enhanced帮助我进一步推动了animate功能。

下面是我使用的代码，它可以很好地平滑我的Android设备上的转换：

JavaScript的：

$('#screensaver > div:first')
.animate( { opacity: 0 }, 1000 )
.next()
.fadeIn( 1000 )
.end()
.appendTo( '#screensaver' );

HTML：

<div id="screensaver" class="screensaver">
    <div><img src="img/landing-bg_1.jpg" alt="alt text" /></div>
    <div><img src="img/landing-bg_2.jpg" alt="alt text" /></div>
    <div><img src="img/landing-bg_3.jpg" alt="alt text" /></div>
</div>

在Cordova上加速jQuery fadeOut

2 个答案: