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

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 <? Xml version = "1.0" encoding = "UTF-8"?> <ScrollView xmlns: android = "http://schemas.android.com/apk/res/android" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" > <LinearLayout Android: orientation = "vertical" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" > <Button Android: text = "alpha" Android: id = "@ + id/Button01" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content"> </Button> <ImageView Android: id = "@ + id/iv1" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: src = "@ drawable/icon" > </ImageView> <Button Android: text = "scale" Android: id = "@ + id/Button02" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content"> </Button> <Imageview Android: Id = "@ + ID/iv2" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: src = "@ drawable/icon" > </Imageview> <Button Android: text = "rotate" Android: id = "@ + id/Button03" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content"> </Button> <ImageView Android: id = "@ + id/iv3" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: src = "@ drawable/icon" > </ImageView> <Button Android: text = "transf" Android: id = "@ + id/Button04" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content"> </Button> <ImageView Android: id = "@ + id/iv4" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: src = "@ drawable/icon" > </Imageview> <Button Android: text = "complex" Android: Id = "@ + ID/button05" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content"> </Button> <ImageView Android: id = "@ + id/iv5" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: src = "@ drawable/icon" > </Imageview> </Linearlayout> </Scrollview> Copy code Java code Package cn.edu. heut. ZCL; Import Android. App. activity; Import Android. OS. Bundle; Import Android. View. view; Import Android. View. View. onclicklistener; Import Android. View. animation. alphaanimation; Import Android. View. animation. animation; Import Android. View. animation. animationset; Import Android. View. animation. rotateanimation; Import Android. View. animation. scaleanimation; Import Android. View. animation. translateanimation; Import Android. widget. Button; Import Android. widget. imagebutton; Import Android. widget. imageview; Public class demoactivity extends activity implements onclicklistener { /** Called when the activity is first created .*/ Button alphabut; Button scalebut; Button rotatebut; Button transfbut; Button complexbut; Imageview iv1; Imageview iv2; ImageView iv3; ImageView iv4; ImageView iv5; AnimationSet; @ Override Public void onCreate (Bundle savedInstanceState ){ Super. onCreate (savedInstanceState ); SetContentView (R. layout. main ); AlphaBut = (Button) findViewById (R. id. Button01 ); ScaleBut = (Button) findViewById (R. id. Button02 ); RotateBut = (Button) findViewById (R. id. Button03 ); TransfBut = (Button) findViewById (R. id. Button04 ); ComplexBut = (Button) findViewById (R. id. Button05 ); AlphaBut. setOnClickListener (this ); ScaleBut. setOnClickListener (this ); RotateBut. setOnClickListener (this ); TransfBut. setOnClickListener (this ); ComplexBut. setOnClickListener (this ); Iv1 = (ImageView) findViewById (R. id. iv1 ); Iv2 = (ImageView) findViewById (R. id. iv2 ); Iv3 = (ImageView) findViewById (R. id. iv3 ); Iv4 = (imageview) findviewbyid (R. Id. iv4 ); Iv5 = (imageview) findviewbyid (R. Id. iv5 ); } @ Override Public void onclick (view v ){ Button B = (button) V; Switch (B. GETID ()){ Case R. Id. button01: // alpha Alphaanimation (); Break; Case R. id. Button02: // scale ScaleAnimation (); Break; Case R. id. Button03: // rotate RotateAnimation (); Break; Case R. id. Button04: // transf TransfAnimation (); Break; Case R. Id. button05: // Complex Complexanimation (); Break; } } /** * Example */ Private void complexanimation (){ As = new animationset (true); // 1. instantiate the animationset Translateanimation TA = new translateanimation (animation. relative_to_parent, 0, animation. Parent, 0.5f, animation. Parent, 0, animation. relative_to_parent, 0 ); Ta. setduration (5000); // sets the animation time. Alphaanimation AA = new alphaanimation (1, 0.3f); // 2. Create the expected Animation AA. setduration (3000 ); As. addanimation (TA); // 3. Add animation to the animationset As. addanimation (AA); // 3. Add animation to the animationset As. setFillAfter (true); // final stop ComplexBut. startAnimation (as); // 4. Start the animation Iv5.startAnimation (as); // start the animation } /** * Translation */ Private void transfAnimation (){ As = new AnimationSet (true); // 1. instantiate the AnimationSet Translateanimation AA = new translateanimation (animation. relative_to_parent, 0, animation. relative_to_parent, 1, animation. Parent, 0, animation. relative_to_parent, 1 ); AA. setduration (5000); // sets the animation time. As. addanimation (AA); // 3. Add animation to the animationset Transfbut. startanimation (AS); // 4. Start the animation Iv4.startanimation (AS); // start the animation } /** * Rotate */ Private void rotateanimation (){ As = new AnimationSet (true); // 1. instantiate the AnimationSet RotateAnimation aa = new RotateAnimation (0,270, Animation. RELATIVE_TO_PARENT, 0.2f, Animation. RELATIVE_TO_PARENT, 0.2f ); Aa. setDuration (5000); // sets the animation time. As. addAnimation (aa); // 3. Add animation to the AnimationSet RotateBut. startAnimation (as); // 4. Start the animation Iv3.startAnimation (as); // start the animation } /** * Change size */ Private void scaleAnimation (){ As = new AnimationSet (true); // 1. instantiate the AnimationSet // ScaleAnimation aa = new ScaleAnimation (1, 2, 1, 2); // 2. Create the expected animation. This constructor uses itself as the token. ScaleAnimation aa = new ScaleAnimation (0, 1, 0, 1, Animation. RELATIVE_TO_PARENT, 0.5f, Animation. RELATIVE_TO_PARENT, 0.5f ); Aa. setDuration (7000); // sets the animation time. As. addAnimation (aa); // 3. Add animation to the AnimationSet ScaleBut. startAnimation (as); // 4. Start the animation Iv2.startAnimation (as); // start the animation } /** * Transparency gradient */ Private void alphaAnimation (){ As = new AnimationSet (true); // 1. instantiate the AnimationSet AlphaAnimation aa = new AlphaAnimation (1, 0); // 2. Create the expected animation Aa. setDuration (2000); // sets the animation time. As. addAnimation (aa); // 3. Add animation to the AnimationSet AlphaBut. startAnimation (as); // 4. Start the animation Iv1.startAnimation (as); // start the animation } } Copy code