android style development View Animation articles

Summary drawable articles have said two movies, animation-list defined frame animation, animated-rotate the rotation animation is defined, which belong to two drawable animations. In addition drawable animation, Android framework also provides two animation systems: View movie (View Animation) and animation property (Property Animation). View animation is relatively simple, can only be used in a variety View, you can do some of the simple change position, size, rotation, and transparency. Property animation is animation introduced in android 3.0 system, offers more features and flexibility, it can be applied to any object, not just View. Benpian talk about the view animation.

Animations can be defined by a view xml file, xml file placed in res / anim / directory, the root element may be: <alpha>, <scale>, <translate>, <rotate>, or & set>. Wherein, <set> tag defined set of animation, it may comprise a plurality of other tags may be nested <set> tag. By default, all of the animation played simultaneously; If you want to play in order, it is necessary to specify attributes startOffset; Further, by setting the rate of change interpolator animation changes, such as constant speed, acceleration.

<alpha>

<Alpha> can achieve transparency gradient animation effects, i.e. the effect of fade, fade in may be set by setting the fade-out effect or the following three properties:

android: duration animation from start to finish sustained length of time, in milliseconds
android: transparency at the beginning of fromAlpha animation, 0.0 is fully transparent, opaque 1.0, the default is 1.0
android: Transparency at the end of toAlpha animation, 0.0 is fully transparent, opaque 1.0, the default is 1.0

Transparency when setting start to 0.0 at the end of 1.0, we can achieve fade-in effect; the contrary, when the transparency setting start to 1.0 at the end of 0.0, it will be able to achieve fade-out effect. Sample code is as follows:

<!-- res/anim/fade_in.xml -->
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromAlpha="0.0"
    android:toAlpha="1.0" />

These animation effects add to the View only need one line of code:

view.startAnimation(AnimationUtils.loadAnimation(this, R.anim.fade_in));

If you need to reuse the animation, you can be pulled out. <Alpha> tag corresponding animation class AlphaAnimation, the parent class of Animation, the above code AlphaAnimation disengagement code may be as follows:

AlphaAnimation fadeInAnimation = (AlphaAnimation) AnimationUtils.loadAnimation(this, R.anim.fade_in);
view.startAnimation(fadeInAnimation);

<scale>

<Scale> zoom animation effects can be achieved, the main attributes are as follows:

android: duration animation from start to finish sustained length of time, in milliseconds
android: When fromXScale animation begins scaling the size of the X-coordinate
android: At the end of toXScale animated zoom size on the X-coordinate
android: When fromYScale animation begins scaling the size of the Y coordinate
android: At the end of the size scale toYScale animation Y coordinate

PS: the above four properties, not to scale showing 0.0, 1.0 represents the normal non-zoom, shrink represents less than 1.0, greater than 1.0 an enlarged

android: pivotX fixed when the X coordinate scaling, generally expressed as a percentage, 0% indicates a left edge, a right edge 100%
android: pivotY fixed at the Y coordinate scaling, generally expressed as a percentage, 0% indicates a top edge, a bottom edge represents 100%

Sample code is as follows:

<!-- res/anim/zoom_out.xml -->
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:pivotX="0%"
    android:pivotY="100%"
    android:toXScale="1.5"
    android:toYScale="1.5" />

<Scale> tag corresponding class ScaleAnimation, Animation is the parent class, and added to the usage of the View AlphaAnimation same code is as follows:

ScaleAnimation zoomOutAnimation = (ScaleAnimation) AnimationUtils.loadAnimation(this, R.anim.zoom_out);
view.startAnimation(zoomOutAnimation);

<Translate> may be implemented animation position, may be moved in the vertical direction, it can be moved in the horizontal direction. There are three values of the coordinate format: from -100 to 100, to "%" ends, indicates a percentage with respect to the position of the View itself; if "% P" end expressed as a percentage relative to the location of the parent View View if any; any suffix, represents View itself with respect to a specific pixel value. The main attributes are as follows:

android: duration animation from start to finish sustained length of time, in milliseconds
android: offset X coordinate start position fromXDelta
android: toXDelta end offset position coordinates X
android: Offset Y coordinates of the starting position fromYDelta
android: toYDelta end offset position coordinates Y

See example it, the following code is achieved from left to right movement effect, the starting position relative to the position of 100%, i.e., the left control, the control itself consistent with the width position of the control itself; the end position relative to the parent 100% of the position controls, i.e., the parent will be out of the right edge position control.

<!-- res/anim/move_left_to_right.xml -->
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXDelta="-100%"
    android:fromYDelta="0"
    android:toXDelta="100%p"
    android:toYDelta="0" />

<Translate> tags corresponding to the class TranslateAnimation, the parent class is Animation, code added to the View is as follows:

TranslateAnimation moveAnimation = (TranslateAnimation) AnimationUtils.loadAnimation(this, R.anim.move_left_to_right);
view.startAnimation(moveAnimation);

<rotate>

<Rotate> can effect rotation animation, the main attributes are as follows:

android: duration animation from start to finish sustained length of time, in milliseconds
android: fromDegrees start of the rotation angle
android: toDegrees end of the rotation angle
android: X coordinate of the rotation center point pivotX pure digital representation pixel shift amount with respect to the left edge of the View itself; expressed in percentage relative offset of the left edge of the View itself belt "%" suffix; with "% P" suffix when expressed as a percentage relative to the parent View offset left edge
android: Y coordinate of the rotation center point pivotY pure digital representation pixel shift amount with respect to a top edge of the View itself; expressed in percentage relative offsets of View top edge of the tape itself, "%" suffix; with "% P" suffix when expressed as a percentage relative to the parent offset top edge View

The following sample code rotation angle from 0 to 360, i.e., rotation in a circle, the center point of rotation are set to 50%, that is, the position of the midpoint of the View itself.

<!-- res/anim/rotate_one.xml -->
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%" />

<Rotate> tag corresponding class RotateAnimation, the parent class is Animation, code added to the View is as follows:

RotateAnimation rotateAnimation = (RotateAnimation) AnimationUtils.loadAnimation(this, R.anim.rotate_one);
view.startAnimation(rotateAnimation);

<set>

<Set> tag may be a combination of a plurality of animation into a movie set. For example, want to zoom a picture, while also moving to do, this time it should move and zoom animation animation label combination. Sample code is as follows:

<!-- res/anim/move_and_scale.xml -->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000">
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="200%"
        android:toYDelta="0" />
    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="0%"
        android:pivotY="100%"
        android:toXScale="1.5"
        android:toYScale="1.5" />
</set>

Code to achieve the above animations simultaneously moving to the right also simultaneously amplified. <Set> tag in addition to the animation view may be combined <alpha>, <scale>, <translate>, <rotate> four tags may be nested Other <set> tag. Also <set> tag can be nested tag elements are not only these, the latter will repeat usage labels and other attributes when it comes to animation.

Common Properties

Careful observation is not difficult to find, more than five labels have android: duration property, which is a common property, and in addition to android: duration, there are other common attributes, let's look at what are the common attributes and the corresponding usage :

android: duration animation from start to finish sustained length of time, in milliseconds
android: detachWallpaper run on the wallpaper settings are only valid for a set of window animation background wallpaper (window animation). Is set to true, the animation only run in a window, wallpaper background remains unchanged
android: When fillAfter set to true, the animation after the implementation, View will remain in the final frame of the animation; the default is false; if it is an animation set, set this attribute in the tag is valid
android: When fillBefore set to true, the animation after the implementation, View animation back to the state before the execution, the default is the true
When fillEnabled set to true, android:: android value fillBefore to be effective, otherwise android: fillBefore will be ignored
android: repeatCount set the number of animation repeatedly performed, the default is 0, i.e., will not be repeated; Infinite or may be set to -1, it indicates an infinite repetition
android: repeatMode repeatedly executed animation setting mode can be set to one of two values wherein:
- restart the movie from the starting point is repeatedly executed, the default value for the
- reverse animation in the opposite direction to perform
android: startOffset set length of time, before execution of the animation, in milliseconds; is repeatedly executed, each time the same will wait for some time before execution
android: zAdjustment denotes animated movie content running position in the Z-axis, a value of one of three values:
- normal default content remains constant position in the Z-axis
- top to keep uppermost in Z Zhou
- held in the Z-axis bottom lowermost
android: interpolator set change rate of animation, such as acceleration, deceleration, constant speed, etc., need to specify the Interpolator resource, and then explain in detail later

