The final animation effects to achieve are: rotation, pan, zoom, transparency. This is illustrated by the ic_launcher_round image. View animations are recommended to be written in XML and easy to read.

View animation does not change the actual position of the View, so be careful when the View needs to interact!!

<set></set>Attribute meaning in

<? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android"
   android:fillAfter="true"
   android:fillBefore="true"
   android:repeatMode="reverse"
   android:shareInterpolator="true"
   android:startOffset="@android:"
  android:duration="3000">
  <alpha android:fromAlpha="1.0"
         android:toAlpha="0.3"/>
</set"> < span style =" max-width: 100%""Animation duration, in milliseconds android:fillAfter=""If set totrueAfter the animation ends, the control will stay in the animation state""If set totrueWhen the control animation ends, it will return to the state where the animation began""RepeatCount = Sets the time (in milliseconds) to wait before animation execution""RepeatMode = Android :repeatMode=""Animation repetition type. Reverse means playback in reverse order, and restart means playing again from scratch. Android: Interpolator =""Set the interpolator.Copy the code

Rotation: Animates the rotation Angle of the View being applied

  • grammar
<rotate>
    android:fromDegrees="int"// Rotate the starting Angle, positive represents clockwise degrees, negative represents counterclockwise degrees android:toDegrees="int"// Pivot end Angle Android :pivotX="float"// Scale the starting X-coordinate (number, percentage, percentage P, for example, 50 means adding 50px to the top left corner of the current view)"float"// Rotate > </rotate> </rotate> </rotate>Copy the code
  • Example: View 3s rotation 90°
Anim_rotate. XML: <? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android"
   android:duration="3000">
   <rotate android:fromDegrees="0"
           android:toDegrees="90"/>
</set> Java calls: click on the button to open rotation animation. Rotate setOnClickListener (new View.OnClickListener() {@override public void onClick(View v) {// Remove the animation. MViewAnimShowIcon for function view mViewAnimShowIcon. ClearAnimation (); Animation rotateAnim = AnimationUtils.loadAnimation(AnimViewActivity.this, R.anim.anim_rotate); mViewAnimShowIcon.setAnimation(rotateAnim); }});Copy the code

Transparency: Animates the View to change its transparency

  • grammar
<alpha>
   android:fromAlpha="float"// Transparency at the beginning of the animation (0.0--1.0, 0.0 is fully transparent, 1.0 is opaque) android:toAlpha="float"// Transparency at the end of animation </alpha>Copy the code
  • Example: Transparency in view 3S changed from 1.0F to 0.3F
Anim_alpha. XML: <? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
    <alpha android:fromAlpha="1.0"
           android:toAlpha="0.3"/>
</set> < p style = "text-align: center;"OnClickListener() { @Override public void onClick(View v) { mViewAnimShowIcon.clearAnimation(); Animation alphaAnim = AnimationUtils.loadAnimation(AnimViewActivity.this, R.anim.anim_alpha); mViewAnimShowIcon.setAnimation(alphaAnim); }});Copy the code

Panning: Animates the position of the View being acted on

  • grammar
<translate>
     android:fromXDelta="float"// Start point X axis (the same as rotate) Android :fromYDelta="float"// Start point Y coordinates Android :toXDelta="float"// End point X coordinates android:toYDelta="float"</ /translate>Copy the code
  • Example: View 3S moves 100 pixels to the right
Anim_translate. XML: <? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
    <translate
        android:fromXDelta="0.0"
        android:toXDelta="100.0"/>
</set> in the Java call: translate. SetOnClickListener (new View.OnClickListener() {@ Override public void onClick (View v) {/ / must first remove the animation mViewAnimShowIcon clearAnimation (); Animation translateAnim = AnimationUtils.loadAnimation(AnimViewActivity.this, R.anim.anim_translate); mViewAnimShowIcon.setAnimation(translateAnim); }});Copy the code

Zoom: Animates the zoom of the View being applied

  • grammar
<? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
    <scale android:fromXScale="1.0"
           android:toXScale="0.5"/>
</set>
Copy the code
  • Example: View 3s rotation 90°
Anim_rotate. XML: <? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
    <scale android:fromXScale="1.0"
           android:toXScale="0.5"/>
</set> Java call: scale.setonClickListener (new View).OnClickListener() { @Override public void onClick(View v) { mViewAnimShowIcon.clearAnimation(); Animation scaleAnim = AnimationUtils.loadAnimation(AnimViewActivity.this, R.anim.anim_scale); mViewAnimShowIcon.setAnimation(scaleAnim); }});Copy the code

Interpolator: the system has the following built-in interpolators, which can be used directly.

  • AccelerateDecelerateInterpolator: first, to accelerate the speed
  • LinearInterpolator: always uniform, default differentiator
  • AccelerateInterpolator: always accelerates
  • Activity: Always slowing down
  • Argateinterpolator: Normal animation trace will be made after being pulled back
  • OvershootInterpolator: The animation will overshoot the target value and then bounce back
  • AnticipateOvershootInterpolator: pullback, before the start of the last more than a few and springback
  • BounceInterpolator: Stops after bouncing at a target value
  • CycleInterpolator: This is also a sine/cosine curve, the difference between it and AccelerateDecelerateInterpolator is that it can be custom cycle curve, so the animation can finish ends, can reach the destination after springback, the number of springback is determined by the curve of the cycle, The period of a curve is determined by the parameter of the CycleInterpolator() constructor
  • PathInterpolator: Custom animation finish/time finish curve. With this Interpolator you can customize any speed model you want. The custom way is to use a Path object to draw your desired animation completion/time completion curve
  • FastOutLinearInInterpolator: accelerated motion, FastOutLinearInInterpolator bezier curve formula is to use, and AccelerateInterpolator with exponential curve. In particular, both of which the main difference is the initial stage of FastOutLinearInInterpolator acceleration is faster than AccelerateInterpolator.
How to use the interpolator

Interpolator =”@android: interpolator /overshoot_interpolator” in XML: Android :interpolator=”@android:anim/overshoot_interpolator”

Use animator.setinterpolator (interpolator) in Java code;

reference

Android Animation: Do you Really know how to use interpolators and estimators? (including detailed example teaching)

The source address