Android Animation: tween animation (gradient, scaling, displacement, rotation)

The Android platform provides two types of animations. One is tween animation, which is used to continuously change the images of objects in the scene to produce the animation effect (rotation, translation, contraction, and gradient ).

The second type is Frame Animation, that is, sequential playback of prepared images, similar to gif images.

 

Next, let's talk about tweene animations.

 

Main categories:

 

Animation

Alphaanimation gradient transparency

Rotateanimation image rotation

Scaleanimation gradient Scaling

Translateanimation location Movement

Animation set

 

 

With these classes, how can we achieve the animation effect?

 

Taking a custom view as an example, this view is very simple and there is only one image on the screen. Now we need to implement various tween animation effects for the entire view.

 

Alphaanimation

 

Use the code to implement alphaanimation as follows:

// Initialize <br/> animation alphaanimation = new alphaanimation (0.1f, 1.0f); <br/> // set the animation time alphaanimation. setduration( 3000); <br/> This. startanimation (alphaanimation ); 

The first parameter fromalpha in the alphaanimation class indicates the transparency at the animation start, and the second parameter toalpha indicates the transparency at the animation end.

Setduration is used to set the animation duration.

 

Rotateanimation

Code:

Animation rotateanimation = new rotateanimation (0f, 360f); <br/> rotateanimation. setduration (1000); <br/> This. startanimation (rotateanimation ); 

The first parameter fromdegrees in the rotateanimation class indicates the angle of the animation starting from, and the second parameter todegrees indicates the angle of the animation ending.

In addition, you can also set the scaling modes such as pivotxtype and pivotytype. The starting positions of the scaling animation, such as pivotxvalue and pivotyvalue, are relative to X and Y coordinates.

 

Scaleanimation

Code:

// Initialize <br/> animation scaleanimation = new scaleanimation (0.1f, 1.0f, 0.1f, 1.0f); <br/> // set the animation time <br/> scaleanimation. setduration( 500); <br/> This. startanimation (scaleanimation ); 

In the scaleanimation class

The first parameter fromx and the second parameter tox are the scaling sizes on the X coordinate at the start and end of the animation respectively.

The third parameter fromy and the fourth parameter toy are the scaling dimensions on the Y coordinate at the start and end of the animation respectively.

In addition, you can also set the scaling modes such as pivotxtype and pivotytype. The starting positions of the scaling animation, such as pivotxvalue and pivotyvalue, are relative to X and Y coordinates.

 

Translateanimation

Code:

// Initialize <br/> animation translateanimation = new translateanimation (0.1f, 1001_f, 0.1f, 1001_f); <br/> // set the animation time to translateanimation. setduration( 1000); <br/> This. startanimation (translateanimation ); 

Translateanimation class

 

The first parameter fromxdelta and the second parameter toxdelta are the X coordinates at the animation start and end.

The third parameter fromydelta and the fourth parameter toydelta are the Y coordinates at the animation start and end.

 

Parameter Details:

Table 2
XML Node		Function Description
Alpha		Gradient transparency animation effect
<Alpha Android: fromalpha = "0.1 ″ Android: toalpha = "1.0 ″ Android: Duration = "3000"/>
Fromalpha	Transparency when attribute is animation start	0.0 indicates completely transparent 1.0 indicates completely opaque The above value is a float data type number between 0.0 and 1.0.
Toalpha	The property is the transparency when the animation ends.

Table 3
Scale		Gradient scaling animation effect
<Scale Android: interpolator = "@ Android: anim/accelerate_decelerate_interpolator" Android: fromxscale = "0.0 ″ Android: toxscale = "1.4 ″ Android: fromyscale = "0.0 ″ Android: toyscale = "1.4 ″ Android: Required Tx = "50%" Android: Required ty = "50%" Android: fillafter = "false" Android: startoffset = "700" Android: Duration = "700 ″ Android: repeatcount = "10"/>
Fromxscale [float] fromyscale [float]	It is the scaling size on the X and Y coordinates when the animation starts.		0.0 indicates shrinking to none 1.0 indicates normal scaling-free A value smaller than 1.0 indicates contraction. Value greater than 1.0 indicates Amplification
Toxscale [float] Toyscale [float]	It is the scaling size on the X and Y coordinates when the animation ends.
Pivotx [float] Ty [float]	It is the starting position of the animation relative to the X and Y coordinates of the object.		Attribute value description: from 0%-100%, 50% is the midpoint position on the X or Y coordinate of the object.

