Android View Properties & Animations

  • View
    23

  • Download
    0

Embed Size (px)

DESCRIPTION

Android View Properties & Animations. 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. - PowerPoint PPT Presentation

Text of Android View Properties & Animations

Android Animations

Android View Properties & AnimationsAnimations Pre-HoneycombPre-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, its location and orientation remained the same.

Pre-honeycomb AnimationTextViewTextViewPre-Honeycomb AnimationsAnimations 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 didnt even exist at this time.Post-Honeycomb AnimationsWith 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!

New View PropertiestranslationXandtranslationY: These properties control where the View is located as a delta from itsleft andtopcoordinates 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, androtationY: These properties control the rotation in 2D (rotation) and 3D around the pivot point.

scaleXandscaleY: These properties control the 2D scaling of a View around its pivot point.

New View PropertiespivotXandpivotY: 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.

xandy: 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);

View Properties methodsAll of the new View properties are accessible via setter and getter methods on the View itself.

For example,setRotation()getRotation()View Property methodsThe 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.Animation Demoshttp://youtu.be/-9nxx066eHEAnimations in AndroidThe 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.3 ways to AnimateObjectAnimator

ViewAnimator

ViewPropertyAnimatorObjectAnimatorObjectAnimatorTakes 3 thingsA target object A property1 or more values

ObjectAnimatorThe 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);ObjectAnimator Uses 3 Things View view = findViewById(R.id.text);

ObjectAnimator anim = ObjectAnimator.ofInt(view, "backgroundColor", 0xFFFF0000, 0xFF00FF00);targetpropertyvaluesObjectAnimator TargetThe ObjectAnimator accepts an object of type Object for the target object.

That means you can animate any type of object.Views, data structures, etc.ObjectAnimator PropertyThe 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.

Setter and Getter methodsIf you animate a target objects property you are implicitly declaring a contract that the object has a setter and getter method for the property.Animating FooObjectAnimator.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.Animating FooObjectAnimator.ofInt(tom, foo, 100);

public class Tom {private int mFoo;public void setFoo(int foo) {mFoo = foo;}public int getFoo() {return mFoo;}}ObjectAnimator Property SuccessIf 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. ObjectAnimator Property FailureIf 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.ObjectAnimator ValuesA 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).ObjectAnimator Uses 3 Things View view = findViewById(R.id.text);

ObjectAnimator anim = ObjectAnimator.ofInt(view, "backgroundColor", 0xFFFF0000, 0xFF00FF00);targetpropertyStart ValueEnd ValueObjectAnimator Uses 3 Things View view = findViewById(R.id.text);

ObjectAnimator anim = ObjectAnimator.ofInt(view, "backgroundColor", 0xFF00FF00);End ValueObjectAnimator ValuesObjectAnimator.ofInt(Object target, String propertyName, int... values)

int represents a Java varargJava VaragrsThe is a special language construct that allows multiple arguments to be passed into a method as an array

This was used with AsyncTasksAnimating different Types of valuesObjectAnimator supports animating 4 Types of values:

IntFloatObjectPropertyValuesHolderAnimating different Types of valuesYoull use ObjectAnimator mostly for float and int values.

IntFloatObjectPropertyValuesHolderChoosing which type of value to animate?If the value is a whole number, use intTranslating x and yColors (0xFFFF0000)

If the value is NOT a whole number, use floatAlpha (0f 1f)ScaleYou try!Use the example to animate the alpha of the View instead of the backgroundColor.Other Animation AttributessetStartDelay(long): This property controls how long the animation waits after a call tostart()before it starts playing.

setRepeatCount(int)andsetRepeatMode(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.

Animation ListenersListen 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) {}});Animation Listener Use CaseWhen animating a Views alpha you can use the onAnimationEnd() callback to set the visibility of a View to INVISIBLE/GONE when its alpha is 1 and youre animating to 0.

When animating a Views alpha you can use the onAnimationStart() callback to set the visibility of a View to VISIBLE when its alpha is 0 and youre animating to 1.

Defining Animations in XMLYou can create XML animation resources for your ObjectAnimators

Place resources files in res/animatorsObjectAnimator in XML

See here for more details.Background Animator in XML

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, youre 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.Loading Animations from XMLObjectAnimator anim = AnimatorInflator.loadAnimator(this, R.animator.color_animator);anim.setTarget(view);anim.start();Sets of AnimationsSuppose you want several animations running in tandemFade out several views Slide in other views while fading them in.

You could do separate animations bymanually starting the animations at the right times Using startDelays set on the various delayed animations.AnimatorSetAnimatorSetallows you to choreograph animations that play together,playTogether(Animator...)animations that play one after the other,playSequentially(Animator...)or you can organically build up a set of animations that play together, sequentially, or with specified delaysAnimatorSet 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);v1v2AnimatorSet 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);v1v2AnimatorSet 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 Anima