On Wed, May 9, 2012 at 11:29 AM, Devon McCormick <[email protected]> wrote:
> is there someplace I can see this flip code in action?
My desktop?
I don't have it published anywhere. And, it's not user friendly -- I
was editing the page to change the parameters.
Here's the jquery animate statement, though, if you want to do this yourself:
function do_flip_general(params) {
var right_angle= Math.acos(0);
params.to.hide();
do_rotate(params.to, params.centerAxis, -right_angle,
params.centerX, params.centerY);
params.from.animate({
t1: 1414
}, {
duration: 1414,
step: function(t1, typ) {
// if ('t1' != typ.prop) return;
var angle= right_angle*t1*t1/2e6;
do_rotate(params.from, params.centerAxis,
angle, params.centerX,
params.centerY);
},
complete: function() {
params.from.hide();
params.to.show();
params.to.animate({
t2: 586
}, {
duration: 586,
step: function(t2, typ) {
// if ('t2' != typ.prop) return;
var t= t2+1414
var angle= right_angle * (-2 +
t*t/2e6);
do_rotate(params.to,
params.centerAxis, angle, params.centerX,
params.centerY);
}
});
}
})
}
The overall effect was a gradually accelerating rotation which took 2
seconds (2000 milliseconds) to complete.
Here's params:
from: jQuery reference to the original content being flipped out
to: jQuery reference to the content being flipped in
I had the both absolutely positioned, and they were the same size, and
the essence of the overall effect is captured in these lines:
params.from.hide();
params.to.show();
the rest of the effect was just fluff, drawing attention to the transition.
Here's the rest of the params:
width: numeric width of the above elements, in pixels
height: numeric height of the above elements, in pixels
centerAxis: angle of the axis of rotation, in radians (0 means a
horizontal axis)
centerX: location of the center of the axis of rotation in the X
direction (I always used half of the width)
centerY: location of the center of the axis of rotation in the Y
direction (I always used half of the height)
--
Raul
----------------------------------------------------------------------
For information about J forums see http://www.jsoftware.com/forums.htm
