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)