Question

我创建了一个代码作为＆＃34;电影＆＃34;因为＆＃34;薄膜＆＃34;是一个包含所有iphone运动的长图像。为了创造一种作为电影的运动感，此代码在 backgroundPositionY 上添加500px ，然后等待30毫秒并重新启动此过程。

机制很简单但是代码太长了，尤其是在使用函数.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（）函数进行合成，但不要使我的效果更好，因为不是每30ms跳过500px而不是1000px，但是太流畅并且像素增加了像素。

/*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);
});

Answer 1

animate()是一个非常复杂和灵活的功能。它确实符合您的要求，因为您可以提供运行所需的三条信息：

要制作动画的属性，
目标值
动画的持续时间。

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

$.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毫秒，这似乎是你正在寻找的效果。

Answer 2

这个技巧对于（IE7 / 9，Firefox 3.6，Opera，Safari Google Chrome）的完全兼容性非常有用。我使用了这个jQuery扩展http://bit.ly/bZzOC8，允许在函数.animate（）上使用2个值来表示适当的 backgroundPosition：'（0-5550）'，不幸的是，ie7和ie8有一个错误，扩展名没有用，所以我使用ie条件 if（$。browser.msie），我使用了值单独的backgroundPositionY和backgroundPositionX，如果你只想使用这个规则，你必须知道dosen'在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');
        }
    );
}

动画中有2个值的背景动画（）

2 个答案: