Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened...
-
Upload
walter-gray -
Category
Documents
-
view
224 -
download
2
Transcript of Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened...
![Page 1: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/1.jpg)
Basic Animation
![Page 2: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/2.jpg)
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
![Page 3: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/3.jpg)
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
![Page 4: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/4.jpg)
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.
![Page 5: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/5.jpg)
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
![Page 6: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/6.jpg)
Animation examples
![Page 7: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/7.jpg)
Tweened animation
• Types of tweened animation– rotate (spin)– translate (move)– alpha (fade)– scale (shrink/stretch)
![Page 8: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/8.jpg)
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();
![Page 9: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/9.jpg)
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();
![Page 10: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/10.jpg)
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();
![Page 11: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/11.jpg)
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();
![Page 12: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/12.jpg)
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();
![Page 13: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/13.jpg)
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();
![Page 14: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/14.jpg)
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();
![Page 15: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/15.jpg)
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();
![Page 16: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/16.jpg)
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
![Page 17: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/17.jpg)
Combining Animations
![Page 18: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/18.jpg)
Combining Animations
• AnimatorSet class– Combine animations or sets– Play sequentially or together
![Page 19: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/19.jpg)
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();
![Page 20: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/20.jpg)
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()
![Page 21: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/21.jpg)
Listening for events associated with animations
![Page 22: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/22.jpg)
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
![Page 23: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/23.jpg)
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}
});
![Page 24: Basic Animation. Animation 4 options – Animated.gif – Frame by Frame animation – Tweened animation This is our focus – OpenGL ES Graphics API for more.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649dbb5503460f94aad551/html5/thumbnails/24.jpg)
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});