1

我创建了一个代码，它作为“电影”工作，因为“薄膜”是一个包含所有 iphone 动作的长图像。为了营造电影般的运动感，此代码在backgroundPositionY上添加 500px，然后等待 30 ms并重新启动此过程。

机制很简单，但代码太长，尤其是当使用用于添加另一个功能的函数 .toggle() 时，它会在您再次单击时创建相反的动画。

/*animate*/
screen.toggle(function(e){
    var mov = 0;
    function cicloIphone(){
        if(mov>6000){
            mov=0;
        };
        iphone.css('backgroundPosition', '0 -'+mov+'px');
        mov += 500;

        if(mov<6000){
            window.setTimeout(function(){
                cicloIphone();
            }, 30);
        };
    };
    var timeoutIphone = window.setTimeout(function(){
        cicloIphone();
    },0);
},function(e){
    var mov = 5500;
    function cicloIphone(){
        if(mov>6000){
            mov=0;
        };
        iphone.css('backgroundPosition', '0 -'+mov+'px');
        mov -= 500;

        if(mov<6000){
            window.setTimeout(function(){
                cicloIphone();
            }, 30);
        };
    };
    var timeoutIphone = window.setTimeout(function(){
        cicloIphone();
    },0);
});

我想用函数 animate() 进行合成，但不想重新创建我的效果，因为不是每 30 毫秒从 500 像素跳到 1000 像素，而是太流畅并逐个像素地增加像素。

/*animate synthesized*/
screen.toggle(
    function(e){iphone.stop(true,true).animate({
        'backgroundPositionX':'0px',
        'backgroundPositionY':'-5500px'
    },3000)},function(e){iphone.stop(true,true).animate({
        'backgroundPositionX':'0px',
        'backgroundPositionY':'0px'
    },3000);
});
4

2 回答 2

1

animate()是一个相当复杂和灵活的函数。它确实满足您的要求，因为您可以提供它运行所需的三条信息：

  • 动画的属性，
  • 目标值，
  • 动画的持续时间。

所以它知道要改变什么，去哪里，去那里需要多长时间，但是在默认情况下，实际去那里的方式并不能满足你的要求。但是，在这种情况下使用没有问题animate()，只要您为其提供自定义缓动函数：

$.extend($.easing, {
    movie: function(current, elapsed, start, delta, duration) {
        // Returns the completion ratio as a float in the [0..1] range.
        // (elapsed / duration) would be linear, so build discrete steps
        // by "snapping" elapsed to 30 ms intervals.
        return (Math.floor(elapsed / 30) * 30) / duration;
    }
});

现在你可以写：

screen.toggle(function() {
    iphone.stop(true, true).animate({
        backgroundPositionY: "-5500px"
    }, 330, "movie");
}, function() {
    iphone.stop(true, true).animate({
        backgroundPositionY: "0px"
    }, 330, "movie");
});

它应该每 30 毫秒通过离散步骤为背景图像设置动画，持续 330 毫秒，这似乎是您正在寻找的效果。

于 2012-07-29T14:13:28.253 回答
0

这个技巧对于完全兼容（IE7/9、Firefox 3.6、Opera、Safari Google Chrome）很有用。我使用了这个 jQuery 扩展http://bit.ly/bZzOC8，它允许在函数 .animate() 上使用 2 个值作为适当的backgroundPosition:'(0 -5550)'不幸的是 ie7 和 ie8 有一个错误并且扩展 dosen ' 不工作所以我使用了 ie 条件if($.browser.msie)并且我使用了单独的值 backgroundPositionY 和 backgroundPositionX，如果你只想使用这个规则，你必须知道在 Opera 和 fireFox 上不起作用。因此，此代码涵盖所有浏览器。

if($.browser.msie){
    screen.toggle(function(){
            iphone.stop(true,true).animate({
                backgroundPositionY:'-5500',
                backgroundPositionX:'0'
            },330,'movie');
        },function(){
            iphone.stop(true,true).animate({
                backgroundPositionY:'0',
                backgroundPositionX:'0'
            },330,'movie');
        }
    );
}
else{
    screen.toggle(function(){
            iphone.stop(true,true).animate({
                backgroundPosition:'(0 -5500)'
            },330,'movie');
        },function(){
            iphone.stop(true,true).animate({
                backgroundPosition:'(0 0)'
            },330,'movie');
        }
    );
}
于 2012-07-31T13:48:49.440 回答