Android animation effect Tween Animation (tween animation) (i)

Objective:

Recent company projects in the next version of the iteration of the design of a lot of animation, in the development of previous projects will often use animation, so before the next iteration of the company to start, the time to summarize the Android animation. Today mainly summarizes tween Animation (tweened animation).

Tween Animation (Motion Tweens):

Tween animations are animated by a series of graphic transformations (including panning, zooming, rotating, and changing the transparency) of the view's contents. Animation effects can be defined in XML or encoded.

Type of animation	How XML is configured	How Java code is implemented
Gradient Transparency Animation effect	<alpha/>	Alphaanimation
Gradient Size Zoom animation effect	<scale/>	Scaleanimation
Picture Rotation animation effect	<rotate/>	Rotateanimation
Picture Position move Animation effect	<translate/>	Translateanimation
Combining animation effects	<set/>	Animationset

How to achieve: 1.) Alpha Gradient Transparency animation effect

XML mode:

<? XML version= "1.0" encoding= "Utf-8" ?> <  xmlns:android= "http://schemas.android.com/apk/res/android"    android:duration  ="    android:fillafter"= "false"    android:fromalpha = "1.0"     android:toalpha= "0.0"/>

Fromalpha: Transparency at start
Toalpha: End-of-time transparency
Duration: Duration of animation
Fillafter: Sets the current position after the animation finishes

XML mode loading is obtained by animationutils.loadanimation (this, r.anim.anim_alpha) animation

  Animation alphaanimation = animationutils.loadanimation (this, r.anim.anim_alpha);  Imageview.startanimation (alphaanimation);

Java Code mode:

  New Alphaanimation (1.0f, 0.0f);  Alphaanimation.setduration (500); // set the animation duration to 500 milliseconds  Alphaanimation.setfillafter (false); // sets the current position at the end of the animation (that is, does not return to the position before the animation starts)  Imageview.startanimation (alphaanimation);

2.) Scale gradient size zoom animation effect

XML mode:

<?XML version= "1.0" encoding= "Utf-8"?>< Scalexmlns:android= "Http://schemas.android.com/apk/res/android"android:duration= "$"Android:fromxscale= "0.0"Android:fromyscale= "0.0"Android:interpolator= "@android: Anim/decelerate_interpolator"Android:pivotx= "50%"Android:pivoty= "50%"Android:repeatcount= "1"Android:repeatmode= "Reverse"Android:startoffset= "0"Android:toxscale= "1.5"Android:toyscale= "1.5" />

Fromxdelta,fromydelta at the beginning of the x, y coordinates, the lower right corner of the screen is the coordinates x:320,y:480
Toxdelta, Toydelta x, y coordinates at the end of the animation
Interpolator Specifying an animation insert
Fromxscale,fromyscale, the scale of X, y before the start of the animation, 0.0 for not showing, 1.0 for normal size
Toxscale,toyscale, the multiple of the final zoom of the animation, 1.0 for normal size, greater than 1.0 magnification
Pivotx, Pivoty animation start position, relative to the screen percentage, two are 50% means the animation starts from the middle of the screen
Startoffset, the interval of time that the animation executes more than once, which pauses the time before execution, in milliseconds
Duration, the time the animation effect consumes, in milliseconds, the smaller the value, the faster the animation
RepeatCount, animation repeats the count, the animation will execute that value + 1 times
Repeatmode, the animation repeats the pattern, the reverse is reversed, and when the first even executes, the animation is in the opposite direction. Restart for re-execution, direction unchanged

Java mode:

Animation scaleanimation =NewScaleanimation (0.0f, 1.5f, 0.0f, 1.5f, Animation.relative_to_self, 0.5f, Animation.relative_to_self, 0.5f); Scaleanimation.setduration (500);//set the animation duration to 500 millisecondsScaleanimation.setfillafter (true);//if the value of Fillafter is true, the control stays at the end of execution after the animation is executedScaleanimation.setfillbefore (false);//if the value of Fillbefore is true, the control returns to the state before the animation executes after the animation is executedScaleanimation.setrepeatcount (3);//set the number of animation loopsScaleanimation.setrepeatmode (Animation.reverse); Scaleanimation.setstartoffset (0); Scaleanimation.setinterpolator ( ThisAndroid. R.anim.decelerate_interpolator);//set up an animation insertion deviceImageview.startanimation (scaleanimation);

3.) Rotate screen rotation animation effect

XML mode:

