Get the latest Education e-news
  • An Introduction to 2D Curve Animation

    - Paul Rayman

  • Zoom Curve

    When the ball is just about to hit the ground, it starts deforming due to its elasticity. This animation can be done by using another curve -- the zoom curve. We'll change the vertical scale (Y-scale) of the ball in order to represent its distortion upon impact.

    Click for larger version.

    Above is the Y-scale zoom curve. Prior to the 29th frame, the curve is at its maximum. This represents the non-deformed ball falling down.

    On the 29th frame, the curve goes down, and the ball's image is zoomed down along the vertical axis. Then, after the curve passes the "hit-the-ground" point in the 31st frame, the image is zoomed back up to normal, so the curve goes up again to its maximum.

    Note that the higher the zoom factor is, the more elastic the ball will appear. Thus, experimenting with curves in 2D animation tools is an easy way to find the most visually appealing animation effects. Otherwise, the classic animation approach would require you to discard all of your work and start from scratch if you decided to change something.

    Adding Details to Animation

    At this point, the ball's simple up-and-down movement isn't very realistic. We need a shadow. We should place a shadow-like image beneath the ball and use curves in order to make the animation more believable.

    The process is similar to the previously mentioned steps. We need to scale the shadow and modify its transparency level in accordance with the ball's movement.

    Here is the final result of the bouncing ball animation:


    Making 2D animation is a piece of cake with proper software. Thanks to automated image transformation between keyframes, curve animation, and multiple transition effects, an animated image can be completed in several minutes, even by a beginner.


comments powered by Disqus

UBM Tech