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– 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

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.

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• AnimatorListenerAdapter class (and AnimatorListener class)• AnimatorInflater class

Animation examples

Tweened animation

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

Rotate animation – in xml• Rotate .xml example (within res/animator folder)

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:propertyName="rotationY" android:duration="1000" android:valueTo="360" android:valueType="floatType"/>

• Loading the .xml file

ObjectAnimator oa = (ObjectAnimator)AnimatorInflater.loadAnimator(this, R.animator.my_rotate_xml_filename);oa.setTarget(my_imageview);oa.start();

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

Translate animation – in xml• Translate .xml example (within res/animator folder)

<objectAnimator xmlns: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

ObjectAnimator oa = (ObjectAnimator)AnimatorInflater.loadAnimator(this, R.animator.my_translate_xml_filename);oa.setTarget(my_imageview);oa.start();

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

Alpha animation – in xml• Alpha .xml example (within res/animator folder)

<objectAnimator xmlns: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

ObjectAnimator oa = (ObjectAnimator)AnimatorInflater.loadAnimator(this, R.animator.my_alpha_xml_filename);oa.setTarget(my_imageview);oa.start();

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

Scale animation – in xml• Scale .xml example (within res/animator folder)

<objectAnimator xmlns: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

ObjectAnimator oa = (ObjectAnimator)AnimatorInflater.loadAnimator(this, R.animator.my_scale_xml_filename);oa.setTarget(my_imageview);oa.start();

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

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

Combining Animations

Combining Animations

• AnimatorSet class– Combine animations or sets– Play sequentially or together

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

AnimatorSet as = (AnimatorSet)AnimatorInflater.loadAnimator(this, R.animator.my_set_xml_filename);as.setTarget(my_imageview);as.start();

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

Listening for events associated with animations

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

AnimatorListenerAdapter exampleAnimatorSet mySet = new AnimatorSet()

//Load animations into the set (the adapter can also be applied to an ObjectAnimator object)

mySet.addListener(new AnimatorListenerAdapter () {@Overridepublic void onAnimationStart(Animator animation) {

super.onAnimationStart(animation);

//Code to execute when animation starts is put here}

@Overridepublic void onAnimationRepeat(Animator animation) {

super.onAnimationRepeat(animation);

//Code to execute when animation repeats is put here}

});

AnimatorListener example

AnimatorSet mySet = new AnimatorSet()

//Load animations into the set (the adapter can also be applied to an //ObjectAnimator object)

mySet.addListener(new AnimatorListener () { //Code here is similar to last slide, but all 4 methods must be implemented});