Android View Properties & Animations
description
Transcript of Android View Properties & Animations
![Page 1: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/1.jpg)
Android View Properties & Animations
![Page 2: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/2.jpg)
Animations Pre-Honeycomb
• Pre-Honeycomb, the world of animations in Android was quite different.
• When you animated a view, you only changed how it was drawn.
• Although an animated View visually looked different, it’s location and orientation remained the same.
![Page 3: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/3.jpg)
Pre-honeycomb Animation
TextViewTextView
![Page 4: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/4.jpg)
Pre-Honeycomb Animations
• Animations were done by visually drawing the view to appear different.
• This was done because at the time, there were no setter or getter methods for changing view properties.
• Some properties didn’t even exist at this time.
![Page 5: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/5.jpg)
Post-Honeycomb Animations
• With Honeycomb, several properties to View were added that allowed the View itself to actually change.
• Now, when a View is animated it is not only drawn in a new position, but is also actually located there as well.
• Click events actually work as one would expect!
![Page 6: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/6.jpg)
New View Properties• translationX and translationY: These properties control where
the View is located as a delta from its left and top coordinates which are set by its layout container. You can run a move animation on a button by animating these, like this: ObjectAnimator.ofFloat(view, "translationX", 0f, 100f);.
• rotation, rotationX, and rotationY: These properties control the rotation in 2D (rotation) and 3D around the pivot point.
• scaleX and scaleY: These properties control the 2D scaling of a View around its pivot point.
![Page 7: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/7.jpg)
New View Properties• pivotX and pivotY: These properties control the location of the
pivot point, around which the rotation and scaling transforms occur. By default, the pivot point is centered at the center of the object.
• x and y: These are simple utility properties to describe the final location of the View in its container, as a sum of the left/top and translationX/translationY values.
• alpha: This value is 1 (opaque) by default, with a value of 0 representing full transparency (i.e., it won't be visible). To fade a View out, you can do this: ObjectAnimator.ofFloat(view, "alpha", 0f);
![Page 8: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/8.jpg)
View Properties methods
• All of the new View properties are accessible via setter and getter methods on the View itself.
• For example,– setRotation()– getRotation()
![Page 9: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/9.jpg)
View Property methods
• The getter and setter methods make these properties available to the Android Animation System.
• These methods also take care to call invalidate() in order to render correctly.
![Page 11: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/11.jpg)
Animations in Android
• The animation system released in Honeycomb, allows developers to animate any target object, property, or data structure.
• This allows Views to animate opacity, background color, position, scale, etc.
![Page 12: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/12.jpg)
3 ways to Animate
• ObjectAnimator
• ViewAnimator
• ViewPropertyAnimator
![Page 13: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/13.jpg)
ObjectAnimator
![Page 14: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/14.jpg)
ObjectAnimator
Takes 3 things1. A target object 2. A property3. 1 or more values
![Page 15: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/15.jpg)
ObjectAnimator• The constructors of this class take parameters to define the
target object that will be animated as well as the name of the object property that will be animated.
View view = findViewById(R.id.text);
ObjectAnimator anim = ObjectAnimator.ofInt(view, "backgroundColor", 0xFFFF0000, 0xFF00FF00);
![Page 16: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/16.jpg)
ObjectAnimator Uses 3 Things
View view = findViewById(R.id.text);
ObjectAnimator anim = ObjectAnimator.ofInt(view, "backgroundColor", 0xFFFF0000, 0xFF00FF00);
target
propertyvalues
![Page 17: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/17.jpg)
ObjectAnimator Target
• The ObjectAnimator accepts an object of type Object for the target object.
• That means you can animate any type of object.– Views, data structures, etc.
![Page 18: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/18.jpg)
ObjectAnimator Property
• The class updates the object property accordingly when a new value is computed for the animation.
• Property needs to be exposed on the target object via setter and getter methods.
![Page 19: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/19.jpg)
Setter and Getter methods
• If you animate a target object’s property you are implicitly declaring a contract that the object has a setter and getter method for the property.
![Page 20: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/20.jpg)
Animating Foo
• ObjectAnimator.ofInt(tom, “foo”, 100);
• Here I am implicitly agreeing that the Object tom has a method setFoo() and getFoo() and that the setter and getter methods handle int types.
![Page 21: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/21.jpg)
Animating FooObjectAnimator.ofInt(tom, “foo”, 100);
public class Tom {private int mFoo;
public void setFoo(int foo) {mFoo = foo;}
public int getFoo() {return mFoo;}
}
![Page 22: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/22.jpg)
ObjectAnimator Property Success
• If your target object providers setter and getter methods for the property, then the animation will be able to find those setter/getter functions on the target object and set values during the animation.
![Page 23: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/23.jpg)
ObjectAnimator Property Failure
• If the functions do not exist or do not accept the type of value given, then the animation will fail at runtime, since it will be unable to locate the functions it needs.
![Page 24: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/24.jpg)
ObjectAnimator Values
• A single value implies that that value is the one being animated to.
• Two values imply a starting and ending values.
• More than two values imply a starting value, values to animate through along the way, and an ending value (these values will be distributed evenly across the duration of the animation).
![Page 25: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/25.jpg)
ObjectAnimator Uses 3 Things
View view = findViewById(R.id.text);
ObjectAnimator anim = ObjectAnimator.ofInt(view, "backgroundColor", 0xFFFF0000, 0xFF00FF00);
target
propertyStart Value End Value
![Page 26: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/26.jpg)
ObjectAnimator Uses 3 Things
View view = findViewById(R.id.text);
ObjectAnimator anim = ObjectAnimator.ofInt(view, "backgroundColor", 0xFF00FF00);
End Value
![Page 27: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/27.jpg)
ObjectAnimator ValuesObjectAnimator.ofInt(Object target, String propertyName, int... values)
int… represents a Java vararg
![Page 28: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/28.jpg)
Java Varagrs…
• The … is a special language construct that allows multiple arguments to be passed into a method as an array
• This was used with AsyncTasks
![Page 29: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/29.jpg)
Animating different Types of values
• ObjectAnimator supports animating 4 Types of values:
1. Int2. Float3. Object4. PropertyValuesHolder
![Page 30: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/30.jpg)
Animating different Types of values
• You’ll use ObjectAnimator mostly for float and int values.
1. Int2. Float3. Object4. PropertyValuesHolder
![Page 31: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/31.jpg)
Choosing which type of value to animate?
• If the value is a whole number, use int– Translating x and y– Colors (0xFFFF0000)
• If the value is NOT a whole number, use float– Alpha (0f – 1f)– Scale
![Page 32: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/32.jpg)
You try!
• Use the example to animate the alpha of the View instead of the backgroundColor.
![Page 33: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/33.jpg)
Other Animation Attributes
• setStartDelay(long): This property controls how long the animation waits after a call to start() before it starts playing.
• setRepeatCount(int) and setRepeatMode(int): These functions control how many times the animation repeats and whether it repeats in a loop or reverses direction each time.
• setInterpolator(TimeInterpolator): This object controls the timing behavior of the animation. By default, animations accelerate into and decelerate out of the motion, but you can change that behavior by setting a different interpolator.
![Page 34: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/34.jpg)
Animation Listeners
• Listen to animation lifecycle events by implementing the AnimatorListener interface.
anim.addListener(new Animator.AnimatorListener() {public void onAnimationStart(Animator animation) {}public void onAnimationEnd(Animator animation) { // do something when the animation is done}public void onAnimationCancel(Animator animation) {}public void onAnimationRepeat(Animator animation) {}
});
![Page 35: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/35.jpg)
Animation Listener Use Case
• When animating a View’s alpha you can use the onAnimationEnd() callback to set the visibility of a View to INVISIBLE/GONE when its alpha is 1 and you’re animating to 0.
• When animating a View’s alpha you can use the onAnimationStart() callback to set the visibility of a View to VISIBLE when its alpha is 0 and you’re animating to 1.
![Page 36: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/36.jpg)
Defining Animations in XML
• You can create XML animation resources for your ObjectAnimators
• Place resources files in res/animators
![Page 37: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/37.jpg)
ObjectAnimator in XML<objectAnimator android:propertyName="string" android:duration="int" android:valueFrom="float | int | color" android:valueTo="float | int | color" android:startOffset="int" android:repeatCount="int" android:repeatMode=["repeat" | "reverse"] android:valueType=["intType" | "floatType"]/>
See here for more details.
![Page 38: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/38.jpg)
Background Animator in XML<?xml version="1.0" encoding="utf-8"?><objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:propertyName="backgroundColor" android:valueFrom="#FF0000" android:valueTo="#00FF00" android:duration="3000" android:repeatCount="infinite" android:repeatMode="reverse" />
![Page 39: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/39.jpg)
ObjectAnimator Restriction!
• You must have a public "set" function on your object that corresponds to the property name and takes the appropriate type.
• If you use only one value, you’re asking the animation system to derive the starting value from the object, so you must also have a public "get" function which returns the appropriate type.
![Page 40: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/40.jpg)
Loading Animations from XML
ObjectAnimator anim = AnimatorInflator.loadAnimator(this, R.animator.color_animator);anim.setTarget(view);anim.start();
![Page 41: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/41.jpg)
Sets of Animations
• Suppose you want several animations running in tandem1. Fade out several views 2. Slide in other views while fading them in.
• You could do separate animations by1. manually starting the animations at the right times 2. Using startDelays set on the various delayed
animations.
![Page 42: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/42.jpg)
AnimatorSet
AnimatorSet allows you to choreograph animations that
1. play together, playTogether(Animator...)2. animations that play one after the
other, playSequentially(Animator...)3. or you can organically build up a set of
animations that play together, sequentially, or with specified delays
![Page 43: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/43.jpg)
AnimatorSet playTogetherObjectAnimator fadeOut = ObjectAnimator.ofFloat(v1, "alpha", 0f);ObjectAnimator mover = ObjectAnimator.ofFloat(v2, "translationX", -500f, 0f);ObjectAnimator fadeIn = ObjectAnimator.ofFloat(v2, "alpha", 0f, 1f);
AnimatorSet animSet = new AnimatorSet();animSet.playTogether(fadeOut, mover, fadeIn);
v1 v2
![Page 44: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/44.jpg)
AnimatorSet playSequentially()ObjectAnimator fadeOut = ObjectAnimator.ofFloat(v1, "alpha", 0f);ObjectAnimator mover = ObjectAnimator.ofFloat(v2, "translationX", -500f, 0f);ObjectAnimator fadeIn = ObjectAnimator.ofFloat(v2, "alpha", 0f, 1f);
AnimatorSet animSet = new AnimatorSet();animSet.playSequentially(fadeOut, mover, fadeIn);
v1 v2
![Page 45: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/45.jpg)
AnimatorSet organic buildupObjectAnimator fadeOut = ObjectAnimator.ofFloat(v1, "alpha", 0f);ObjectAnimator mover = ObjectAnimator.ofFloat(v2, "translationX", -500f, 0f);ObjectAnimator fadeIn = ObjectAnimator.ofFloat(v2, "alpha", 0f, 1f);
//fade out v1 and then slide in v2 while fading itAnimatorSet animSet = new AnimatorSet().play(mover).with(fadeIn).after(fadeOut);;animSet.start();
v1 v2
![Page 46: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/46.jpg)
AnimatorSet in XML resource<set android:ordering=["together" | "sequentially"]> <objectAnimator android:propertyName="string" android:duration="int" android:valueFrom="float | int | color" android:valueTo="float | int | color" android:startOffset="int" android:repeatCount="int" android:repeatMode=["repeat" | "reverse"] android:valueType=["intType" | "floatType"]/> <set> ...Specify another AnimatorSet </set></set>
![Page 47: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/47.jpg)
Using XML AnimatorSet ResourceAnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.colornfade_animator);
//have to find the color objectanimator and specify the evaluator((ObjectAnimator)set.getChildAnimations().get(0)).setEvaluator(new ArgbEvaluator()); set.setTarget(view);set.start();
![Page 48: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/48.jpg)
ValueAnimator
![Page 49: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/49.jpg)
Used less than ObjectAnimator
• ObjectAnimator is a subclass of ValueAnimator.
• You won’t use ValueAnimator unless the object doesn’t expose a setter or getter method for the property you want to animate.
• Read here for how to use them.
![Page 50: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/50.jpg)
ViewPropertyAnimator
![Page 51: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/51.jpg)
ViewPropertyAnimator
• More limited than ObjectAnimator– Can only animate View properties– Only allows a subset of standard View properties– Less capabilities/flexibility
• Way less overhead than ObjectAnimator.– This means ViewPropertyAnimators perform better than
ObjectAnimators.
• Extremely easy to read
![Page 52: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/52.jpg)
ViewPropertyAnimator
• Uses a single animator to animate several View properties in parallel.
• Calculates animated values for properties
• Sets values directory on target View.
• Properly invalidates the View
![Page 53: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/53.jpg)
ViewPropertyAnimator Example
myView.animate().alpha(0);
or
myView.animate().x(500).y(500);
![Page 54: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/54.jpg)
Things to note: animate()
• animate(): The magic of the system begins with a call to the new method animate() on the View object. This returns an instance of ViewPropertyAnimator, on which other methods are called which set the animation properties.
![Page 55: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/55.jpg)
Things to note: Auto-Start
• Note that we didn’t actually start() the animations in the previous example.
• Starting the animations is implicit. As soon as you’re done declaring them, they will all begin together.
![Page 56: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/56.jpg)
Things to note: Fluency
• ViewPropertyAnimator has a Fluent interface
• Allows you to chain method calls together in a very natural way and issue a multi-property animation command as a single line of code.
• So all of the calls such as x() and y() return the ViewPropertyAnimator instance, on which you can chain other method calls.
![Page 57: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/57.jpg)
ViewPropertyAnimator Methods• cancel()
– You can cancel() a running ViewPropertyAnimator.
• setStartDelay()– You can set a startDelay on the ViewPropertyAnimator, just like the startDelay of the
other Animator classes.
• start()– ViewPropertyAnimators start automatically; however, if you just want to run a single
animation, or want to make sure it starts immediately, at the time of construction, you can call start() to avoid that intervening delay.
• See more here
![Page 58: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/58.jpg)
XML Resource for ViewPropertyAnimator
• To my knowledge you can’t declare XML resources for ViewPropertyAnimators.
• You can only use ViewPropertyAnimators programmatically in code.
![Page 59: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/59.jpg)
Final Notes
![Page 60: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/60.jpg)
Important facts of Animations
• All animations discussed in class were introduced in Honeycomb and have slowly evolved. Different SDK version support different capabilities. Check the docs to see what works for your SDK level.
![Page 61: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/61.jpg)
Important facts of Animations
• Animations are possible in Pre-Honeycomb; however they are only drawn differently. They don’t actually move (events still behave on original position)
• NineOldAndroids is an Android library for using the Honeycomb animation API on all versions of the platform back to 1.0!
![Page 62: Android View Properties & Animations](https://reader035.fdocuments.net/reader035/viewer/2022081503/568163ff550346895dd59d8a/html5/thumbnails/62.jpg)
Animation Resources
• Animation in Honeycomb
• Introducing ViewPropertyAnimator
• Android 4.0 Graphics and Animations
• Android ViewPropertyAnimator documentation
• Property Animation: A good Overall Summary of all Animations in Android.