Animation using Flapjax (problems)
artyom.shalkhakov
I was trying to do animation using Flapjax, and found I couldn't model
a specific behaviour. The idea is to have an element that reacts to an
'activation event', which triggers the animation cycle (starting a
timer changing it's value every 50ms or so, for duration of, say,
1500ms).
How do I do that? (Or is there another way?) I have some code, but it
doesn't work. :(
Regards,
Artyom.
Arjun Guha
> a specific behaviour. The idea is to have an element that reacts to an
> 'activation event', which triggers the animation cycle (starting a
> timer changing it's value every 50ms or so, for duration of, say,
> 1500ms).
sequence?
>
> How do I do that? (Or is there another way?) I have some code, but it
> doesn't work. :(
code, we could being by tweaking it appropriately.
Arjun
artyom.shalkhakov
> sequence?
> There are many ways to do animation. If you don't mind posting your
> code, we could being by tweaking it appropriately.
The function itself, maths-like notation:
p = A+(B-A)*x((t - ev)/d), where:
p -- position (could be also width/height/color, etc.)
A -- starting value
B -- ending value
t -- current time, msec
ev -- movement start time, msec
d -- movement duration, msec
x -- interpolation function (can be linear, quadratic, etc.)
Implementation in Flapjax:
/*
(Real -> Real) * Event Msec * [Behaviour] a * [Behaviour] a *
[Behaviour] Int * Behaviour Int -> Behaviour a
dt -- interval between animation frames, msec
*/
var splash_b(x, ev, A, B, d, dt) {
var elapsedB = ev.startsWith(0).transform_b(
function(te,t,d_) {
if (t-te<d_) return t;
else return 0;
},
timer_b(dt),d
);
return elapsedB.transform_b(
function(te_,A_,B_,d_) {
return A_+(B_-A_)*x(te_/d);
},
A,B,d
);
}
'ev' could be an element's mouseover event, so this should be trivial
to use:
var date = new Date();
var startE = extractEvent_e('elem', 'mouseover').transform_e(function()
{ return date.getTime(); });
var sizeB = splash_b(function(x){return x;},startE,
100,200,500,100).transform_b(function(x){ return x + 'px'; });
Now, regarding rationale: would Flapjax be a best fit? I've looked at
other libraries (Moo.fx, Scriptaculous, jQuery Anim, Bernie's Better
Animation Class), and found them to be too object-oriented and
imperative to be fun to use. :)
Regards,
Artyom.
Leo Meyerovich
be in place to build one. Recreating prefuse/ flare like functionality
should be natural and lead to better things :)
On Jul 3, 2008, at 7:56 AM, "artyom.shalkhakov" <artyom.s...@gmail.com
Arjun Guha
> p = A+(B-A)*x((t - ev)/d), where:
> p -- position (could be also width/height/color, etc.)
> A -- starting value
> B -- ending value
> t -- current time, msec
> ev -- movement start time, msec
> d -- movement duration, msec
> x -- interpolation function (can be linear, quadratic, etc.)
The formula is clear, thanks. But, I don't quite see why A and B are
behaviors (in the contract you wrote for your code). I'm going to
assume for a moment that they aren't behaviors but constant values.
Let me know if they are in fact behaviors.
Think carefully about 'ev'. When an event fires on 'ev', it signals
the start of your animation. You have to write splash_b so that it
works correctly for all events that fire on 'ev.'
That suggests something like this:
var elapsedEE = ev.lift_e(function(_) {
var ev = (new Date()).getTime();
var t = timer_e(dt); // note: event stream
t.lift_e(function(time) { if (time - ev >= d)
{ disableTimer(t); } }); // stop timer
return t.lift_e(function (t) {
return A+(B-A)*x((t-ev)/d); // function p, verbatim
}
});
Of course, you now have an event stream of event streams. However,
switch_e will flatten elapsedEE to the 'latest event stream':
var elapsedE = switch_e(elapsedEE);
You can now turn this into a behavior if you want:
elapsedE.startsWith(/* initial value */)
The type you've written for splash_b is perfectly valid. However, I
think it's clearly if you curry it, separating the constants
(x,A,B,d,dt) from the event that triggers
the animation (ev):
function splash_e(x,A,B,d,dt) {
return function(ev) {
return switch_e(ev.lift_e(function(_) {
var ev = (new Date()).getTime();
var t = timer_e(dt); // note: event stream
t.lift_e(function(time) { if (time - ev >= d)
{ disableTimer(t); } }); // stop timer
return t.lift_e(function (t) {
return A+(B-A)*x((t-ev)/d); // function p, verbatim
}
}));
};
};
Of course, if x,A,B,d,dt vary as well, you can always lift and switch
splash_e.
Arjun
Arjun Guha
> other libraries (Moo.fx, Scriptaculous, jQuery Anim, Bernie's Better
> Animation Class), and found them to be too object-oriented and
> imperative to be fun to use. :)
I think Flapjax serves an entirely different purpose from these
libraries. Flapjax gives you a novel way to express the control flow
of your application with event streams, and allows values to "update
automatically" with behaviors. It lets you escape from writing
disconnected callbacks.
I'm not familiar with all the libraries you mentioned, but take
Scriptaculous/Prototypejs as a canonical example. They provide a
cross-browser interface to the DOM, in addition to various features
and enhancements to the DOM API. (Scriptaculous takes it quite a bit
further with animations, drag and drop, etc.) Flapjax does quite a
bit standardize the DOM interface, but it's not a replacement for
these libraries. I've found that Flapjax and Prototype/Scriptaculous
go rather well together.
Arjun