Smooth Animation

Animation: transformation of an object over time. Transformations include move, rotate, color change, etc.

Two ways to Program Animation in App Inventor

  • Use a Clock.Timer event and move (transform) image sprite within that event
  • Image sprites have their own internal timers you can use.

Moving over time

  • The following blocks move a ball horizontally:
  • Note similarity to mole mash scoring (set HitLabel.Text to HitLabel.Text + 1)
  • Alternative and equivalent blocks:
  • How would you move vertically? How fast is the ball moving?
  • Use a small interval for smooth animation

Instructor Demo

  • Move ball to the right 20 px/second
  • Move ball to the right 20 px/second smoothly
  • Move the ball but only once a button is clicked

Animation Events

  • Ball.EdgeReached
  • Ball.CollidedWith

Your Turn

  1. Create a new app and add a Canvas. Set the Width to "fill parent" and the height to 400. Add three balls from the Animation folder.
  2. Code Ball1 so that, upon app startup, it moves smoothly from the left edge of the screen to the right at 100 px/second. Code and test this before you move on.
  3. Code Ball2 so that, upon app startup, it moves smoothly from the top edge to the bottom edge at 20 pixels a second.
  4. Code Ball3 so that, upon app startup, it moves smoothly and diagonally from the top-left corner to the right-bottom corner. at 50 pixels a second.
  5. Code Ball1 so that when it hits the right edge it reverses and goes left. It can stop when it hits the left edge.
  6. Add Faster and Slower buttons that change the speed of Ball2 by 10%.
  7. Code Ball3 so that it changes color every 20 ms. Hint: You can set the PaintColor of a ball (or anything) using either a built-in color or a number. For instance, dark orange is the number -29696. So try setting the PaintColor of the ball in the Screen.Initialize event, then adding 100 to it every 20 ms. For more info on colors, see http://experimental.appinventor.mit.edu/learn/reference/blocks/colors.html.
  8. Code Ball2 so that if it hits another ball, it immediately jumps to the top of the screen.
  9. Code Ball2 so that when it hits the bottom edge, it reverses course and goes up, and when it hits the top edge, it reverses course and goes down. So it should go top-to-bottom, bottom-to-top, continuously.