Android App Development - 12 animations

Embed Size (px)

Citation preview

  1. 1. Animations
  2. 2. Animations Android platform provides 2 kind of animations: View Animation: the old system that allows you to apply animations on View. Property Animation: the new system introduced by Android 3.0 HoneyComb that applies animation to the properties of any object. The use of property animation is recommended because they are more flexible and have more features. The Android framework provides besides the above systems, the ability to create Drawable Animation: the animation is achieved by successive display of drawable resources. Animation Frameworks
  3. 3. Animations The animation is applied to the entire view including the background. N.B. The limits of View will remain unchanged Possible transformations are: Positions: translate Dimensions: scale Rotations: rotate Opacity: alpha The sequence of these transformations can be declared as a resource in the /res/anim file as xml or in code. Animations can be sequential and/or concurrent. The attributes to be included or are common to all the animations or specific type of animation. View Animation - Description
  4. 4. Animations Common attributes: interpolator duration startOffset fillAfter Scale Animation: fromXScale fromYScale toXScale toYScale pivotX pivotY View Animation - Typology Rotate Animation: fromDegrees toDegrees Translate Animation: fromXScale fromYScale toXScale toYScale Alpha Animation fromAlpha toAlpha
  5. 5. Animations View Animation - Example
  6. 6. Animations To retrieve an animation of the resources, use the static method AnimationUtils.loadAnimation(int resource). Ex. ImageView imageView = (ImageView) findViewById(R.id.imageview); Animation animation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump); animation.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation anim) { } @Override public void onAnimationRepeat(Animation anim) { } @Override public void onAnimationEnd(Animation anim) { } }); imageView.startAnimation(animation); View Animation - Management
  7. 7. Animations A Property Animation changes a value of an object for a specified period. You can specify the following variables: Duration: the default is 300ms Interpolation: it specifies how to calculate the value of the variable as a function of time Repetition and behaviour: it specifies how many times the animation should be repeated and whether normal or otherwise Set: you can group animations to make them sequential or concurrent and start them after a delay Frame refresh delay: you can specify how often to refresh the view. The default is 10ms. Property Animation
  8. 8. Animations Ex. Animation with linear interpolation: Property Animation Ex. Animation with linear interpolation:
  9. 9. Animations A Property Animation is realized with 3 basic components: Animators: they contain the structure to create animations, it is never used directly, but via its subclasses Evaluators: they serve to define the method of calculation of the object property to the animator Interpolators: they define how to calculate the value of the object based on the time. They can be: Linear Non-linear Property Animation
  10. 10. Animations 3 main subclasses: ValueAnimator: it contains all the basic functionality for calculating a value of an object ObjectAnimator: it extends ValueAnimator and simplifies the functionality of the superclass AnimatorSet: provides a mechanism for grouping animations Animator anim = ValueAnimator.ofInt(values); anim.setEvaluator(evaluator); anim.setInterpolator(interpolator); Property Animation - Animators
  11. 11. Animations There are three main sub-classes and an interface used: IntEvaluator: it calculates values for properties of type int FloatEvaluator: it calculates values for properties of type float ArgbEvaluator: it calculates values for properties of type color represented by hexadecimal values TypeEvaluator: it's an interface that allows you to create a custom evaluator Property Animation - Evaluators
  12. 12. Animations There are 9 sub-classes and an interface used: AccelerateDecelerateInterpolator AccelerateInterpolator AnticipateInterpolator AnticipateOvershootInterpolator BounceInterpolator CycleInterpolator DecelerateInterpolator LinearInterpolator TimeInterpolator: interface to implement a custom interpolator Property Animation - Interpolator
  13. 13. Animations Methods to instantiate it: ValueAnimator.ofInt(int... values) ValueAnimator.ofFloat(float... values) ValueAnimator.ofObject(TypeEvaluator evaluator, Object... values) Ex. ValueAnimator animation = ValueAnimator.ofFloat(0f, 1f); animation.setDuration(1000); animation.start(); Property Animation ValueAnimator
  14. 14. Animations It is a subclass of ValueAnimator. The object is instantiated with static methods similar to those of the superclass with the ability to define which properties should be animated: ValueAnimator.ofInt(Object target, String property, int... values) ValueAnimator.ofFloat(Object target, String property, float... values) ValueAnimator.ofObject(Object target, String property, TypeEvaluator evaluator, Object... values) Es. ObjectAnimator anim = ObjectAnimator.ofFloat(view, "alpha", 0f, 1f); anim.setDuration(1000); anim.start(); Property Animation ObjectAnimator
  15. 15. Animations It includes animations and establishes the sequence, simultaneity, and the delay. Es. AnimatorSet bouncer = new AnimatorSet(); bouncer.play(bounceAnim).before(squashAnim1); bouncer.play(squashAnim1).with(squashAnim2); bouncer.play(squashAnim1).with(stretchAnim1); bouncer.play(squashAnim1).with(stretchAnim2); bouncer.play(bounceBackAnim).after(stretchAnim2); ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f); fadeAnim.setDuration(250); AnimatorSet animatorSet = new AnimatorSet(); animatorSet.play(bouncer).before(fadeAnim); animatorSet.start(); Property Animation AnimatorSet
  16. 16. Animations To access the events of the life cycle of the animation there are 2 interfaces: Animator.AnimatorListener: onAnimationStart() onAnimationEnd() onAnimationRepeat() onAnimationCancel(): after this, onAnimationEnd() is still called ValueAnimator.AnimatorUpdateListener: OnAnimationUpdate(): it is invoked for each frame of the animation If you do not want to implement all of the AnimationListener interfaces, you can use the AnimationListenerAdapter class and implement only some methods. Property Animation AnimationListeners
  17. 17. Animations As for the Animation View, you can declare the Animator in xml file. To distinguish the Property Animation from View Animation use the path /res/animator instead of /res/anim. Property Animation XML
  18. 18. Animations To retrieve the animation from the resources you can use the static method AnimatorInflater.loadAnimator() AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator( this, R.anim.property_animator); set.setTarget(view); set.start(); Property Animation XML
  19. 19. Animations Animated GIFs are not supported natively by Android. To get an animation that plays subsequent images, use Drawable Animations declared in /res/drawable using the node: Drawable Animations
  20. 20. Animations This type of animation is regarded as a Drawable, so, to use it, it recovers from the resources to view image and set as background or layout xml or code. To start the animation, use the method Animation.start() that can not be called in Activity.onCreate (): AnimationDrawable rocketAnimation; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image); rocketImage.setBackgroundResource(R.drawable.rocket_thrust); rocketAnimation = (AnimationDrawable) rocketImage.getBackground(); } public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { rocketAnimation.start(); return true; } return super.onTouchEvent(event); } Drawable Animations