Question

我正在使用-webkit-transform: translate(-958px, 0);动画

移动一张很长的图像

图像在开始水平移动后很快就会被切断，但是如果我稍微移动平板电脑屏幕，它会重新绘制屏幕并显示整个图像，同时平移并且非常平滑。

但我如何在代码中模拟这个？

Answer 1

一些建议：

提供平板电脑型号和Android版本可能会有所帮助
jsfiddle / jsbin上的图片尺寸和尺寸，动画持续时间或演示页等信息将有很大帮助

回到问题：

在性能方面，使用translate3d将获得更好的性能，因为它不起作用，主要瓶颈在其他地方。
根据我使用移动网络套件的经验，当有大图像（根据大小或尺寸）时，您可能会遇到麻烦：
- Ram问题
- 高网络延迟
- 足够长的加载和渲染时间

如果您的UI触发重绘会使所有内容平滑，则滞后可能是由于图像加载＆amp;渲染

解决方案：

通过animation-delay或setTimeout
为动画设置合理的延迟
更精确：预加载图像，然后通过监听其onload事件触发动画：jQuery .load explanation on image load event behaviour

如果以上内容对您不起作用，请尝试：Force-redraw DOM technique for WebKit-based browsers

2＆amp; 3，代码将是这样的：

$("<img>") .attr({ src: " /* image url */ " }) .load(function(){ /* i. use class or animationName to set animation */ /* ii. force redraw go there if needed */ /* wrap i & ii into a setTimeout function inside this callback if more delay is needed */ })
祝你好运。

Answer 2

Paul Irish的一小段代码和博客文章可能对您有所帮助：

http://paulirish.com/2011/requestanimationframe-for-smart-animating/

如果它漂浮在你的船上，它几乎是跨浏览器。

Answer 3

如果我没有正确地阅读你的问题，请原谅我。

您是否计划使用平板电脑的陀螺来平移大图像？这应该可以在代码中实现。

然而，据我所知，强制转换更快更新是出于开发人员的控制。您可以做的最好的事情就是确保平板电脑必须担心这一点。

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                padding:0px;
                overflow:hidden;
            }
            #img {
                position:absolute;
                left:0px;
                top:20px;
                -webkit-transition:left 0.5s;
            }
            </style>
    </head>
    <body>
        <img id="img" src="img.png" />
    </body>
    <script>
        function onOrientationChange(e) {
            var img = document.getElementById("img"); 
            var maxWidth = img.clientWidth - document.body.clientWidth;

            img.style.left = ((e.gamma-90) * maxWidth / 180 ) + "px";
        }
        window.addEventListener('deviceorientation', function(e){onOrientationChange(e)}, true);
        </script>
</html>

Answer 4

您是否尝试使用翻译3D？ GPU在使用时会启动。

HTML5 App/Animation Performance

强制Android浏览器每秒重绘一次

4 个答案: