1. Lecture Series on Android Programming Lecturer: Prof.Luqun Li (liluqun@gmail.com)liluqun@gmail.com Teaching Assistants: Fengyou Sun, Haijun Yang, Ting Sun Chapter 6 Unveiling 2D animation

2. Shanghai Normal University 2 Contents 1 1 Frame Animation 2 2 Tween Animation 3 3 Property Animation

3. Shanghai Normal University 3 Frame Animation An animation defined in XML that sh ows a sequence of images in order (like a film).

4. Shanghai Normal University 4 Frame Animation file location: res/drawable/filename.xml The filename will be used as the resource ID. compiled resource datatype: Resource pointer to an AnimationDrawable. resource reference: In Java: R.drawable.filename In XML: @[package:]drawable.filename syntax:

5. Shanghai Normal University 5 Elements Required. This must be the root element. C ontains one or more elements. attrib utes: android:oneshot Boolean. "true" if you want to perform the animati on once; "false" to loop the animation.

6. Shanghai Normal University 6 Elements A single frame of animation. Must be a child of a element. attributes: android:drawable Drawable resource. The drawable to use for this f rame. android:duration Integer. The duration to show this frame, in millis econds.

7. Shanghai Normal University 7 Example First create the XML Layout File for the Frame Animation Example Then create the Activity to Load the ImageView

8. Shanghai Normal University 8 AnimationDrawable An object used to create frame-by-frame anima tions, defined by a series of Drawable objects, which can be used as a View object's backgroun d. The simplest way to create a frame-by-frame an imation is to define the animation in an XML file, placed in the res/drawable/ folder, and set it as the background to a View object. Then, call star t() to run the animation. An AnimationDrawable defined in XML consists of a single element, and a seri es of nested tags. Each item defines a f rame of the animation.

9. Shanghai Normal University 9 Adding Animation frame_animation.xml file in res/dra wable/ folder: Here is the code to load and play thi s animation:

10. Shanghai Normal University 10 Concluded

11. Shanghai Normal University 11 Contents 1 1 Frame Animation 2 2 Tween Animation 3 3 Property Animation

12. Shanghai Normal University 12 Tween animation An animation defined in XML that pe rforms transitions such as rotating, fading, moving, and stretching on a graphic.

13. Shanghai Normal University 13 Tween animation file location: res/anim/filename.xml The filename will be used as the resource ID. compiled resource datatype: Resource pointer to an Animation. resource reference: In Java: R.anim.filename In XML: @[package:]anim/filename syntax:

14. Shanghai Normal University 14 Elements A container that holds other animation elements (,,, ) or other elements. Represents an AnimationSet. attributes: android:interpolator Interpolator resource. An Interpolator to apply on the anima tion. The value must be a reference to a resource that spec ifies an interpolator (not an interpolator class name). There are default interpolator resources available from the platfor m or you can create your own interpolator resource. See th e discussion below for more about Interpolators. android:shareInterpolator Boolean. "true" if you want to share the same interpolator a mong all child elements.

15. Shanghai Normal University 15 Elements A fade-in or fade-out animation. Represents an Alph aAnimation. attributes: android:fromAlpha Float. Starting opacity offset, where 0.0 is transparent and 1.0 is opaque. android:toAlpha Float. Ending opacity offset, where 0.0 is transparent and 1. 0 is opaque. For more attributes supported by, see the A nimation class reference (of which, all XML attribute s are inherrited by this element).

16. Shanghai Normal University 16 Elements A resizing animation. You can specify the center poi nt of the image from which it grows outward (or inwa rd) by specifying pivotX and pivotY. For example, if t hese values are 0, 0 (top-left corner), all growth will be down and to the right. Represents a ScaleAnimat ion. attributes: android:fromXScale Float. Starting X size offset, where 1.0 is no change. android:toXScale Float. Ending X size offset, where 1.0 is no change.

17. Shanghai Normal University 17 Elements android:fromYScale Float. Starting Y size offset, where 1.0 is no change. android:toYScale Float. Ending Y size offset, where 1.0 is no change. android:pivotX Float. The X coordinate to remain fixed when the object is scal ed. android:pivotY Float. The Y coordinate to remain fixed when the object is scal ed. For more attributes supported by, see t he Animation class reference (of which, all XML attributes are inherrited by this element).

18. Shanghai Normal University 18 Example XML file saved at res/anim/hypersp ace_jump.xml: This application code will apply the animation to an ImageView and star t the animation:

19. Shanghai Normal University 19 Interpolators An interpolator is an animation modifier defined in XML that affects the rate of ch ange in an animation. This allows your ex isting animation effects to be accelerated, decelerated, repeated, bounced, etc. An interpolator is applied to an animation element with the android:interpolator att ribute, the value of which is a reference t o an interpolator resource. All interpolators available in Android are subclasses of the Interpolator class.

20. Shanghai Normal University 20 Interpolators...

