Android Animation: one of the essentials to read: Tweened Animations code implementation

Source: Internet
Author: User

Android provides two Animation mechanisms: SurfaceView, which can be used to draw a frame at a time, or Animation.

Animations category

Animations has two mechanisms: Tweened Animations and Frame-by-FrameAnimations.

Tweened is similar to flash, and implements animation effects through rotation, movement, scaling, etc. Frame-by-FrameAnimations is similar to a movie, and implements animation effects by changing the display of each Frame.

In fact, Animation is to write down the actions that the object will take, such as translation and deformation. Which View or View subclass do you need to complete these predefined actions? You only need to add them. This part of content is quite a lot, but it is relatively simple. This section only introduces Tweened Animations.

Tweened Animations

As shown in 1, Tweened Animations has four ways to implement animation. Android provides a class for each method. [Url =] AlphaAnimation [/url], [url =] AnimationSet [/url], [url =] RotateAnimation [/url], [url =] ScaleAnimation [/url], [url =] TranslateAnimation [/url].

12:35:17 upload

Download Attachment
(6.66 KB)

Figure 1 Tweened Animations Animation

For each type, I will give an example to explain in detail. From Simplicity to difficulty, we will first introduce Alpha.

Alpha

If you have experience developing opengl, the word 'Alpha 'will not be unfamiliar. That's right, it sets transparency. Let's look at a group of icons first, so that you will have a better understanding of alpha. As shown in figure 2, icons and buttons with changed transparency are implemented.

12:35:13 upload

Download Attachment
(17.33 KB)

Figure 2 color gradient demo

If you want to change the transparency of the view, you need to implement the alpha Animation. The methods are divided into the following four parts:

Q instantiate an AnimationSet object

Q instantiate an Animation object

Q: Set the attributes of an Animation object

Q: add an AnimationSet for the View

The construction method of Animation is as follows:

AlphaAnimation aa = new AlphaAnimation (1, 0); // 2. Create the expected animation

The alpha construction method is relatively simple. The first parameter is the transparency during presentation. 0 is completely transparent, and 1 is not transparent. The second parameter is the transparency at the animation end.

Aa. setDuration (2000); // sets the animation time.

You can set the animation playback time using the above sentence.

The specific code will be provided at the end.

Scale

Scale is scaling. Before learning about Scale, let's take a look at its running effect. 3.

12:35:14 upload

Download Attachment
(30.44 KB)

Figure 3 scale demo

The above is the simplest Construction Method of Scale:

ScaleAnimation aa = new ScaleAnimation (1, 2, 1, 2); // 2. Create the expected animation. This constructor is based on its own

Q 1st parameters are the size of x at the initial time, where 1 is the length of itself, and the same 2 is twice the length of itself, the same below

Q: The 2nd parameters are the size of x when the animation is ended.

Q 3rd parameters are the size of y at the initial time

Q: The 4th parameters are the size of y at the end of the animation.

If you think that you have learned Scale, I can only say that you are just a beginner. The following describes another constructor method, which is more flexible.

ScaleAnimation aa = new ScaleAnimation (0, 1, 0, 1, Animation. RELATIVE_TO_PARENT, 0.5f, Animation. RELATIVE_TO_PARENT, 0.5f );

Q. The four parameters are the same as above and are not explained.

Q The Fifth parameter is to set the pivot. It can be set by itself or by using the parent view, or even by who uses the absolute value. This will be explained later. If you do not understand it, ignore it first.

Q, the sixth parameter is to set the coordinates of the x pivot.

Q The following two parameters are the same as those in the preceding figure. The y coordinate is set.

Maybe the reader won't understand the pivot here, so I will use the above method to construct the Animation and run it to see the effect. See Figure 4.

12:35:15 upload

Download Attachment
(47.83 KB)

Figure 4 scale Demo2

The position of the View control is also changing as the size of the control changes. The following parameters are used to set the initial position. If the parent view is used as the reference and the value is 0.5f, it is the middle of the current parent view.

The reader may ask why it is not the center position of the screen. I think it is determined by the layout file. The current layout file is linearlayout, which is set to add content next time, if the Y coordinate is set to 0.5f, Android considers that you are in the middle of the Y axis at the position where the content is added next to the current layout.

Transfer

If you understand the concept of pivot, transfer translation is very easy, as shown in Figure 5.

12:35:16 upload

Download Attachment
(32.76 KB)

Figure 5 translation demo

The above translation instantiation method is as follows:

Translateanimation AA = new translateanimation (animation. relative_to_parent, 0, animation. relative_to_parent, 1, animation. Parent, 0, animation. relative_to_parent, 1 );

When using APIs, readers believe that it is easier to understand this method. I will not go into details here. If you have any questions, leave a message.

Rotate

Rotating, this is also relatively easy, see the demo, 6.

12:35:16 upload

Download Attachment
(35.43 KB)

