Basic Animation - PowerPoint PPT Presentation

basic animation n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Basic Animation PowerPoint Presentation
Download Presentation
Basic Animation

play fullscreen
1 / 24
Basic Animation
376 Views
Download Presentation
amandla
Download Presentation

Basic Animation

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Basic Animation

  2. Animation • 4 options • Animated .gif • Frame by Frame animation • Tweened animation • This is our focus • OpenGL ES • Graphics API for more robust animation • Popular for mobile game programming • Supports 3D

  3. Animation • Pre-3.0 (Honeycomb) • View animation • anim folder within resources folder • Animation, AnimationUtils, AnimationListener, and AnimationSet are 4 of the primary classes • The View itself is animated • View animation is still supported

  4. Animation • Since 3.0 (Honeycomb) • Property animation • animator folder within resources folder • ObjectAnimator and AnimatorSet are the 2 of the primary classes • AnimatorInflator is used to inflate the .xml file if needed • AnimatorListenerAdaptor is used to respond to end, start, repeat, and cancel if needed • A property of the View is animated • One of the 4 traditional properties • scale, alpha, translate, rotate • Other • text, background color, etc.

  5. Tweened animation • Components of tweened animation • Drawable • image file (.png, .jpg, .gif) • xml file • ShapeDrawable instance • animator resource • animator folder within the res folder must be created • contains xml describing the animation • Java code • ObjectAnimator class • AnimatorSet class • AnimatorListenerAdapterclass (and AnimatorListener class) • AnimatorInflater class

  6. Animation examples

  7. Tweened animation • Types of tweened animation • rotate (spin) • translate (move) • alpha (fade) • scale (shrink/stretch)

  8. Rotate animation – in xml • Rotate .xml example (within res/animator folder) <objectAnimatorxmlns:android="http://schemas.android.com/apk/res/android" android:propertyName="rotationY" android:duration="1000" android:valueTo="360" android:valueType="floatType" /> • Loading the .xml file ObjectAnimatoroa= (ObjectAnimator)AnimatorInflater.loadAnimator(this, R.animator.my_rotate_xml_filename); oa.setTarget(my_imageview); oa.start();

  9. Rotate animation – in Java code • Rotate example – animation created in Java code ObjectAnimator oa1 = ObjectAnimator.ofFloat(my_image_view, "rotationY", 0f, 360f); oa1.setDuration(1000); oa1.start();

  10. Translate animation – in xml • Translate .xml example (within res/animator folder) <objectAnimatorxmlns:android="http://schemas.android.com/apk/res/android" android:propertyName="translationX" android:duration="1000" android:valueFrom="0" android:valueTo="100" android:valueType="floatType" /> • Loading the .xml file ObjectAnimatoroa= (ObjectAnimator)AnimatorInflater.loadAnimator(this, R.animator.my_translate_xml_filename); oa.setTarget(my_imageview); oa.start();

  11. Translate animation – in Java code • Translate example – animation created in Java code ObjectAnimator oa1 = ObjectAnimator.ofFloat(my_image_view, "translationX", 0f, 100f); oa1.setDuration(1000); oa1.start();

  12. Alpha animation – in xml • Alpha .xml example (within res/animator folder) <objectAnimatorxmlns:android="http://schemas.android.com/apk/res/android" android:propertyName="alpha" android:duration="1000" android:valueFrom=“1" android:valueTo= ".25" android:valueType="floatType" /> • Loading the .xml file ObjectAnimatoroa= (ObjectAnimator)AnimatorInflater.loadAnimator(this, R.animator.my_alpha_xml_filename); oa.setTarget(my_imageview); oa.start();

  13. Alpha animation – in Java code • Alpha example – animation created in Java code ObjectAnimator oa1 = ObjectAnimator.ofFloat(my_image_view, "alpha", 1f, .25f); oa1.setDuration(1000); oa1.start();

  14. Scale animation – in xml • Scale .xml example (within res/animator folder) <objectAnimatorxmlns:android="http://schemas.android.com/apk/res/android" android:propertyName="scaleX" android:duration="1000" android:valueFrom="1" android:valueTo=".25" android:valueType="floatType" /> • Loading the .xml file ObjectAnimatoroa= (ObjectAnimator)AnimatorInflater.loadAnimator(this, R.animator.my_scale_xml_filename); oa.setTarget(my_imageview); oa.start();

  15. Scale animation – in Java code • Scale example – animation created in Java code ObjectAnimator oa1 = ObjectAnimator.ofFloat(my_image_view, "scaleX", 1f, .25f); oa1.setDuration(1000); oa1.start();

  16. Additional functionality • setRepeatCount(int) • sets the number of times an animation should be repeated • 0 is the default • ObjectAnimator.INFINITE will continue indefinitely • setRepeatMode(int) • ObjectAnimator.REVERSE will run the animation backward after running it forward • Example: if repeatMode is 3 and mode is reverse, animation will run forward twice, then in reverse twice

  17. Combining Animations

  18. Combining Animations • AnimatorSet class • Combine animations or sets • Play sequentially or together

  19. AnimatorSet – in xml • AnimatorSet .xml example (within res/animator folder) <set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="together"> <objectAnimator android:propertyName="scaleX" android:duration="1000" android:valueTo=".25" android:valueType="floatType" /> <objectAnimator android:propertyName="scaleY" android:duration="1000" android:valueTo=".25" android:valueType="floatType" /> </set> • Loading the .xml file AnimatorSetas = (AnimatorSet)AnimatorInflater.loadAnimator(this, R.animator.my_set_xml_filename); as.setTarget(my_imageview); as.start();

  20. AnimatorSet– in Java code • AnimatorSet example – animation created in Java code AnimatorSet as = new AnimatorSet(); ObjectAnimator oa1 = ObjectAnimator.ofFloat(image, "scaleX", 1f, .25f); ObjectAnimator oa2 = ObjectAnimator.ofFloat(image, "scaleY", 1f, .25f); as.setDuration(1000); as.play(oa1).with(oa2); as.start(); • Options • with(), before(), after() • One AnimatorSet can play other AnimatorSets (can be defined in .xml or in Java) • An AnimatorSet does not respond to repeatCount() or repeatMode()

  21. Listening for events associated with animations

  22. Listening with Animators • AnimatorListener interface is implemented, or AnimatorListenerAdapter class is subclassed • AnimatorListener interface • onAnimationCancel() • onAnimationEnd() • onAnimationRepeat() • onAnimationStart() • AnimatorListenerAdapter • provides empty implementations of the 4 methods above • often used if only 1, 2, or 3 of methods above are needed

  23. AnimatorListenerAdapter example AnimatorSetmySet = new AnimatorSet() //Load animations into the set (the adapter can also be applied to an ObjectAnimator object) mySet.addListener(new AnimatorListenerAdapter () { @Override public void onAnimationStart(Animator animation) { super.onAnimationStart(animation); //Code to execute when animation starts is put here } @Override public void onAnimationRepeat(Animator animation) { super.onAnimationRepeat(animation); //Code to execute when animation repeats is put here } });

  24. AnimatorListener example AnimatorSetmySet = new AnimatorSet() //Load animations into the set (the adapter can also be applied to an //ObjectAnimatorobject) mySet.addListener(new AnimatorListener() { //Code here is similar to last slide, but all 4 methods must be implemented });