Learn Android Animation Together

Posted by ankit17_ag on Wed, 22 May 2019 20:33:55 +0200

In this paper, a simple example is given to illustrate the simple application of animation in Android development for learning to share.

Summary

android provides a variety of powerful apis for applying animations to ui elements to enrich the functionality and application of applications.

Animation Classification

In the Android framework, animation is divided into three main categories [all three animation systems are viable choices, but in general, attribute animation systems are preferred because they are more flexible and provide more functionality], as follows:

  • Frame animation: Play the image resources frame by frame sequentially to form an animation ().
  • Inter-patch animation: Also known as view animation, is an older system that can only be used for view components. It is relatively easy to set up and provide the ability to meet the needs of the program.
  • Attribute animation: The attribute animation system introduced in android 3.0 (api level 11) allows you to animate the attributes of any object, including those not rendered on the screen.The system is extensible and allows you to customize the properties of the animation type.

Frame animation

Use the animation resource file as the background of the picture control (ImageView).

Frame animation involves the following points of knowledge:

  • AnimationDrawable: An object used to create a frame-by-frame animation consisting of a series of draggable objects that can be used as a background for view objects.
  • Is isRunning() running
  • stop() Stop animation
  • start() starts running

Frame Animation Core Code

In the drawable directory, add a new animation resource profile (animation-list node contains item child nodes, item has two attributes, android:drawable=image resource id, android:duration=cycle), as follows:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <animation-list xmlns:android="http://schemas.android.com/apk/res/android">
 3     <item android:drawable="@drawable/n0" android:duration="300"></item>
 4     <item android:drawable="@drawable/n1" android:duration="300"></item>
 5     <item android:drawable="@drawable/n2" android:duration="300"></item>
 6     <item android:drawable="@drawable/n3" android:duration="300"></item>
 7     <item android:drawable="@drawable/n4" android:duration="300"></item>
 8     <item android:drawable="@drawable/n5" android:duration="300"></item>
 9     <item android:drawable="@drawable/n6" android:duration="300"></item>
10     <item android:drawable="@drawable/n7" android:duration="300"></item>
11     <item android:drawable="@drawable/n8" android:duration="300"></item>
12     <item android:drawable="@drawable/n9" android:duration="300"></item>
13 </animation-list>

The java setup code is as follows:

 1 private AnimationDrawable drawable;
 2 
 3     @Override
 4     protected void onCreate(Bundle savedInstanceState) {
 5         super.onCreate(savedInstanceState);
 6         setContentView(R.layout.activity_drawable);
 7         ImageView imageView= (ImageView) this.findViewById(R.id.ivLetter);
 8         drawable= (AnimationDrawable) imageView.getBackground();
 9         drawable.start();
10     }
11 
12     @Override
13     public boolean onTouchEvent(MotionEvent event) {
14         if(event.getAction()==MotionEvent.ACTION_DOWN){
15             if(drawable.isRunning()) {
16                 drawable.stop();
17             }else{
18                 drawable.start();
19             }
20         }
21         return super.onTouchEvent(event);
22     }

Interstitial animation

Inter-complement animation, also known as gradient animation, refers to defining the starting state, ending state, intermediate state, and so on, then other parts are automatically generated by the program to form an animation.

The complementary animation involves the following points of knowledge:

  • TranslateAnimation moves the animation that controls the position of the object.
  • RotateAnimation Rotation Animation Controls the animation of object rotation.This rotation needs to be placed on the xy plane.You can specify the point that the center will use, where (0,0) is the upper left corner.If not specified, (0,0) is the default rotation point.
  • ScaleAnimation Zoom Animation controls the scale of the object's animation.You can specify a point for zooming in and out.
  • AlphaAnimation Transparency Animation controls an object's alpha-level animation, which is a useful way to fade in and out of an object by changing its transparency properties.
  • AnimationSet Animation Collection These animations can be combined.
  • setFillAfter(true); sets the fill after the animation ends
  • setDuration(2000); animation cycle
    • setRepeatCount(2); number of repetitions
  • setRepeatMode(Animation.REVERSE); repeat mode

