1

我正在使用-webkit-transform: translate(-958px, 0);动画移动一个很长的图像

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

但是我如何在代码中模拟呢？

4

4 回答 4

2

一些建议：

  1. 提供平板型号和安卓版本可能会有所帮助
  2. 图像尺寸和大小、动画持续时间或jsfiddle / jsbin上的演示页面等信息将有很大帮助

回到问题：

  1. 在性能方面，使用translate3d会获得更好的性能，因为它不起作用，主要瓶颈在其他地方。

  2. 根据我使用移动 webkit 的经验，当有大图像（在大小或尺寸方面）时，您可能会遇到麻烦：

    • 内存问题
    • 高网络延迟
    • 足够长的加载和渲染时间

如果您的 UI 触发的重绘会平滑所有内容，则延迟可能是由图像加载和渲染引起的

解决方案：

  1. animation-delay通过或为您的动画设置合理的延迟setTimeout
  2. 更精确：预加载图片，完成后通过监听 onload 事件触发动画：jQuery .load 图片加载事件行为解释
  3. 如果上述方法不适合您，请尝试：Force-redraw DOM technology for WebKit-based browsers

对于 2 和 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 */
})

祝你好运。

于 2011-12-10T07:14:57.187 回答
0

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

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

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

于 2011-12-04T20:33:56.110 回答
0

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

您是否打算使用平板电脑的陀螺仪平移大图像？这在代码中应该是可能的。

但是，据我所知，强制过渡以更快地更新是开发人员无法控制的。您能做的最好的事情就是确保这就是平板电脑所需要担心的。

<!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>
于 2011-12-06T13:53:17.727 回答
0

您是否尝试过使用 translate 3d？GPU在使用时启动。

HTML5 应用程序/动画性能

于 2011-12-08T17:50:27.853 回答