<?XML version= "1.0" encoding= "Utf-8"?><Rotatexmlns:android= "Http://schemas.android.com/apk/res/android"android:duration= "$"android:fromdegrees= "0"Android:interpolator= "@android: Anim/accelerate_decelerate_interpolator"Android:pivotx= "50%"Android:pivoty= "50%"android:todegrees= " -360" />

Fromdegrees the angle at which the animation starts
Todegrees the rotation angle of the object at the end of the animation, which means clockwise
The Pivotx property is the start position of the animation relative to the X coordinate of the object
The Pivoty property is the start position of the animation relative to the y-coordinate of the object

Java mode:

New Rotateanimation (0, Animation.relative_to_self, 0.5f, animation.relative_to_self, 0.5f); Rotateanimation.setduration (+); Rotateanimation.setfillafter (true); Rotateanimation.setinterpolator (this, Android. R.anim.accelerate_decelerate_interpolator); // Set the animation insert imageview.startanimation (rotateanimation);

4.) Translate picture position move animation effect

XML mode:

<?XML version= "1.0" encoding= "Utf-8"?><Translatexmlns:android= "Http://schemas.android.com/apk/res/android"android:duration= "$"Android:fromxdelta= "+"Android:fromydelta= "0"Android:interpolator= "@android: Anim/cycle_interpolator"Android:toxdelta= "0"Android:toydelta= "0" />

Fromxdelta,fromydelta at the beginning of the x, y coordinates, the lower right corner of the screen is the coordinates x:320,y:480
Toxdelta, Toydelta x, y coordinates at the end of the animation

java mode :

New Translateanimation (0, 0, 0); translateanimation.setduration (+); Translateanimation.setinterpolator (this, Android. R.anim.cycle_interpolator); // Sets the animation insert Translateanimation.setfillafter (true); // sets the current position at the end of the animation (that is, not returning to the position before the animation starts)imageview.startanimation (translateanimation);

5.) Set Combination animation effect

XML mode:

<?XML version= "1.0" encoding= "Utf-8"?><Setxmlns:android= "Http://schemas.android.com/apk/res/android">    <Alphaandroid:duration= "$"Android:fromalpha= "1.0"Android:toalpha= "0.0" />    < Scaleandroid:duration= "$"Android:fromxscale= "0.0"Android:fromyscale= "0.0"Android:interpolator= "@android: Anim/decelerate_interpolator"Android:pivotx= "50%"Android:pivoty= "50%"Android:repeatcount= "1"Android:repeatmode= "Reverse"Android:startoffset= "0"Android:toxscale= "1.5"Android:toyscale= "1.5" /></Set>

How to use

   Animationset Animationset = (animationset) animationutils.loadanimation (this, r.anim.anim_set);   Imageview.startanimation (animationset);

Java mode

Animationset Animationset =NewAnimationset (true); Animation alphaanimation=NewAlphaanimation (1.0f, 0.1f); Alphaanimation.setduration (500);//set the animation duration to 500 millisecondsAnimation scaleanimation=NewScaleanimation (0.0f, 1.5f, 0.0f, 1.5f, Animation.relative_to_self, 0.5f, Animation.relative_to_self, 0.5f); Scaleanimation.setduration (500);//set the animation duration to 500 millisecondsScaleanimation.setrepeatmode (Animation.reverse); Scaleanimation.setstartoffset (0); Scaleanimation.setinterpolator ( ThisAndroid. R.anim.decelerate_interpolator);//set up an animation insertion deviceanimationset.addanimation (alphaanimation); animationset.addanimation (scaleanimation); Imageview.startanimation (animationset);

Several self-brought animation inserts

Accelerateinterpolator acceleration, slow intermediate acceleration at start

Decelerateinterpolator slow down, start fast and slow down.

Acceleratedecelerateinterolator acceleration and deceleration, slow start, middle acceleration

Anticipateinterpolator reverse, first change to the opposite direction and then accelerate the playback

Anticipateovershootinterpolator Reverse Plus, first change in the opposite direction, and then accelerate playback, will exceed the target value and then move slowly to the destination value

Bounceinterpolator jump, fast to the destination value will jump, such as the destination value of 100, followed by the value may be 85,77,70,80,90,100

Cycleiinterpolator cycle, animation cycle a certain number of times, the value is changed to a sine function: Math.sin (mcycles* math.pi* input)

Linearinterpolator linear, linear uniform change

Overshottinterpolator beyond, and then slowly change to the destination value

Here are some examples of concrete effects:

Android animation effect Tween Animation (tween animation) (i)