1 / 24

Basic Animation

Basic Animation. 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. Animation. Pre-3.0 (Honeycomb) View animation

amandla
Download Presentation

Basic Animation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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 });

More Related