0

我正在使用 jQuery Animate 在图像上创建 Pan-Zoom 效果。总体而言，它运行良好，但有两个例外。

首先它开始动画并且似乎撞到了墙上然后继续放大。有没有办法防止这种情况并使运动成为一个平滑的运动。

其次是动作有点生涩，尤其是在最后。有没有办法解决这个问题？如果我应该尝试添加某种形式的缓动，我会在页面上使用缓动。（这是在 Firefox 和 Chrome 中测试的，两者都很生涩。）

这是动画的jsFiddle。

注意：我使用的是 jQuery 1.8.3，我可以使用 CSS，但坚持使用 jQuery 以实现跨浏览器兼容性。（不幸的是，我的大多数用户都在使用 IE。）

HTML

<div style="width:1140px; height:500px; overflow:hidden; text-align:center;">
    <img id="pan-zoom" style="width:900px; height:600px; position:relative; top:-80px; left:0;" alt="European Bee-eaters" src="http://upload.wikimedia.org/wikipedia/commons/9/96/Pair_of_Merops_apiaster_feeding.jpg" />
</div>

JS

$(window).load(function() {
    $('#pan-zoom').animate({
        width: '2141px',
        height: '1428px',
        top: '-200px',
        left: '-405px'
    }, 8000, function() {
            // Fade In Hidden DIV
    });
});
4

3 回答 3

1

改变

<div style="width:1140px; ...

到

<div style="width:900px; ...

这个想法是，在放大之前，图像被缩放以适合父宽度，这是您要删除的效果。

更新了 fidde。

编辑：或绝对位置，如评论。

于 2013-02-24T04:33:22.227 回答
1

如果你加快动画速度，它会显得更流畅。动画越慢，它的粗糙度就越明显。

将缓动改为线性似乎也有帮助。默认缓动（摆动）结束时的缓慢使动画的粗糙度非常明显。下面的代码使用线性缓动并且速度提高了一倍（以及将外部宽度更改为 900px，正如@loxxy 建议的那样），并且看起来相当不错。

$(window).load(function() {
    $('#pan-zoom').animate({
        width: '2141px',
        height: '1428px',
        top: '-200px',
        left: '-405px'
    }, 4000, 'linear', function() {
        // Fade In Hidden DIV
    });
});

只有通过 WebGL 等硬件支持才能使大型动画既流畅又缓慢。除此之外，在平滑和缓慢之间进行选择，以更重要的为准。

于 2013-02-24T04:44:35.603 回答
0

如果您使用 css 转换属性的缩放功能，这两个问题都将得到解决。我认为（自从我使用 jquery 并且没有跟进以来已经很长时间了）jquery.animate 函数与这些不兼容。如果您想继续使用 jquery，您应该使用插件或编写一个插件。

在您的小提琴中，您使用 left、top、width 和 height 属性。这在 webkit 中尤其生涩。

Jquery 转换插件顶部 google 结果： http ://ricostacruz.com/jquery.transit/

于 2013-02-24T04:40:00.473 回答