Android animation resources

Source: Internet
Author: User

Android animation resources
Android animation resources

I. classification:
(1) summary:

Before android 3.0, android supported two animation modes: tween animation and frame animation. A new animation system was introduced in android3.0: property animation ). These three animation modes are called view animation, drawable animation, and property animation in the SDK.

(2) classification of animation resources:

Property Animation: Property Animation Frame Animation: Frame Animation (Drawable Animation) Animation: Tween Animation (View Animation)

1. Transparency compensation Animation
2. Zoom in/out animation
3. Rotate the compensation Animation
4. Animation
? Alpha: gradient transparency animation effect
? Scale: gradient scaling animation effect
? Translate: animation effect for moving the position of the screen
? Rotate: animation effect for moving the position of the screen

Ii. Compensation Animation:

Tween Animation is a series of View shape transformations, such as scaling the size, changing the transparency, changing the horizontal position, and changing the Rotation Position, the definition of an animation can be defined either in java code or in XML. We recommend that you use XML. Place the animation defined in XML in the/res/anim/folder. The root element of the XML file is
  
   
The secondary node can be,
   
    
,
    
     
,
     
      
.
     
    
   
  

(1) attributes of Tween Animation:
1. The duration [long] attribute is the animation duration in milliseconds.
2. When fillAfter [boolean] is set to true, the animation is applied after the animation ends.
3. When fillBefore [boolean] is set to true, the animation is applied before the animation starts.
4. interpolator specifies an animation plug-in with some common plug-ins.
? Accelerate_decelerate_interpolator acceleration-Deceleration animation inserter
? Accelerate_interpolator acceleration-animation insertor
? Decelerate_interpolator deceleration-animation insertor
Other animation Effects
5. repeatCount [int] Number of animation repetitions
6. repeatMode [String] defines repeated behavior
? "Restart" and "reverse"
? Eg: android: repeatMode = "reverse"

(2) use xml resources to implement animation complementing:

[Note :]
1. fromAlpha: transparency when the 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.
2. toAlpha: the attribute is the transparency when the animation ends.


      

[Note :]
1. fromXScale [float]
2. fromYScale [float] indicates 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
?
3. toXScale [float]
It is the scaling size on the X coordinate when the animation ends.
4. toYScale [float] indicates the scaling size on the Y coordinate when the animation ends.
5. Sort TX [float]

6. interval ty [float] 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.


      

[Note :]
1. fromXDelta
2. toXDelta is the position on the X coordinate when the animation ends.
3. fromYDelta
4. toYDelta is the position on the Y coordinate when the animation ends.


      

[Note :]
1. fromDegrees indicates the object angle when the animation starts.
Description
: When 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)
2. The toDegrees attribute indicates that the rotation angle of the object can be greater than 360 degrees when the animation ends.
3. Sort TX
4. Ty 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 midpoint position on the X or Y coordinate of the object.

(3) Use java code to implement a complementary Animation:

