Presentation is loading. Please wait.

Presentation is loading. Please wait.

Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.

Similar presentations


Presentation on theme: "Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more."— 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 AnimatorListenerAdapter class (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) <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();

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

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

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

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 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" /> Loading the.xml file AnimatorSet as = (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 AnimatorSet mySet = 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 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 });


Download ppt "Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more."

Similar presentations


Ads by Google