Devel > AnimationFramework

AnimationFramework

Work on better animation control

Interesting links for research on other animation frameworks :

What do we want ?

  • better animation framework (<Falcon4ev> captain obvious)
  • be able to animate position, size, style...

Suggestions for syntax?

In this section we can put code exmaples of how we would want the animation to work in pymt.

Stackable animation object using kwargs for widget property to animate

my_label = MTLabel("Animtations!!")

#animate function returns animation object
anim = Animation(pos=(10,10), my_label)
anim2 =Animation(size=(100,100),  my_label, t=2)  #changes size over 2 second time span

#to start animation call play
anim.play() #moved label to pos: 10,10

#rewind reverses animation
anim.rewind() #now its goes back to where it was
anim.reverse.play() #or have reverse animation like cocos2D

#to build more complicated animtaions, we can combine them
anim_all = anim + anim2
anim_all += Animation(color=(1,0,0), my_label)


#just animate right away:
my_label.animate(pos=(20,10))  #same as Animation(pos=(20,10), my_label).play()

other ideas

  • give names to animations (like widget has id animation has id...dont need handle of animation object in every event handler)
  • allow passing list of widgets insetad of just one and property animation is applied to all widgets in list

Comparison of animation framework

Chocos2d

sprite = Sprite('grossinis_sister2.png')
sprite.position = (320,240)

sc = ScaleBy( 9, 5 )
rot = Rotate( 180, 5 )

sprite.do( Repeat( sc + Reverse(sc) ) ) # will repeat the scaling / unscale
sprite.do( Repeat( rot + Reverse(rot) ) ) # will repeat the rotation / unrotation

Pros:

  • using class for animation (ScaleBy, Rotate, Repeat)
  • possibility to subclass them

Cons:

  • the scheme is always for a position (Move), size (Scale).
  • how about rotation for us ?

Script.aculo.us

This is a JS framework. It uses element ID from DOM to choose a particular element to be modified.

Website: http://script.aculo.us/


GeSHi Error: GeSHi could not find the language html (using path /home/web/pymt.eu/wiki/cookbook/geshi/geshi/) (code 2)

Pros:

  • Lots of effects to choose from
  • Works on all possible css properties

Cons:

  • JS architecture, dont know how to start coding

Animator

Website: http://www.berniecode.com/writing/animator.html

Chaining Effects on a single element

// animating both - note how calls to addSubject() can be chained together:
ex5 = new Animator()
    .addSubject(new NumericalStyleSubject($('ex5Button'), 'margin-left', 0, 100))
    .addSubject(new ColorStyleSubject($('ex5Button'), 'background-color', "#FFFFFF", "#F4C"))
    .addSubject(new DiscreteStyleSubject($('ex5Button'), 'font-weight', "normal", "bold", 0.5));
// also, check out the last line, which causes font-weight to switch from normal to bold half way

Chaining same effect on multiple elements

// Applying the same effect to different elements is easy
ex6 = new Animator().addSubject(new NumericalStyleSubject(
    [$('dot1'), $('dot2'), $('dot3')], 'margin-left', 10, 50));

Cons:

  • Differentiates between element properties and it has its own class for animation (NumericalStyleSubject,DiscreteStyleSubject,ColorStyleSubject)
  • Constructing a animation routine is a bit more complicated than the previous two frameworks