Table 4
Translate		Animation Effect
<Translate Android: fromxdelta = "30 ″ Android: toxdelta = "-80 ″ Android: fromydelta = "30 ″ Android: toydelta = "300 ″ Android: Duration = "2000"/>
Fromxdelta Toxdelta	It is the position on the X coordinate at the animation end and start.
Fromydelta Toydelta	It is the position on the Y coordinate of the animation and the start point of the animation.

Table 5
Rotate			Animation effects of screen transfer and Rotation
<Rotate Android: interpolator = "@ Android: anim/accelerate_decelerate_interpolator" Android: fromdegrees = "0 ″ Android: todegrees = "+ 350 ″ Android: Required Tx = "50%" Android: Required ty = "50%" Android: Duration = "3000"/>
Fromdegrees	It is the angle of the object when the animation starts.	Description If the angle is negative, it indicates clockwise rotation. If the angle is positive, it indicates clockwise rotation. (Negative from -- to positive: clockwise rotation) (Negative from -- to negative: counter-clockwise rotation) (Positive from -- to positive: clockwise rotation) (Positive from -- to negative: clockwise rotation)
Todegrees	The Rotation Angle of an object can be greater than 360 degrees when the animation ends.
Pivotx Ty	It is the starting position of the animation relative to the X and Y coordinates of the object.	Note: The preceding two attribute values are from 0% to 100%. 50% indicates the point position on the X or Y coordinate of the object.

 

All of the above uses an animation separately. How can we make multiple animations take effect at the same time?

The answer is animationset.

When I first looked at the entire class name, I thought it was only used to store a set of animation. I found that this class also inherits from animation.

 

Next we will implement an animation, which will make the image move, while the image transparency gradient, directly look at the code.

// Initialize the translate animation <br/> translateanimation = new translateanimation (0.1f, 1001_f, 0.1f, 1001_f ); <br/> // initialize the Alpha animation <br/> alphaanimation = new alphaanimation (0.1f, 1.0f ); </P> <p> // animation set <br/> animationset set = new animationset (true); <br/> set. addanimation (translateanimation); <br/> set. addanimation (alphaanimation); </P> <p> // set the animation time (for each animation) <br/> set. setduration( 1000); <br/> This. startanimation (SET ); 

 

Is it easy?

 

 

Attach the code of the entire view class.

