There are three kinds of animation in android
Frame Animation, Tween Animation and Property Animation
Frame Animation
Specific implementation process:
1. Under the res/drawable directory, the file progress_animlist.xml is as follows:
<?xml version="1.0" encoding="utf-8"?>
<!--
//The root tag is animation-list, where oneshot represents whether the animation will be shown only once, and the animation will be played repeatedly if it is set to false.
//Under the root tag, each image in the animation is declared by the item tag
android:duration Represents the length of time the picture was displayed.
-->
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false" >
<item
android:drawable="@drawable/p1"
android:duration="150">
</item>
<item
android:drawable="@drawable/p2"
android:duration="150">
</item>
<item
android:drawable="@drawable/p3"
android:duration="150">
</item>
<item
android:drawable="@drawable/p4"
android:duration="150">
</item>
<item
android:drawable="@drawable/p5"
android:duration="150">
</item>
<item
android:drawable="@drawable/p6"
android:duration="150">
</item>
<item
android:drawable="@drawable/p7"
android:duration="150">
</item>
<item
android:drawable="@drawable/p8"
android:duration="150">
</item>
</animation-list>
The root node is animation-list (animation list). There is one or more item nodes in it. The oneshot attribute indicates whether to play only once, true means to play only once, false means to play all the time, internal uses item node to declare an animation frame, android:drawable specifies the corresponding picture resources of the animation frame, android:druation represents the duration of the frame. Integer in milliseconds.
2. Using ImageView Control as Carrier of Animation to Display Animation
<ImageView
android:src="@drawable/progress_animlist"
android:id="@+id/animi"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
Pure java code approach
//Create frame animation
AnimationDrawable animationDrawable = new AnimationDrawable();
//Add frame animationDrawable. addFrame (getResources (). getDrawable (R. mipmap. p1),300); animationDrawable.addFrame (getResources (). getDrawable (R. mipmap. p2),300); animationDrawable. addFrame (getDrawable (R. mip2) (R. mip2 map. p2),300); animationDrawable. addFrame (getResources (). getResources (). getDramitDrawable (R. getDramaMap. p3),300); animationResources. addFrame (getDrawable. addFrame (getDramamamamamamamamaMap ((). DramamaThe results of this study are as follows:1. Rawable. addFrame (getResources (). getDrawable (R. mipmap. p5), 300);
//Set whether the animation is played only once, default is false
animationDrawable.setOneShot(false);
//How long it takes to get that frame based on the index
int duration = animationDrawable.getDuration(2);
//Get the picture of that frame according to the index
Drawable drawable = animationDrawable.getFrame(0);
//Judge if the animation is playing?
boolean isRunning = animationDrawable.isRunning();
//Get whether this animation is played only once
boolean isOneShot = animationDrawable.isOneShot();
//Get how many frames this animation will play together
int framesCount = animationDrawable.getNumberOfFrames();
//Set this animation to background, compatible with more versions. Write the following sentence
mIvImg.setBackground(animationDrawable);
mIvImg.setBackgroundDrawable(animationDrawable);
//Start playing animation
animationDrawable.start();
//Stop playing animation
animationDrawable.stop();
Tween Animation
Inter-patch animation can be implemented in java code or configurable through xml files
Animation type | Java Code Implementation | XML Configuration |
---|---|---|
Gradual Transparency Animation Effect | AlphaAnimation | alpha |
Zoom Animation Effect | ScaleAnimation | scale |
Rotary animation effect | RotateAnimation | rotate |
Position Moving Animation Effect | TranslateAnimation | translate |
Combination animation effect | AnimationSet | set |
Concrete realization
1. The animation effect of alpha gradient transparency
(1) xml mode
<?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:fillAfter="false" android:fromAlpha="1.0" android:toAlpha="0.5" /> <!-- Transparency control animation effect alpha Floating-point values: fromAlpha attribute is transparency at the beginning of animation The toAlpha attribute is transparency at the end of the animation Explain: 0.0 means total transparency 1.0 means total opacity The above values are numeric values of float data types between 0.0 and 1.0 Long integer values: Duration attribute is animation duration Explain: Time in milliseconds -->
XML loading method obtains Animation through AnimationUtils.loadAnimation(this, R.anim.anim_alpha)
Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_alpha);
imageView.startAnimation(alphaAnimation);
(2) Java code style
//The first parameter, fromAlpha, is transparency at the beginning of the animation
//The second parameter, toAlpha, is transparency at the end of the animation
Animation alphaAnimation = new AlphaAnimation(1.0f, 0.0f);
alphaAnimation.setDuration(500);//Set the animation duration to 500 milliseconds
alphaAnimation.setFillAfter(false);//Keep the current position after the animation is finished (that is, do not return to the position before the animation starts)
imageView.startAnimation(alphaAnimation);
2. scale zoom animation effect
(1) xml mode
<?xml version="1.0" encoding="utf-8"?> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:fromXScale="0.0" android:fromYScale="0.0" android:interpolator="@android:anim/decelerate_interpolator" android:pivotX="50%" android:pivotY="50%" android:repeatCount="1" android:repeatMode="reverse" android:startOffset="0" android:toXScale="1.5" android:toYScale="1.5" /> <!-- Scaling animation effect scale Properties: interpolator specifies an inserter for animation During my experiment, I found that using resources in android.res.anim There are three kinds of animation inserters: Accelerated_decelerate_interpolator acceleration-deceleration animation inserter Acceleration_interpolator accelerator-animation inserter decelerate_interpolator deceleration-animation inserter Other specific animation effects RepatMode, the mode of animation repetition, reverse is reverse, when the even execution, the animation direction will be opposite. restart is re-executed in the same direction Floating-point values: fromXScale property is the scaling size on the X coordinate at the beginning of the animation The toXScale attribute is the scaling size on the X coordinates at the end of the animation The fromYScale attribute is the scaling size on the Y coordinate at the beginning of the animation The toYScale attribute is the scaling size on the Y coordinate at the end of the animation Explain: The above four attribute values 0.0 means shrinking to zero 1.0 indicates normal non-stretching Value less than 1.0 indicates contraction Value greater than 1.0 indicates enlargement The pivotX attribute is the starting position of the X coordinate of the animation relative to the object. The pivotY attribute is the starting position of the Y coordinate of the animation relative to the object. Explain: The above two attribute values are taken from 0%-100%. 50% is the midpoint position in the X or Y direction coordinates of the object Long integer values: Duration attribute is animation duration Description: Time in milliseconds The interval between multiple executions of startOffset animation, if executed only once, will be paused before execution, in milliseconds. RepatCount, the count of animation duplication, the animation will execute this value + 1 time Boolean values: When the fillAfter property is set to true, the animation transformation is applied after the animation is finished. -->
XML loading method obtains Animation through AnimationUtils.loadAnimation(this, R.anim.anim_scale)
Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_scale);
imageView.startAnimation(alphaAnimation);
(2) Java code style
Animation scaleAnimation = new ScaleAnimation(0.0f, 1.5f, 0.0f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(500);//Set the animation duration to 500 milliseconds
scaleAnimation.setFillAfter(true);//If the fillAfter value is true, the control will remain at the end of execution after the animation is executed
scaleAnimation.setFillBefore(false);//If the fillBefore value is true, after the animation is executed, the control will return to the state before the animation is executed.
scaleAnimation.setRepeatCount(3);//Set the number of animation cycles
scaleAnimation.setRepeatMode(Animation.REVERSE);
scaleAnimation.setStartOffset(0);
scaleAnimation.setInterpolator(this, android.R.anim.decelerate_interpolator);//Setting up animation inserter
imageView.startAnimation(scaleAnimation);
3. rotate animation effect
(1) xml mode
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:fromDegrees="0" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:pivotX="50%" android:pivotY="50%" android:toDegrees="-360" /> <!-- rotate animation effect Property: interpolator specifies an inserter for an animation During my experiment, I found that using resources in android.res.anim There are three kinds of animation inserters: Accelerated_decelerate_interpolator acceleration-deceleration animation inserter Acceleration_interpolator accelerator-animation inserter decelerate_interpolator deceleration-animation inserter Other specific animation effects Floating-point type values: fromDegrees attribute is the angle of the object at the beginning of the animation The toDegrees attribute is that at the end of the animation the object can rotate at an angle greater than 360 degrees. Explain: When Angle is Negative - Represents Counterclockwise Rotation When the angle is positive, it means clockwise rotation (Negative from - to positive: clockwise rotation) (Negative number from - to negative number: counterclockwise rotation) (Positive from - to positive: clockwise rotation) (Positive from - to negative: counterclockwise rotation) The pivotX attribute is the starting position of the X coordinate of the animation relative to the object. The pivotY attribute is the starting position of the Y coordinate of the animation relative to the object. Description: The above two attribute values are taken from 0%-100%. 50% is the midpoint position in the X or Y direction coordinates of the object Long integer values: Duration attribute is animation duration Description: Time in milliseconds -->
XML loading method obtains Animation through AnimationUtils.loadAnimation(this, R.anim.anim_rotate)
Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_rotate);
imageView.startAnimation(alphaAnimation);
(2) Java code style
Animation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(500);
rotateAnimation.setFillAfter(true);
rotateAnimation.setInterpolator(this, android.R.anim.accelerate_decelerate_interpolator);//Setting up animation inserter
imageView.startAnimation(rotateAnimation);
4. Translational Location Moving Animation Effect
(1) xml mode
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:fromXDelta="100" android:fromYDelta="0" android:interpolator="@android:anim/cycle_interpolator" android:toXDelta="0" android:toYDelta="0" /> <!-- translate position transfer animation effect Integer values: Position on X coordinates at the beginning of fromXDelta animation Location on X coordinates at the end of toXDelta animation Position on Y coordinates at the start of fromYDelta animation Position on Y coordinates at the end of toYDelta animation Be careful: When fromXType to XType from YType to YType is not specified, The default is to take oneself as a relative reference. Long integer values: Duration attribute is animation duration Description: Time in milliseconds -->
The XML loading method obtains the Animation through AnimationUtils.loadAnimation(this, R.anim.anim_translate)
Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_translate);
imageView.startAnimation(alphaAnimation);
(2) Java code style
Animation translateAnimation = new TranslateAnimation(0, 100, 0, 0);
translateAnimation.setDuration(500);
translateAnimation.setInterpolator(this, android.R.anim.cycle_interpolator);//Setting up animation inserter
translateAnimation.setFillAfter(true);//Keep the current position after the animation is finished (that is, do not return to the position before the animation starts)
imageView.startAnimation(translateAnimation);
5. set Combination Animation Effect
(1) xml mode
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="500"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
<scale
android:duration="500"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:interpolator="@android:anim/decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="1"
android:repeatMode="reverse"
android:startOffset="0"
android:toXScale="1.5"
android:toYScale="1.5" />
</set>
XML loading method obtains Animation through AnimationUtils.loadAnimation(this, R.anim.anim_set)
AnimationSet animationSet = (AnimationSet) AnimationUtils.loadAnimation(this, R.anim.anim_set);
imageView.startAnimation(animationSet);
(2) Java code style
AnimationSet animationSet = new AnimationSet(true);
Animation alphaAnimation = new AlphaAnimation(1.0f, 0.1f);
alphaAnimation.setDuration(500);//Set the animation duration to 500 milliseconds
Animation scaleAnimation = new ScaleAnimation(0.0f, 1.5f, 0.0f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(500);//Set the animation duration to 500 milliseconds
scaleAnimation.setRepeatMode(Animation.REVERSE);
scaleAnimation.setStartOffset(0);
scaleAnimation.setInterpolator(this, android.R.anim.decelerate_interpolator);//Setting up animation inserter
animationSet.addAnimation(alphaAnimation);
animationSet.addAnimation(scaleAnimation);
imageView.startAnimation(animationSet);