Animations 1 Fall 2012 CS2302: Programming Principles

Animation Category 1. Tweened Animations – Scale animations – Rotate animations – Alpha animations – Translate animations 2. Frame-by-Frame Animations Fall 2012 CS2302: Programming Principles 2

Procedure to create Tweened Animations Fall 2012 CS2302: Programming Principles 3 1. Create an object of AnimationSet 2. Create an object of Animation – TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue) – AlphaAnimation(float fromAlpha, float toAlpha) – ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) – RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) 3. Setting parameters for the object of Animation 4. Add the object of Animation to the object of AnimationSet 5. startAnimation(animationSet);

Attributes of Animations Fall 2012 CS2302: Programming Principles 4 ANIMSTIO N YPE ATTRIBUTESVALID VALUES AlphafromAlpha / toAlphafloat from 0 to 1 ScalefromXScale / toXScalefloat from 0 to 1 fromYScale / toYScalefloat from 0 to 1 pivotX / pivotYString of the percentage of graphic width/height from 0% to 100% TranslatefromX / toXfloat from 0 to 1 fromY / toYfloat from 0 to 1 RotatefromDegrees / toDegreesfloat from 0 to 360 pivotX / pivotYString of the percentage of graphic width/height from 0% to 100%

Common Methods of Tweened Animations Fall 2012 CS2302: Programming Principles 5  setDuration(long durationMills) – set the amount of time (in milliseconds) for the animation to run  setFillAfter(boolean fillAfter) – If fillAfter is set to true, then the animation transformation is applied after the animation is over.  setFillBefore(boolean fillBefore) – If fillBefore is set to true, then the animation transformation is applied before the animation has started.  setStartOffSet(long startOffset) – Set the delay in milliseconds before the animation runs.  setRepeatCount(int repeatCount) – Defines how many times the animation should repeat.

Create Tweened Animations by editing xml file Fall 2012 CS2302: Programming Principles 6  Create a folder called anim under res folder  Create new xml files in the anim folder. Add a set tag in the xml files: <set xmlns:android="  Add rotate, alpha, scale, or translate tag in the set tag.  Use AnimationUtils.loadAnimation to load the xml file, and then create an object of Animation  startAnimation

Alpha Animation’s xml file Fall 2012 CS2302: Programming Principles 7 <set xmlns:android=" droid" _interpolator"> <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:startOffset="500" android:duration="500" />

Rotate Animation’s xml file Fall 2012 CS2302: Programming Principles 8 <set xmlns:android=" droid" _interpolator"> <rotate android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:duration="5000" />

Translate Animation’s xml file Fall 2012 CS2302: Programming Principles 9 <set xmlns:android=" droid" _interpolator"> <translate android:fromXDelta="50%" android:toXDelta="100%" android:fromYDelta="0%" android:toYDelta="100%" android:duration="2000" />

Scale Animation’s xml file Fall 2012 CS2302: Programming Principles 10 <set xmlns:android=" droid" _interpolator"> <scale android:fromXScale="1.0" android:toXScale="0.0" android:fromYScale="1.0" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:duration="2000" />

Load xml file  In the MainActivity.java file – Animation animation = (Animation) AnimationUtils.loadAnimation(MainActivit y.this, R.anim.translate); – imageView.startAnimation(animation); 11 Fall 2012 CS2302: Programming Principles

Frame-By-Frame Animations  Create a xml file under res/drawable <animation-list xmlns:android=" droid" android:oneshot="false"> 12 Fall 2012 CS2302: Programming Principles

Frame-By-Frame Animations  Load the xml file – imageView.setBackgroundResource(R.drawable.anim);  Get AnimationDrawable – AnimationDrawable animationDrawable = (AnimationDrawable)imageView.getBackground(); – Start the animation – animatinDrawable.start(); 13 Fall 2012 CS2302: Programming Principles