Package COM. yfz. view; <br/> Import COM. yfz. r; <br/> Import android. content. context; <br/> Import android. graphics. canvas; <br/> Import android. graphics. drawable. bitmapdrawable; <br/> Import android. util. log; <br/> Import android. view. keyevent; <br/> Import android. view. view; <br/> Import android. view. animation. alphaanimation; <br/> Import android. view. animation. animation; <br/> Import android. view. animation. animationset; <br/> Import android. view. animation. rotateanimation; <br/> Import android. view. animation. scaleanimation; <br/> Import android. view. animation. translateanimation; <br/> public class tweenanim extends view {</P> <p> // Alpha animation-gradient transparency <br/> private animation alphaanimation = NULL; </P> <p> // sacle animation-gradient scaling <br/> private animation scaleanimation = NULL; </P> <p> // translate animation-position movement <br/> private animation translateanimation = NULL; </P> <p> // rotate animation-screen rotation <br/> private animation rotateanimation = NULL; </P> <p> Public tweenanim (context) {<br/> super (context); <br/>}< br/> @ override <br/> protected void ondraw (canvas) {<br/> super. ondraw (canvas); <br/> log. E ("Tween", "ondraw"); <br/> // load an image <br/> canvas. drawbitmap (bitmapdrawable) getresources (). getdrawable (R. drawable. gallery_photo_5 )). getbitmap (), 0, 0, null); <br/>}< br/> @ override <br/> Public Boolean onkeydown (INT keycode, keyevent event) {<br/> log. E ("Tween", "onkeydown"); <br/> return true; <br/>}< br/> @ override <br/> Public Boolean onkeyup (INT keycode, keyevent event) {<br/> log. E ("Tween", "onkeydown"); <br/> switch (keycode) {<br/> case keyevent. keycode_dpad_up: <br/> log. E ("Tween", "onkeydown-keycode_dpad_up"); <br/> alphaanimation = new alphaanimation (0.1f, 1.0f ); <br/> // set the animation time <br/> alphaanimation. setduration( 3000); <br/> This. startanimation (alphaanimation); <br/> break; <br/> case keyevent. keycode_dpad_down: <br/> log. E ("Tween", "onkeydown-keycode_dpad_down"); <br/> rotateanimation = new rotateanimation (0f, 360f); <br/> rotateanimation. setduration( 1000); <br/> This. startanimation (rotateanimation); <br/> break; <br/> case keyevent. keycode_dpad_left: <br/> log. E ("Tween", "onkeydown-keycode_dpad_left"); <br/> // initialization <br/> scaleanimation = new scaleanimation (0.1f, 1.0f, 0.1f, 1.0f ); <br/> // set the animation time <br/> scaleanimation. setduration( 500); <br/> This. startanimation (scaleanimation); <br/> break; <br/> case keyevent. keycode_dpad_right: <br/> log. E ("Tween", "onkeydown-keycode_dpad_right"); <br/> // initialization <br/> translateanimation = new translateanimation (0.1f, 1001_f, 0.1f, 1001_f ); <br/> // set the animation time <br/> translateanimation. setduration (1000); </P> <p> This. startanimation (translateanimation); <br/> break; <br/> case keyevent. keycode_dpad_center: <br/> log. E ("Tween", "onkeydown-keycode_dpad_center"); <br/> // initialize the translate animation <br/> translateanimation = new translateanimation (0.1f, 1001_f, 0.1f, 1001_f ); <br/> // initialize the Alpha animation <br/> alphaanimation = new alphaanimation (0.1f, 1.0f ); </P> <p> // animation set <br/> animationset set = new animationset (true); <br/> set. addanimation (translateanimation); <br/> set. addanimation (alphaanimation); </P> <p> // set the animation time (for each animation) <br/> set. setduration( 1000); <br/> This. startanimation (SET); <br/> break; <br/> default: <br/> break; <br/>}< br/> return true; <br/>}</P> <p >}< br/> 

 

When calling this class in the activity, you must pay attention to setfocusable (true). Otherwise, the onkeyup method will not take effect if the focus is on the activity.

Code for calling this view:

Tweenanim anim = new tweenanim (lesson_11.this); <br/> anim. setfocusable (true); <br/> setcontentview (anim ); 

 

 

 

 

The above uses Java code to implement different tween animations in 4. In fact, in Android, animation can be fully implemented through XML files. This method may be simpler, clearer, and more conducive to reuse.

The following describes how to use XML to implement these animations.

 

FirstAlphaanimation.

Alpha_anim.xml:

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <set xmlns: Android = "http://schemas.android.com/apk/res/android"> <br/> <Alpha <br/> Android: fromalpha = "0.1" <br/> Android: toalpha = "1.0" <br/> Android: Duration = "2000" <br/> </set> <br/> 

 

No need to explain it.

 

Rotateanimation

Rotate_anim.xml:

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <set xmlns: Android = "http://schemas.android.com/apk/res/android"> <br/> <rotate <br/> Android: interpolator = "@ Android: anim/accelerate_decelerate_interpolator "<br/> Android: fromdegrees =" 0 "<br/> Android: todegrees =" 360 "<br/> Android: required Tx = "50%" <br/> Android: Required ty = "50%" <br/> Android: duration = "500" <br/> </set> <br/> 

 

 

Scaleanimation

Scale_anim.xml:

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <set xmlns: Android = "http://schemas.android.com/apk/res/android"> <br/> <scale <br/> Android: interpolator = "@ Android: anim/accelerate_decelerate_interpolator "<br/> Android: fromxscale =" 0.0 "<br/> Android: toxscale =" 1.0 "<br/> Android: fromyscale = "0.0" <br/> Android: toyscale = "1.0" <br/> Android: Export Tx = "50%" <br/> Android: ty = "50%" <br/> Android: fillafter = "false" <br/> Android: duration = "500" <br/> </set> 

 

Translateanimation

Translate_anim.xml:

 

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <set xmlns: Android = "http://schemas.android.com/apk/res/android"> <br/> <translate <br/> Android: fromxdelta = "10" <br/> Android: toxdelta = "100" <br/> Android: fromydelta = "10" <br/> Android: toydelta = "100" <br/> </set> <br/> 

 

All layout files have been written. How can I use these files?

 

In fact, it is also very simple. At this time, you need to use the animationutils class. Use the loadanimation method in this class to load these layout files.

For example:

Rotateanimation = animationutils. loadanimation (this. getcontext (), R. anim. rotate_anim ); 

 

The View class code is as follows:

Package COM. yfz. view; <br/> Import COM. yfz. r; <br/> Import android. content. context; <br/> Import android. graphics. canvas; <br/> Import android. graphics. drawable. bitmapdrawable; <br/> Import android. util. log; <br/> Import android. view. keyevent; <br/> Import android. view. view; <br/> Import android. view. animation. alphaanimation; <br/> Import android. view. animation. animation; <br/> Import android. view. animation. animationset; <br/> Import android. view. animation. animationutils; <br/> Import android. view. animation. rotateanimation; <br/> Import android. view. animation. scaleanimation; <br/> Import android. view. animation. translateanimation; <br/> public class tweenanim2 extends view {</P> <p> // Alpha animation-gradient transparency <br/> private animation alphaanimation = NULL; </P> <p> // sacle animation-gradient scaling <br/> private animation scaleanimation = NULL; </P> <p> // translate animation-position movement <br/> private animation translateanimation = NULL; </P> <p> // rotate animation-screen rotation <br/> private animation rotateanimation = NULL; </P> <p> Public tweenanim2 (context) {<br/> super (context); <br/>}< br/> @ override <br/> protected void ondraw (canvas) {<br/> super. ondraw (canvas); <br/> log. E ("Tween", "ondraw"); <br/> // load an image <br/> canvas. drawbitmap (bitmapdrawable) getresources (). getdrawable (R. drawable. gallery_photo_5 )). getbitmap (), 0, 0, null); <br/>}< br/> @ override <br/> Public Boolean onkeydown (INT keycode, keyevent event) {<br/> log. E ("Tween", "onkeydown"); <br/> return true; <br/>}< br/> @ override <br/> Public Boolean onkeyup (INT keycode, keyevent event) {<br/> log. E ("Tween", "onkeydown"); <br/> switch (keycode) {<br/> case keyevent. keycode_dpad_up: <br/> log. E ("Tween", "onkeydown-keycode_dpad_up"); </P> <p> alphaanimation = animationutils. loadanimation (this. getcontext (), R. anim. alpha_anim); </P> <p> This. startanimation (alphaanimation); <br/> break; <br/> case keyevent. keycode_dpad_down: <br/> log. E ("Tween", "onkeydown-keycode_dpad_down"); </P> <p> rotateanimation = animationutils. loadanimation (this. getcontext (), R. anim. rotate_anim); </P> <p> This. startanimation (rotateanimation); <br/> break; <br/> case keyevent. keycode_dpad_left: <br/> log. E ("Tween", "onkeydown-keycode_dpad_left"); </P> <p> scaleanimation = animationutils. loadanimation (this. getcontext (), R. anim. scale_anim); </P> <p> This. startanimation (scaleanimation); <br/> break; <br/> case keyevent. keycode_dpad_right: <br/> log. E ("Tween", "onkeydown-keycode_dpad_right"); </P> <p> translateanimation = animationutils. loadanimation (this. getcontext (), R. anim. translate_anim); </P> <p> This. startanimation (translateanimation); <br/> break; <br/> case keyevent. keycode_dpad_center: <br/> log. E ("Tween", "onkeydown-keycode_dpad_center"); <br/> // initialize the translate animation <br/> translateanimation = animationutils. loadanimation (this. getcontext (), R. anim. translate_anim); </P> <p> // initialize the Alpha animation <br/> alphaanimation = animationutils. loadanimation (this. getcontext (), R. anim. alpha_anim); </P> <p> // animation set <br/> animationset set = new animationset (true); <br/> set. addanimation (translateanimation); <br/> set. addanimation (alphaanimation); </P> <p> // set the animation time (for each animation) <br/> set. setduration( 1000); <br/> This. startanimation (SET); <br/> break; <br/> default: <br/> break; <br/>}< br/> return true; <br/>}</P> <p >}< br/> 

 

Okay, so much this time.

 

Reference: http://www.moandroid.com /? P = 790