• Home
  • Events
  • About
  • JavaFX Abacus Tutorial, Part III

    This is the third part of a basic tutorial on JavaFX. The other parts can be found here and the code is on github. The running example of the tutorial is to build an abacus. If you are curious how the final solution will look like, please
    have look at this 7 min video.

    Today, we will enrich the current state of the project with animation.

    If you have done your homework – and I assume all of you have done so, right? -
    then you should have a solution like in the
    picture below where you can click on any ball and it will jump between its positions on the
    left and right hand side.

    circles with translations

    For moving the ball, we used a Translation, which as we learned is one of many possible
    Transformations.

    Now, our current balls move in a rather weird fashion: they disappear from one location
    to reappear in a different location. Until we have star-trek like teleportation,
    this is an unrealistic behavior – and not very pleasing for the human eye.

    JavaFX allows us to let the ball move in an animated fashion with a so-called Transition.
    A Transition is an animation of a Transformation, in our case
    the animation of a Translation.

    Transitions have another interesting quality: they animate the transformation in
    a “natural” way. A physical ball would never start with zero velocity, then suddenly
    move at 10 km/h, and then stop instantly. It would accelerate and decelerate.
    Transitions mimic this behavior by animating the underlying transformation
    with an “ease-in” and “ease-out” by default.

    Setting up a transition is easy since their are first-class objects in
    JavaFX and can even be constructed with a builder:

    In order to execute the move do:

    With all that knowledge applied to our abacus implementation, the solution now becomes:

    Homework

    Your homework assignment until next week is to also paint some rails where the balls can sit on.

    Next week we will start looking into JavaFX property binding.

    Have fun coding until then
    Dierk König

    P.S. the GroovyFX version by Tim Yates: here.

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • DZone
    • Y!GG
    • Webnews
    • Digg
    • del.icio.us
    • DotNetKicks
    • Facebook
    • Google Bookmarks
    • Newsrider
    • Twitter
    • YahooBuzz

    Leave a Comment


    six − 6 =

    css.php