21. Shanghai Normal University 21 Custom interpolators If you're not satisfied with the inter polators provided by the platform (li sted in the table above), you can cr eate a custom interpolator resource with modified attributes. http://developer.android.com/guide /topics/resources/animation-resourc e.html#Tween

22. Shanghai Normal University 22 Concluded

23. Shanghai Normal University 23 Contents 1 1 Frame Animation 2 2 Tween Animation 3 3 Property Animation

24. Shanghai Normal University 24 Property Animation An animation defined in XML that m odifies properties of the target obje ct, such as background color or alph a value, over a set amount of time.

25. Shanghai Normal University 25 Property Animation file location: res/animator/filename.xml The filename will be used as the resource ID. compiled resource datatype: Resource pointer to a ValueAnimator, Object Animator, or AnimatorSet. resource reference: In Java: R.animator.filename In XML: @[package:]animator/filename syntax:

26. Shanghai Normal University 26 Elements A container that holds other animation eleme nts (,, or other elements). Represents an Anim atorSet. You can specify nested tags t o further group animations together. Each can define its own ordering attribute.

27. Shanghai Normal University 27 Elements attributes: android:ordering Keyword. Specifies the play ordering of anim ations in this set.

28. Shanghai Normal University 28 Elements Animates a specific property of an object over a spe cific amount of time. Represents an ObjectAnimator. attributes: android:propertyName String. Required. The object's property to animate, referen ced by its name. For example you can specify "alpha" or "b ackgroundColor" for a View object. The objectAnimator ele ment does not expose a target attribute, however, so you c annot set the object to animate in the XML declaration. You have to inflate your animation XML resource by calling load Animator() and call setTarget() to set the target object that contains this property.

29. Shanghai Normal University 29 Elements android:valueTo float, int, or color. Required. The value where the a nimated property ends. Colors are represented as si x digit hexadecimal numbers (for example, #33333 3). android:valueFrom float, int, or color. The value where the animated pro perty starts. If not specified, the animation starts at t he value obtained by the property's get method. Col ors are represented as six digit hexadecimal numbe rs (for example, #333333). android:duration int. The time in milliseconds of the animation. 300 m illiseconds is the default.

30. Shanghai Normal University 30 Elements android:duration int. The time in milliseconds of the animation. 300 m illiseconds is the default. android:startOffset int. The amount of milliseconds the animation delay s after start() is called. android:repeatCount int. How many times to repeat an animation. Set to " -1" to infinitely repeat or to a positive integer. For ex ample, a value of "1" means that the animation is re peated once after the initial run of the animation, so the animation plays a total of two times. The default value is "0", which means no repetition.

31. Shanghai Normal University 31 Elements android:repeatMode int. How an animation behaves when it reac hes the end of the animation. android:repeat Count must be set to a positive integer or "-1 " for this attribute to have an effect. Set to "r everse" to have the animation reverse directi on with each iteration or "repeat" to have the animation loop from the beginning each time.

32. Shanghai Normal University 32 Elements android:valueType Keyword. Do not specify this attribute if the v alue is a color. The animation framework aut omatically handles color values

33. Shanghai Normal University 33 Elements Animates a over a specified amount of time. Repres ents a ValueAnimator. attributes: android:valueTo float, int, or color. Required. The value where the animatio n ends. Colors are represented as six digit hexadecimal nu mbers (for example, #333333). android:valueFrom float, int, or color. Required. The value where the animatio n starts. Colors are represented as six digit hexadecimal nu mbers (for example, #333333). android:duration int. The time in milliseconds of the animation. 300ms is the default.

34. Shanghai Normal University 34 Elements android:startOffset int. The amount of milliseconds the animation delays after start () is called. android:repeatCount int. How many times to repeat an animation. Set to "-1" to infini tely repeat or to a positive integer. For example, a value of "1" means that the animation is repeated once after the initial run of the animation, so the animation plays a total of two times. T he default value is "0", which means no repetition. android:repeatMode int. How an animation behaves when it reaches the end of the animation. android:repeatCount must be set to a positive integ er or "-1" for this attribute to have an effect. Set to "reverse" to have the animation reverse direction with each iteration or "rep eat" to have the animation loop from the beginning each time.

35. Shanghai Normal University 35 Elements android:valueType Keyword. Do not specify this attribute if the v alue is a color. The animation framework aut omatically handles color values.

36. Shanghai Normal University 36 Example XML file saved at res/animator/prop erty_animator.xml: set the target objects for all of the a nimations before starting the anima tion set.

37. Shanghai Normal University 37 Concluded

38. Shanghai Normal University 38 Summary In this chapter, we covered the follo wing topics: All the major types of animation supported b y Android: frame animation, tween animation, and property animation Animation concepts such as interpolators a nd transformation matrices

39. Shanghai Normal University 39 Interview Questions 1. How does frame animation diffe r from tweening animation? 2. How do you initialize an Animati onDrawable in an XML file? 3. How do you define an animation in an XML file? 4. How do you animate any view?