Question

I created a code that it work as a “movie” because the “pellicle” is a long image that contain all iphone movement. For create a sense of movement as movie, this code add 500px on the backgroundPositionY, then it wait 30 ms and restarts this process.

The mechanism is simple but the code is too long especially when will use a function .toggle() that is serves for add an another function, that it create an opposite animation when you do another click.

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

I want synthesize with the function animate() but not ricreate my effect because not jump from 500px than 1000px each 30ms, but is too fluid and increase pixel for pixel.

/*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() is quite a complex and flexible function. It does meet your requirements, since you can provide the three pieces of information it needs to operate:

• the property to animate,
• the target value,
• the duration of the animation.

So it knows what to change, where to go and how long it should take to go there, but the actual way of going there does not satisfy your requirements in the default case. There is, however, no problem using animate() in this situation, as long as you provide it a 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;
    }
});

Now you can write:

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

And it should animate the background image by discrete steps every 30 milliseconds for 330 milliseconds, which seems to be the effect you’re looking for.