Figure 6 rotating demo

The construction method is as follows:

Rotateanimation AA = new rotateanimation (0,270, animation. relative_to_parent, 0.2f, animation. relative_to_parent, 0.2f );

Comprehensive

Animation can be used independently. You can also set multiple animations and add them to the AnimationSet. In calling View, I provide a comprehensive example in the example. You can check whether you understand this knowledge by yourself.

Code

In this section, refer to the AnimationDemo1 example.

Limited by my own level, please correct me if you have any shortcomings.

Java code

  1. <? Xml version = "1.0" encoding = "UTF-8"?>
  2. <ScrollView xmlns: android = "http://schemas.android.com/apk/res/android"
  3. Android: layout_width = "fill_parent"
  4. Android: layout_height = "wrap_content"
  5. >
  6. <LinearLayout
  7. Android: orientation = "vertical"
  8. Android: layout_width = "fill_parent"
  9. Android: layout_height = "fill_parent"
  10. >
  11. <Button
  12. Android: text = "alpha"
  13. Android: id = "@ + id/Button01"
  14. Android: layout_width = "wrap_content"
  15. Android: layout_height = "wrap_content">
  16. </Button>
  17. <ImageView
  18. Android: id = "@ + id/iv1"
  19. Android: layout_width = "wrap_content"
  20. Android: layout_height = "wrap_content"
  21. Android: src = "@ drawable/icon"
  22. >
  23. </ImageView>
  24. <Button
  25. Android: text = "scale"
  26. Android: id = "@ + id/Button02"
  27. Android: layout_width = "wrap_content"
  28. Android: layout_height = "wrap_content">
  29. </Button>
  30. <Imageview
  31. Android: Id = "@ + ID/iv2"
  32. Android: layout_width = "wrap_content"
  33. Android: layout_height = "wrap_content"
  34. Android: src = "@ drawable/icon"
  35. >
  36. </Imageview>
  37. <Button
  38. Android: text = "rotate"
  39. Android: id = "@ + id/Button03"
  40. Android: layout_width = "wrap_content"
  41. Android: layout_height = "wrap_content">
  42. </Button>
  43. <ImageView
  44. Android: id = "@ + id/iv3"
  45. Android: layout_width = "wrap_content"
  46. Android: layout_height = "wrap_content"
  47. Android: src = "@ drawable/icon"
  48. >
  49. </ImageView>
  50. <Button
  51. Android: text = "transf"
  52. Android: id = "@ + id/Button04"
  53. Android: layout_width = "wrap_content"
  54. Android: layout_height = "wrap_content">
  55. </Button>
  56. <ImageView
  57. Android: id = "@ + id/iv4"
  58. Android: layout_width = "wrap_content"
  59. Android: layout_height = "wrap_content"
  60. Android: src = "@ drawable/icon"
  61. >
  62. </Imageview>
  63. <Button
  64. Android: text = "complex"
  65. Android: Id = "@ + ID/button05"
  66. Android: layout_width = "wrap_content"
  67. Android: layout_height = "wrap_content">
  68. </Button>
  69. <ImageView
  70. Android: id = "@ + id/iv5"
  71. Android: layout_width = "wrap_content"
  72. Android: layout_height = "wrap_content"
  73. Android: src = "@ drawable/icon"
  74. >
  75. </Imageview>
  76. </Linearlayout>
  77. </Scrollview>

Copy code