The core code for interpolation animation is as follows:

 1   /**
 2      * translation
 3      * @param v
 4      */
 5     protected  void transfer_click(View v){
 6 
 7         //The parameter is the start and end coordinates of the shift(Start X Axis position, end X Axis position, start Y Axis position, end Y Axis position)Change variable.
 8         //TranslateAnimation trans=new TranslateAnimation(0.0f,300f,0.0f,300f);
 9         //fromXType Types of animation shift changes
10         //Animation.RELATIVE_TO_SELF,0 Represents the coordinates of the control now+0*Width or height of control itself
11         //Animation.RELATIVE_TO_SELF,0.5f Represents the coordinates of the control now+0.5*Width or height of control itself
12         //Animation.RELATIVE_TO_PARENT Computation versus parent control Animation.RELATIVE_TO_SELF equally
13         //fromXValue The amount of change in the starting coordinate value, if the type is ABSOLUTE，Then this value is an absolute number, otherwise it represents a percentage (0)-1)Between.
14         TranslateAnimation trans=new TranslateAnimation(Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,1,Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,1);
15         trans.setDuration(2000);//Set cycle
16         trans.setFillAfter(true);//Keep end position when end
17         trans.setRepeatCount(2);//Set Repeat Number
18         trans.setRepeatMode(Animation.REVERSE);//Repeat mode
19         ivTaichi.startAnimation(trans);//start-up
20     }
21 
22     /**
23      * rotate
24      * @param v
25      */
26     protected void rotate_click(View v){
27         //Parameters are the start offset (degrees), end degree, and center point of rotation (relative) x Axis position and y Axis position).
28         //RotateAnimation rotate=new RotateAnimation(0.0f,90.f,100.0f,100.0f);
29         RotateAnimation rotate =new RotateAnimation(0.0f,360.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
30         rotate.setFillAfter(true);
31         rotate.setDuration(2000);
32         rotate.setRepeatCount(2);
33         rotate.setRepeatMode(Animation.REVERSE);
34         ivTaichi.startAnimation(rotate);//start-up
35     }
36 
37     /**
38      * zoom
39      * @param v
40      */
41     protected void scale_click(View v){
42         //fromX toX At the beginning and end of the animation X Axis horizontal scaling factor
43         //fromY toY At the beginning and end of the animation Y Axis horizontal scaling factor
44         ScaleAnimation scale=new ScaleAnimation(0.5f,1.5f,0.5f,1.5f);
45         scale.setFillAfter(true);
46         scale.setDuration(2000);
47         scale.setRepeatCount(2);
48         scale.setRepeatMode(Animation.REVERSE);
49         ivTaichi.startAnimation(scale);//start-up
50     }
51 
52     /**
53      * Transparency Animation
54      * @param v
55      */
56     protected void alpha_click(View v){
57         //fromAlpha toAlpha Transparency at the beginning and end of the animation.Range (0),1)
58         AlphaAnimation alpha=new AlphaAnimation(0,1);
59         alpha.setFillAfter(true);
60         alpha.setDuration(2000);
61         alpha.setRepeatCount(2);
62         alpha.setRepeatMode(Animation.REVERSE);
63         ivTaichi.startAnimation(alpha);//start-up
64     }
65 
66     /**
67      * Collection Animation
68      * @param v
69      */
70     protected  void set_click(View v){
71         AnimationSet set=new AnimationSet(true);
72         //TranslateAnimation animation1=new TranslateAnimation(0.0f,300.0f,0.0f,300.0f);
73         RotateAnimation animation2 =new RotateAnimation(0.0f,360.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
74         ScaleAnimation animation3=new ScaleAnimation(0.0f,1.0f,0.0f,1.0f);
75         AlphaAnimation animation4=new AlphaAnimation(0,1);
76         //set.addAnimation(animation1);
77         set.addAnimation(animation2);
78         set.addAnimation(animation3);
79         set.addAnimation(animation4);
80         set.setFillAfter(true);
81         set.setDuration(2000);
82         set.setRepeatCount(2);
83         set.setRepeatMode(Animation.REVERSE);
84         ivTaichi.startAnimation(set);//start-up
85     }

Property Animation

Attribute animation mainly changes the properties of objects to achieve animation, which can be extended and rich in functions.

Attribute animation involves knowledge points as follows:

  • ObjectAnimator This subclass of ValueAnimator provides support for animation properties on the target object.The constructor for this class uses parameters to define the object to be animated and the name of the property to be animated.
  • setDuration(2000); animation cycle
  • setRepeatCount(2); number of repetitions
  • setRepeatMode(Animation.REVERSE); repetition
  • start(); start

The core code for property animation is as follows:

 1 /**
 2      * translation
 3      * @param v
 4      */
 5     protected  void transfer_click(View v){
 6         //target Target control for property animation
 7         //propertyName Attributes that generate animations, all attributes must have set,get Method
 8         //values Range collection for property animation
 9         ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(ivTaichi,"translationX",0,200,-200,0);
10         objectAnimator.setDuration(2000);
11         objectAnimator.setRepeatCount(2);
12         objectAnimator.setRepeatMode(Animation.REVERSE);
13         objectAnimator.start();
14     }
15 
16     /**
17      * rotate
18      * @param v
19      */
20     protected void rotate_click(View v){
21         ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(ivTaichi,"rotationX",0,180);
22         objectAnimator.setDuration(2000);
23         objectAnimator.setRepeatCount(2);
24         objectAnimator.setRepeatMode(Animation.REVERSE);
25         objectAnimator.start();
26     }
27 
28     /**
29      * zoom
30      * @param v
31      */
32     protected void scale_click(View v){
33         ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(ivTaichi,"scaleX",0,1,0);
34         objectAnimator.setDuration(2000);
35         objectAnimator.setRepeatCount(2);
36         objectAnimator.setRepeatMode(Animation.REVERSE);
37         objectAnimator.start();
38     }
39 
40     /**
41      * transparency
42      * @param v
43      */
44     protected void alpha_click(View v){
45         ObjectAnimator objectAnimator =ObjectAnimator.ofFloat(ivTaichi,"alpha",0,1);
46         objectAnimator.setDuration(2000);
47         objectAnimator.setRepeatCount(2);
48         objectAnimator.setRepeatMode(Animation.REVERSE);
49         objectAnimator.start();
50     }
51 
52     /**
53      * Collection Animation
54      * @param v
55      */
56     protected  void set_click(View v){
57         AnimatorSet set=new AnimatorSet();
58         List<Animator> list=new ArrayList<Animator>() ;
59         ObjectAnimator objectAnimator1 =ObjectAnimator.ofFloat(ivTaichi,"translationX",0,200);
60         ObjectAnimator objectAnimator2 =ObjectAnimator.ofFloat(ivTaichi,"rotationX",0,180);
61         ObjectAnimator objectAnimator3 =ObjectAnimator.ofFloat(ivTaichi,"scaleX",0,1);
62         ObjectAnimator objectAnimator4 =ObjectAnimator.ofFloat(ivTaichi,"alpha",0,1);
63         list.add(objectAnimator1);
64         list.add(objectAnimator2);
65         list.add(objectAnimator3);
66         list.add(objectAnimator4);
67         //Play a sequence of animated objects
68         set.playSequentially(list);
69         //
70         set.start();
71      }

 

 

Remarks

Learning without thinking is a waste, thinking without learning is a waste!!!

Topics: Android Attribute xml encoding

Hot Topics

©2024 Programmer Think