Animate

Touch the big white AnimateView and the little red circle will move under its own power to the point where you touched.

The AnimateView has a field named center of class PointF, used by onDraw as the location of the center of the circle. When a finger touches down, we create an ObjectAnimator to change the value of center, over a three-second interval, to the location where the finger touched. See Animating with ObjectAnimator. We had to create a class PointFEvaluator to hold the arithmetic for interpolating between the old and new values of center. See Using a TypeEvaluator.

Each time the ObjectAnimator updates center, we want to call onDraw so we can see the animation in progress. This is accomplished by plugging a ValueAnimator.AnimatorUpdateListener into the ObjectAnimator. See Animation Listeners.

On my Genymotion emulator, ionly some of the calls to invalidate result in a call to onDraw. I tried to make onDraw as fast and simple as possible, but we will probably have to do the animation in a separate thread.

Source code in Animate.zip

  1. MainActivity.java
  2. AnimateView.java
  3. activity_main.xml. Unused and ignored.
  4. AndroidManifest.xml.

Things to try

  1. The documentation says that an animation defaults to accelerate/decelerate, but my emulator is so sluggish that it’s hard to tell. Give the animator one of the following interpolators. See Using Interpolators, and the above note on AndroidManifest.xml.
                        objectAnimator.setInterpolator(new LinearInterpolator());
                        objectAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
                        objectAnimator.setInterpolator(new AnticipateOvershootInterpolator());
    

Animation examples from ApiDemos

“Animation/Custom Evaluator” is the most similar to the above example.

  1. Animation/Bouncing Balls (Tap the screen to start the animations.)
    1. app/java/com.example.android.apis/animation/BouncingBalls.java: class BouncingBalls is a subclass of class Activity. It creates eight ObjectAnimators and an AnimatorSet.
    2. app/java/com.example.android.apis/animation/ShapeHolder.java: class ShapeHolder contains a ShapeDrawable, which is a subclass of Drawable.
    3. app/res/layout/bouncing_balls.xml contains an empty LinearLayout named container.

  2. Animation/Custom Evaluator
    1. app/java/com.example.android.apis/animation/CustomEvaluator.java: class CustomEvaluator is a subclass of class Activity. Its class XYHolder is just like Android’s class PointF
    2. app/java/com.example.android.apis/animation/ShapeHolder.java: class ShapeHolder contains a ShapeDrawable, which is a subclass of Drawable.
    3. app/res/layout/animator_custom_evaluator.xml contains a Button.

  3. App/Activity/Animation: fade in, zoom in, etc.
    1. app/java/com.example.android.apis/app/Animation.java: class Animation is a subclass of class Activity.
    2. app/java/com.example.android.apis/app/AlertDialogSamples.java: class AlertDialogSamples is a subclass of class Activity.
    3. app/res/layout/activity_animation.xml contains a TextView and six Buttons.
    4. app/res/anim/fade.xml contains a property animation resource.
    5. app/res/anim/hold.xml contains a property animation resource.
    6. app/res/anim/zoom_enter.xml contains a property animation resource.
    7. app/res/anim/zoom_exit.xml contains a property animation resource.

  4. Graphics/AnimateDrawables
    1. app/java/com.example.android.apis/graphics/GraphicsActivity.java: class GraphicsActivity is a subclass of class Activity. It adds very little to class Activity.
    2. app/java/com.example.android.apis/graphics/PictureLayout.java: class PictureLayout is a subclass of class ViewGroup.
    3. app/java/com.example.android.apis/graphics/AnimateDrawables.java: class AnimateDrawables is a subclass of class GraphicsActivity. It creates a View that puts a Drawable and an Animation into an AnimateDrawable.
    4. app/java/com.example.android.apis/graphics/ProxyDrawable.java: class ProxyDrawable contains a Drawable field.
    5. app/java/com.example.android.apis/graphics/AnimateDrawable.java: class AnimateDrawable is a subclass of class ProxyDrawable.
    6. app/res/drawable/beach.jpg (300 × 225)

  5. Views/Animation/3D Transition (tap the cardboard to see the back and front)
    1. app/java/com.example.android.apis/animation/Transition3d.java: class Transition3d is a subclass of class Activity.
    2. app/java/com.example.android.apis/animation/Rotate3dAnimation.java
    3. app/res/drawable/photo1.jpg (320 × 431)
    4. app/res/drawable/photo2.jpg (320 × 431)
    5. app/res/drawable/photo3.jpg (320 × 431)
    6. app/res/drawable/photo4.jpg (320 × 431)
    7. app/res/drawable/photo5.jpg (320 × 431)
    8. app/res/drawable/photo6.jpg (320 × 431)

  6. Views/Animation/Interpolators: accelerate, decelerate, anticipate, overshoot.
    1. app/java/com.example.android.apis/view/Animation3.java: class Animation3 is a subclass of class Activity.
    2. app/res/layout/animation_3.xml contains two TextViews and a Spinner.
    3. app/res/values/strings.xml contains two string resources named animation_2_instructions and animation_3_text.
    4. android.R.anim.accelerate_interpolator is the id number of the file ~/Library//Android/sdk/platforms/android-22/data/res/anim/accelerate_interpolator.xml on your Mac or PC.

  7. Views/Animation/Push: a ViewFlipper containing four TextViews.
    1. app/java/com.example.android.apis/view/Animation2.java: class Animation2 is a subclass of class Activity.
    2. app/res/layout/animation_2.xml contains a ViewFlipper containing four TextViews.
    3. app/res/values/strings.xml contains four string resources named animation_2_text_1, animation_2_text_2, animation_2_text_3, and animation_2_text_4.
    4. app/res/anim/push_up_in.xml contains a property animation resource.
    5. app/res/anim/push_up_out.xml contains a property animation resource.
    6. app/res/anim/push_left_in.xml contains a property animation resource.
    7. app/res/anim/push_left_out.xml contains a property animation resource.
    8. android.R.anim.fade_in is the id number of the file ~/Library/Android/sdk/platforms/android-22/data/res/anim/fade_in.xml on your Mac or PC.

  8. Views/Animation/Shake: shake back and forth to reject a password.
    1. app/java/com.example.android.apis/view/Animation1.java: class Animation1 is a subclass of class Activity. It creates an Animation.
    2. app/res/layout/animation_1.xml contains a TextView, an EditText, and a Button.
    3. app/res/values/strings.xml contains two string resources named animation_1_instructions and googlelogin_login.
    4. app/res/anim/shake.xml contains a property animation resource.
    5. app/res/anim/cycle_7.xml contains a CycleInterpolator.