Java code

  1. Package cn.edu. heut. ZCL;
  2. Import Android. App. activity;
  3. Import Android. OS. Bundle;
  4. Import Android. View. view;
  5. Import Android. View. View. onclicklistener;
  6. Import Android. View. animation. alphaanimation;
  7. Import Android. View. animation. animation;
  8. Import Android. View. animation. animationset;
  9. Import Android. View. animation. rotateanimation;
  10. Import Android. View. animation. scaleanimation;
  11. Import Android. View. animation. translateanimation;
  12. Import Android. widget. Button;
  13. Import Android. widget. imagebutton;
  14. Import Android. widget. imageview;
  15. Public class demoactivity extends activity implements onclicklistener {
  16. /** Called when the activity is first created .*/
  17. Button alphabut;
  18. Button scalebut;
  19. Button rotatebut;
  20. Button transfbut;
  21. Button complexbut;
  22. Imageview iv1;
  23. Imageview iv2;
  24. ImageView iv3;
  25. ImageView iv4;
  26. ImageView iv5;
  27. AnimationSet;
  28. @ Override
  29. Public void onCreate (Bundle savedInstanceState ){
  30. Super. onCreate (savedInstanceState );
  31. SetContentView (R. layout. main );
  32. AlphaBut = (Button) findViewById (R. id. Button01 );
  33. ScaleBut = (Button) findViewById (R. id. Button02 );
  34. RotateBut = (Button) findViewById (R. id. Button03 );
  35. TransfBut = (Button) findViewById (R. id. Button04 );
  36. ComplexBut = (Button) findViewById (R. id. Button05 );
  37. AlphaBut. setOnClickListener (this );
  38. ScaleBut. setOnClickListener (this );
  39. RotateBut. setOnClickListener (this );
  40. TransfBut. setOnClickListener (this );
  41. ComplexBut. setOnClickListener (this );
  42. Iv1 = (ImageView) findViewById (R. id. iv1 );
  43. Iv2 = (ImageView) findViewById (R. id. iv2 );
  44. Iv3 = (ImageView) findViewById (R. id. iv3 );
  45. Iv4 = (imageview) findviewbyid (R. Id. iv4 );
  46. Iv5 = (imageview) findviewbyid (R. Id. iv5 );
  47. }
  48. @ Override
  49. Public void onclick (view v ){
  50. Button B = (button) V;
  51. Switch (B. GETID ()){
  52. Case R. Id. button01: // alpha
  53. Alphaanimation ();
  54. Break;
  55. Case R. id. Button02: // scale
  56. ScaleAnimation ();
  57. Break;
  58. Case R. id. Button03: // rotate
  59. RotateAnimation ();
  60. Break;
  61. Case R. id. Button04: // transf
  62. TransfAnimation ();
  63. Break;
  64. Case R. Id. button05: // Complex
  65. Complexanimation ();
  66. Break;
  67. }
  68. }
  69. /**
  70. * Example
  71. */
  72. Private void complexanimation (){
  73. As = new animationset (true); // 1. instantiate the animationset
  74. Translateanimation TA = new translateanimation (animation. relative_to_parent, 0, animation. Parent, 0.5f, animation. Parent, 0, animation. relative_to_parent, 0 );
  75. Ta. setduration (5000); // sets the animation time.
  76. Alphaanimation AA = new alphaanimation (1, 0.3f); // 2. Create the expected Animation
  77. AA. setduration (3000 );
  78. As. addanimation (TA); // 3. Add animation to the animationset
  79. As. addanimation (AA); // 3. Add animation to the animationset
  80. As. setFillAfter (true); // final stop
  81. ComplexBut. startAnimation (as); // 4. Start the animation
  82. Iv5.startAnimation (as); // start the animation
  83. }
  84. /**
  85. * Translation
  86. */
  87. Private void transfAnimation (){
  88. As = new AnimationSet (true); // 1. instantiate the AnimationSet
  89. Translateanimation AA = new translateanimation (animation. relative_to_parent, 0, animation. relative_to_parent, 1, animation. Parent, 0, animation. relative_to_parent, 1 );
  90. AA. setduration (5000); // sets the animation time.
  91. As. addanimation (AA); // 3. Add animation to the animationset
  92. Transfbut. startanimation (AS); // 4. Start the animation
  93. Iv4.startanimation (AS); // start the animation
  94. }
  95. /**
  96. * Rotate
  97. */
  98. Private void rotateanimation (){
  99. As = new AnimationSet (true); // 1. instantiate the AnimationSet
  100. RotateAnimation aa = new RotateAnimation (0,270, Animation. RELATIVE_TO_PARENT, 0.2f, Animation. RELATIVE_TO_PARENT, 0.2f );
  101. Aa. setDuration (5000); // sets the animation time.
  102. As. addAnimation (aa); // 3. Add animation to the AnimationSet
  103. RotateBut. startAnimation (as); // 4. Start the animation
  104. Iv3.startAnimation (as); // start the animation
  105. }
  106. /**
  107. * Change size
  108. */
  109. Private void scaleAnimation (){
  110. As = new AnimationSet (true); // 1. instantiate the AnimationSet
  111. // ScaleAnimation aa = new ScaleAnimation (1, 2, 1, 2); // 2. Create the expected animation. This constructor uses itself as the token.
  112. ScaleAnimation aa = new ScaleAnimation (0, 1, 0, 1, Animation. RELATIVE_TO_PARENT, 0.5f, Animation. RELATIVE_TO_PARENT, 0.5f );
  113. Aa. setDuration (7000); // sets the animation time.
  114. As. addAnimation (aa); // 3. Add animation to the AnimationSet
  115. ScaleBut. startAnimation (as); // 4. Start the animation
  116. Iv2.startAnimation (as); // start the animation
  117. }
  118. /**
  119. * Transparency gradient
  120. */
  121. Private void alphaAnimation (){
  122. As = new AnimationSet (true); // 1. instantiate the AnimationSet
  123. AlphaAnimation aa = new AlphaAnimation (1, 0); // 2. Create the expected animation
  124. Aa. setDuration (2000); // sets the animation time.
  125. As. addAnimation (aa); // 3. Add animation to the AnimationSet
  126. AlphaBut. startAnimation (as); // 4. Start the animation
  127. Iv1.startAnimation (as); // start the animation
  128. }
  129. }

Copy code

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.