Basic Animation

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. Tweened animation • Components of tweened animation • Drawable • image file (.png, .jpg, .gif) • xml file • ShapeDrawable instance • Anim resource • anim folder within the res folder must be created • contains xml describing the animation • Java code • AnimationUtils class • Animation class • AnimationListener class • AnimationSet class

4. Anim resource anim folder within res folder

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

6. Tweened animation • Rotate options • Setting rotation parameters • fromDegrees • toDegrees • Setting the pivot point • pivotX • pivotY • Duration • duration • time in milliseconds

7. Tweened animation • Sample rotate .xml file <?xml version="1.0" encoding="utf-8" ?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:toDegrees="720" android:pivotX="25%" android:pivotY="75%" />

8. Tweened animation • Translate options • Setting movement parameters • toXDelta • positive is number of pixels to the right • toYDelta • positive is number of pixels down • Duration • duration • time in milliseconds

9. Tweened animation • Sample translate .xml file <?xml version="1.0" encoding="utf-8" ?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:toYDelta="80" android:duration="1000" />

10. Tweened animation • Alpha options • Setting alpha (transparency) parameters • fromAlpha and toAlpha • Number between 0.0 and 1.0 • 1.0 is non-transparent, 0.0 is fully-transparent • Duration • duration • time in milliseconds

11. Tweened animation • Sample alpha .xml file <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:fromAlpha="0.75" android:toAlpha="0.25" android:duration="2000" />

12. Tweened animation • Scale options • Setting scaling (shrink/stretch) parameters • fromXScale and toXScale (or YScale) • numbers are relative to each other • Setting the pivot point • pivotX • pivotY • Duration • duration • time in milliseconds

13. Tweened animation • Sample scale .xml file <scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="1.0" android:toXScale="0.33" android:fromYScale="1.0" android:toYScale="0.33" android:pivotX="50%" android:pivotY="50%" android:duration="5000" />

14. Java code Relevant animation classes

15. AnimationUtils class • AnimationUtils class • a way to manage animations • loadAnimation ties an animation xml file to an instance of an Animation

16. Animation class • Animation class • An animation that can be applied to views • relevant methods • setRepeatCount • default is 0 • setFillAfter • If argument is true, Animation persists after it ends • i.e. If object is moved, it stays where it was moved to • default is false • setAnimationListener • a way to execute code as soon as an animation starts, repeats, or ends • must assign a user defined class that extends AnimationListener

17. Sample codeSingle animation – without Listener ImageView iv = (ImageView)findViewById(R.id.myIV); Animation an = AnimationUtils.loadAnimation(this, R.anim.myXMLFile); an.setRepeatCount(3); iv.startAnimation(an);

18. AnimationListener class • Allows an Animation to ‘Listen’ for: • animation start • animation repeat • animation end • Is often written as an Inner class

19. AnimationListener sample code class MyAnimationListener implements AnimationListener{ public void onAnimationEnd(Animation animation) { //Code to execute when animation ends } public void onAnimationRepeat(Animation animation) { //Code to execute when animation repeats } public void onAnimationStart(Animation animation) { //Code to execute when animation starts } }

20. Sample codeSingle animation – with Listener ImageView iv = (ImageView)findViewById(R.id.myIV); Animation an = AnimationUtils.loadAnimation(this, R.anim.myXMLFile); an.setRepeatCount(3); an.setAnimationListener(new MyAnimationListener()); iv.startAnimation(an);

21. AnimationSet • Collection of a group of animations that will be played simultaneously • Any properties set at the AnimationSet level override properties at individual Animation level • duration • Constructor accepts boolean • true for our purposes • indicates to share an Interpolator (allows acceleration and deceleration of animation) • Sets can listen in the same way individual animations can • Known issue – Sets do not respond to setRepeatCount()

22. AnimationSet – implemented via java ImageView iv = (ImageView)findViewById(R.id.myImageView); AnimationSet animations = new AnimationSet(true); Animation an1 = AnimationUtils.loadAnimation(this, R.anim.xmlFile1); animations.addAnimation(an1); Animation an2 = AnimationUtils.loadAnimation(this, R.anim.xmlFile2); animations.addAnimation(an2); animations.setDuration(4000); iv.startAnimation(animations);

23. AnimationSet – implemented via xml Advantage of doing a set in xml is that each animation can be given a different duration (duration cannot be put at the set level in xml) <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:toYDelta="80" android:duration="10000" /> <alpha android:fromAlpha="0.75" android:toAlpha="0.25" android:duration="2000" android:startOffset="4000" /> </set>

24. AnimationSet – implemented via xmlJava code treats as normal animation ImageView iv = (ImageView)findViewById(R.id.myIV); Animation an = AnimationUtils.loadAnimation(this, R.anim.myAnimXMLFile); iv.startAnimation(an);