Example: bouncing ball (starter code 1)

The preceding example uses the container’s margin property
to alternate the position of the ball on the screen,
and a periodic timer to control
how frequently the ball changes its position (once every second).
As a viewer, this approach leaves a lot to be desired.
The ball only has two positions,
so the animation looks pretty choppy—you could
easily mistake the animation for a glitch.
To describe this problem in animation terms,
you would say that the animation alternates
between only two frames:

Note:
  In this example, you are creating an animation effect
  that only looks like it is running at two frames per second.
  In reality, Flutter is running this example at ~60 frames per second.

frame #

position

movement direction

top margin: 0

top margin: 100

down

top margin: 0

up