Public class MainActivity extends AppCompatActivity {private ImageView iv; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); iv = (ImageView) findViewById (R. id. iv);} public void translateClick1 (View view) {// 1. start position of X axis movement // 2. end position of moving X axis // 3. start position of Y axis movement // 4. the end position of the Y-axis movement. TranslateAnimation ta = new TranslateAnimatio N (0,200, 0,200); // animation execution time, 5000 Ms ta. setDuration (5000); // sets the status of the ImageView when the animation ends. setFillAfter (true); // animation effect for ImageView iv. startAnimation (ta);} public void alphaClick1 (View view) {// 1. indicates the starting state of the animation. 1 indicates completely opaque, and 0 indicates completely transparent. // 2. alphaAnimation aa = new AlphaAnimation (1, 0); aa. setDuration (3000); iv. startAnimation (aa);} public void scaleClick1 (View view) {// 1. start status of the X axis // 2. X axis end status // 5. 6 indicates the center of the scaling. // ScaleAnimation sa = new ScaleAnimation (0, 2, 0, 1, iv. getWidth ()/2, iv. getHeight ()/2); // For the zoom center, see the ImageView center. 0.5f indicates the 50% ScaleAnimation sa = new ScaleAnimation (0, 1, 0, 1, ScaleAnimation. RELATIVE_TO_SELF, 0.5f, ScaleAnimation. RELATIVE_TO_SELF, 0.5f); sa. setDuration (3000); iv. startAnimation (sa);} public void rotateClick1 (View view) {// 1. starting position of rotation // 2. rotation end position // 3.4 indicates the center of the rotation // RotateAnimation ra = new RotateAnimation (0,360, iv. getWidth ()/2, iv. getHeight ()/2); RotateAnimation ra = new RotateAnimation (0,359, RotateAnimation. RELATIVE_TO_SELF, 0.5f, RotateAnimation. RELATIVE_TO_SELF, 0.5f); // you can specify the number of rotations. setRepeatCount (RotateAnimation. INFINITE); // sets the pattern for repeated rotation ra. setRepeatMode (RotateAnimation. REVERSE); ra. setDuration (3000); iv. startAnimation (ra);} public void setClick1 (View view) {// true indicates that the animation interpolation tool uses the default AnimationSet interpolation set = new AnimationSet (true ); translateAnimation ta = new TranslateAnimation (0, iv. getWidth (), 0, iv. getHeight (); ta. setDuration (3000); // Add all animations to set. addAnimation (ta); AlphaAnimation aa = new AlphaAnimation (0.2f, 0.8f); aa. setduration( 3000); set. addAnimation (aa); ScaleAnimation sa = new ScaleAnimation (1, 2, 1, 2, ScaleAnimation. RELATIVE_TO_SELF, 0.5f, ScaleAnimation. RELATIVE_TO_SELF, 0.5f); sa. setduration( 3000); set. addAnimation (sa); RotateAnimation ra = new RotateAnimation (0,-359, RotateAnimation. RELATIVE_TO_SELF, 0.5f, RotateAnimation. RELATIVE_TO_SELF, 0.5f); ra. setduration( 3000); set. addAnimation (ra); iv. startAnimation (set);} public void translateClick2 (View view) {Animation animation = AnimationUtils. loadAnimation (this, R. anim. translate_anim); animation. setFillAfter (true); iv. startAnimation (animation);} public void alphaClick2 (View view) {Animation animation = AnimationUtils. loadAnimation (this, R. anim. alpha_anim); iv. startAnimation (animation);} public void scaleClick2 (View view) {Animation animation = AnimationUtils. loadAnimation (this, R. anim. scale_anim); iv. startAnimation (animation);} public void rotateClick2 (View view) {Animation animation = AnimationUtils. loadAnimation (this, R. anim. rotate_anim); iv. startAnimation (animation);} public void setClick9 (View view) {Animation animation = AnimationUtils. loadAnimation (this, R. anim. set_anim); iv. startAnimation (animation );}}

(4) Interpolation

[Note ]:
The AccelerateDecelerateInterpolator speed changes slowly between the animation start and end, accelerating
AccelerateInterpolator changes slowly at the beginning of the animation, and then starts acceleration.
When the BounceInterpolator animation ends
CycleInterpolator: specifies the number of times the animation is played cyclically, and the speed changes along the sine curve.
DecelerateInterpolator is fast and slow at the beginning of the animation
LinearInterpolator changes at constant rate

3. Frame Animation:
Frame Animation (AnimationDrawable object): A Frame Animation, like a GIF image, uses a series of Drawable display to simulate the Animation effect.
The root element must be used to indicate the image to be rotated, And the duration Attribute indicates the display time of each item. The XML file must be stored in the/res/anim/or/res/animator directory.

(1) instance code:


          
          
          
          
          
      

[Note :]
Drawable resource referenced by the current frame
The display time of the current duration frame (unit: milliseconds)
If oneshot is set to true, the animation is played only once and stops at the last frame. If it is set to false, the animation is played cyclically.

MainActivity. java code:

Ad = (AnimationDrawable) iv1.getDrawable (); iv1.setOnClickListener (new View. onClickListener () {@ Override public void onClick (View v) {// if the animation is being executed, stop it first, and then execute if (ad. isRunning () {ad. stop ();} ad. start ();}});

[Note :]
As mentioned in the SDK, do not call start () in onCreate (), because AnimationDrawable is not completely associated with Window. If you want to start animation when the interface is displayed, you can go to onWindowFoucsChanged () start ().

4. Property Animation:
(1) concept:
Property animation, which was introduced in Android 3.0. The Property Animation parameter is used to change the attributes of an object through Animation. property Animation changes the actual attributes of an object. In View Animation (Tween Animation), it changes the rendering effect of the View, and the attributes of the View remain unchanged. Attribute animation can be understood as an enhanced supplementary animation.
For example, no matter how you scale the Button size, the position and size of the effective click area of the Button remain unchanged. In Property Animation, the actual attributes of the object are changed, for example, the scaling of the Button, the position and size of the Button, and the attribute values are changed.
Property Animation can be applied not only to View, but also to any object. Property Animation only indicates a change in value within a period of time. When the value changes, you decide what to do.

(2) common attributes:
1. Duration animation Duration. The default value is 300 ms. Android: duration attributes
2. Time interpolation: Time interpolation. LinearInterpolator and AccelerateDecelerateInterpolator define the animation change rate. Android: interpolator attributes
3. Repeat count and behavior: Repeat count and Repeat mode. You can define the number of Repeat times. The Repeat starts from the beginning and returns to the back. Android: repeatCount attributes
4. Animator sets: an animation set. You can define an animation group to be executed together or sequentially ., The android: ordering attribute of this element specifies whether the animation is played in sequence or simultaneously.
5. Frame refresh delay: Frame refresh delay (Frame refresh frequency, the playback duration of each Frame). The default value is 10 ms, but the final value depends on the current state of the system.
(3) Property animation API: Related Classes
1. ObjectAnimator animation execution class (a subclass of ValueAnimator, which is commonly used. In a few scenarios, ValueAnimator is considered because of its limitations)
2. ValueAnimator animation execution class
3. AnimatorSet is used to control the execution of a group of animations: linear, together, and successively executed by each animation. In general, attribute animation is an animation execution class that sets the attributes, duration, start and end attribute values, and time difference of the animation operation object, then, the system dynamically changes the attributes of the Object Based on the set parameters.

(1) instance code:

Public class MainActivity extends AppCompatActivity {private ImageView iv1; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); iv1 = (ImageView) findViewById (R. id. iv1); iv1.setOnClickListener (new View. onClickListener () {@ Override public void onClick (View v) {Toast. makeText (MainActivity. this, "123", Toast. LE NGTH_SHORT ). show () ;}}); // display animation LinearLayout linearLayout = (LinearLayout) findViewById (R. id. ll); ScaleAnimation sa = new ScaleAnimation (0, 1, 0, 1); sa. setDuration (500); // 0 indicates that all animations are executed simultaneously. 1 indicates that the delay is 1 s. LayoutAnimationController lac = new LayoutAnimationController (sa, 0.5f); lac. setOrder (LayoutAnimationController. ORDER_RANDOM); linearLayout. setLayoutAnimation (lac);} public void translateClick (View v Iew) {// 1. The control that executes the animation // 2. The changed property name //... ObjectAnimator objectAnimator = ObjectAnimator. ofFloat (iv1, "translationX", 0,200, 0); objectAnimator. setDuration (5000); objectAnimator. start ();} public void alphaClick (View view) {ObjectAnimator oa = ObjectAnimator. ofFloat (iv1, "alpha", 0f, 0.5f, 0f, 1f); oa. setDuration (1, 5000); oa. start ();} public void scaleClick (View view) {ObjectAnimator oa = ObjectAnimator. ofFloat (iv1, "scaleX", 0, 1, 0.5f, 1); oa. setDuration (1, 5000); oa. start ();} public void rotateClick (View view) {// rotateY indicates rotating around the Y axis // rotateX indicates rotating around the X axis // rotate indicates rotating around the center ObjectAnimator oa = ObjectAnimator. ofFloat (iv1, "rotation", 0,359); oa. setRepeatCount (ObjectAnimator. INFINITE); oa. setRepeatMode (ObjectAnimator. RESTART); // linear interpolation, animation at a constant speed oa. setInterpolator (new LinearInterpolator (); oa. setDuration (1, 5000); oa. start ();} public void animClick1 (View view) {// define a composite animation. The first parameter indicates the modified attribute name, and the following parameter indicates the property value change PropertyValuesHolder pv1 = PropertyValuesHolder. ofFloat ("rotation", 0,359); PropertyValuesHolder pv2 = PropertyValuesHolder. ofFloat ("scaleX", 1, 2); PropertyValuesHolder pv3 = PropertyValuesHolder. ofFloat ("maid", 0,200); PropertyValuesHolder pv4 = PropertyValuesHolder. ofFloat ("alpha", 0.5f, 1f); // Add all composite animations to ObjectAnimator oa = ObjectAnimator. ofPropertyValuesHolder (iv1, pv1, pv2, pv3, pv4); oa. setDuration (1, 5000); oa. start ();} public void animClick2 (View view) {MyImageView miv = new MyImageView (iv1); // ObjectAnimator oa = ObjectAnimator. ofInt (miv, "width", 0,200); ObjectAnimator oa = ObjectAnimator. ofInt (miv, "height", 0,200); oa. setDuration (1, 5000); oa. start ();}}

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.