PS: there is a label android: shareInterpolator ** property is set to true will interpolator can be applied to all child elements

Interpolator

By interpolator to define how the rate of change of the animation, such as acceleration, deceleration, constant speed, etc., each interpolator Interpolator class is a subclass, Android system has achieved various interpolator, also provides the corresponding common resource ID, as follows:

Interpolator class	Resource ID	Description
AccelerateDecelerateInterpolator	@android:anim/accelerate_decelerate_interpolator	In the animation began to change with the slow rate at the end, in the middle when accelerating
AccelerateInterpolator	@android:anim/accelerate_interpolator	The rate of change in the motion starts slow, then began to accelerate
AnticipateInterpolator	@android:anim/anticipate_interpolator	When the animation starts backward then forward throw
AnticipateOvershootInterpolator	@android:anim/anticipate_overshoot_interpolator	When the animation starts backward then forward throw, throwing more than the target value will then return to the last value
BounceInterpolator	@android:anim/bounce_interpolator	At the end of the animation will bounce
Cychleinterpoltor	@android:anim/bounce_interpolator	Animation cycle do periodic motion, along a sinusoidal rate change
DecelerateInterpolator	@android:anim/decelerate_interpolator	Faster rate changes at the beginning of the animation, and then start decelerating
LinearInterpolator	@android:anim/decelerate_interpolator	Animation uniform to play
OvershootInterpolator	@android:anim/overshoot_interpolator	Animation forward throw, throw over the final value will then return

If the system provides more than Interpolator is not in line with your results, you can also customize. Custom two ways, one is inherited by the parent class or subclass Interpolator; the other is through a custom xml file can be changed on the property sheet of the Interpolator. Since defined xml file should be stored at res / anim / directory, the root tag table corresponding Nine follows:

<AccelerateDecelerateInterpolator> animation start and end of changing the slower the rate of acceleration in the middle of the time. No property to change settings, so the effect is the same, and system settings provided
<AccelerateInterpolator> at the start of the animation rate changes more slowly, and then began to accelerate. There may be provided a property accelerated rate
- android: factor floating point value, the acceleration rate, the default is 1
<AnticipateInterpolator> when the animation starts backward then forward cast. There is provided a pull-back property values
- android: tension floating-point value, pull back, the default is 2, when set to 0, there will not be backward animation
<AnticipateOvershootInterpolator> when the animation starts backward then forward throw, throwing more than the target value will then return to the final value. Two properties can be provided
- android: tension floating-point value, pull back, the default is 2, when set to 0, there will not be backward animation
- android: extraTension floating point value, multiple tension, the default is 1.5 (1.5 * 2), when set to 0, there will be no tension of the
At the end of the animation <bounceInterpolator> will bounce. No property to change the settings
<CycleInterpolator> do animation loop periodic motion, along a sinusoidal rate changes. There are a number of repetitions of property
- android: cycles integer value, the number of cycles, default 1
<DecelerateInterpolator> at the beginning of the animation faster rate change, then starts to decelerate. There is a property set rate of deceleration
- android: factor floating point value, the rate of deceleration, the default is 1
<LinearInterpolator> Animation uniform playing. No property to change the settings
<OvershootInterpolator> Animation forward throw, throw will exceed last value, and back again. There is a property
- android: tension floating-point values, beyond the end of the rally after the default of 2

Specific use, it will give an example, define a xml file interpolator, the code is as follows:

<!-- res/anim/my_interpolator.xml -->
<?xml version="1.0" encoding="utf-8"?>
<anticipateOvershootInterpolator 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:tension="3"
    android:extraTension="2" />

Next, it is set to be applied to the animation android: interpolator attribute can, as follows:

<!-- res/anim/rotate_one.xml -->
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:interpolator="@anim/my_interpolator" />

Written in the last

View animation application mainly on these, relatively simple, of course, has its limitations. For example, it can only be applied View, can only do gradual, zoom, rotate and move, as well as combinations of these animations. Next again to explain the detailed properties of the animation, the animation properties can easily do many view the animation can not do, such as flip images.

Transfer: Keegan small steel http://keeganlee.me/post/android/20151003