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

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

Anim resource

anim folder within res folder

Tweened animation

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

Tweened animation

• Rotate options– Setting rotation parameters• fromDegrees• toDegrees

– Setting the pivot point• pivotX• pivotY

– Duration• duration

– time in milliseconds

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%"

/>

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

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"/>

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

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"

/>

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

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"

/>

Java code

Relevant animation classes

AnimationUtils class

• AnimationUtils class– a way to manage animations– loadAnimation ties an animation xml file to an

instance of an Animation

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

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

AnimationListener class

• Allows an Animation to ‘Listen’ for:– animation start– animation repeat– animation end

• Is often written as an Inner class

AnimationListener sample codeclass 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

} }

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

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()

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

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"/><alphaandroid:fromAlpha="0.75"android:toAlpha="0.25"android:duration= "2000"android:startOffset= "4000"/>

</set>

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