SoFunction
Updated on 2025-03-09

Analyze the key points of writing Animation animation in Android

You can find four Animation demos under View->Animation of API Demo. The first 3D Translate is quite complicated. Finally, let’s talk about the second Interpolator first. The activity corresponds to the animation_3.xml in the view package and layout.

The layout of the interface is not explained, just a Spinner and a TextView. Not the content of this article.

The following key sentences are mainly explained.

Initialize Animation, from the name of the class, it can be seen that it is an animation that transforms the position of the View, parameter starting point horizontal coordinate, end point horizontal coordinate, starting point vertical coordinate, end point vertical coordinate.

Animation a = new TranslateAnimation(0.0f, 
        () - () - () - 
        (), 0.0f, 0.0f); 

 

Below are the parameter settings of the animation, I added comments

(1000);//The time taken to set the animation    (300);//Set the delay of animation startup    //Set the repetition mode, RESTART is to start again after the end, REVERSE is to return in reverse according to the original track    (); 
    //Set the number of repetitions, INFINITE is unlimited    (); 
    //Set the target entry method according to the user's choice in Spinner    switch (position) { 
      case 0: 
        //Accelerate entry        ((.accelerate_interpolator)); 
        break; 
      case 1: 
        //Reduce to enter        ((this, 
            .decelerate_interpolator)); 
        break; 
      case 2: 
        //Accelerate entry. The difference from the first is that when repeatMode is reverse, it still returns to the origin for acceleration.        ((this, 
            .accelerate_decelerate_interpolator)); 
        break; 
      case 3: 
        //Retreat a little bit before speeding up        ((this, 
            .anticipate_interpolator)); 
        break; 
      case 4: 
        //Reduce and move forward, and then retreat before rushing to the finish line.        ((this, 
            .overshoot_interpolator)); 
        break; 
      case 5: 
        //The combination of case 3,4        ((this, 
            .anticipate_overshoot_interpolator)); 
        break; 
      case 6: 
        //Stop and resonate for a few times        ((this, 
            .bounce_interpolator)); 
        break; 
    } 
    //Let target start executing this animation    (a); 
  } 

Here are some preset actions that Android has already set. We can also customize XML to achieve better animation effects. This is the next article.

In addition to TranslationAnimation, there are also AlphaAnimation, RotateAnimation, and ScaleAnimation. Using these combinations of base movements, a series of complex animation effects can be formed. For specific usage, please check the SDK.

The whole thing is relatively simple. Just call a function. If you don’t understand it, look at the API comments and SDK documentation. There is nothing difficult to understand.

Now start looking at the third Push, from View->animation->Push, you can start this Activity

Push Demo mainly shows the switching effect between views.

The corresponding Java file of Push is in the view package, and the corresponding XML layout file is layout/animation_2.xml.

Let’s look at the layout file first. The main use of ViewFlipper on this page. Use ViewFlipper to realize dynamic switching between multiple views, and you can customize the switching animation. What is shown in this example is how to define the switching animation.

Let’s talk about the following key sentences.

Let ViewFlipper start automatically switching.

(); 

 

Change the animation effect of entering and exiting when clicking the option in Spinner.

public void onItemSelected(AdapterView parent, View v, int position, long id) { 
    switch (position) { 
    case 0: 
      ((this, 
          .push_up_in)); 
      ((this, 
          .push_up_out)); 
      break; 
    case 1: 
      ((this, 
          .push_left_in)); 
      ((this, 
          .push_left_out)); 
      break; 
    case 2: 
      ((.fade_in)); 
      ((this, 
          .fade_out)); 
      break; 
    default: 
      ((this, 
          .hyperspace_in)); 
      ((this, 
          .hyperspace_out)); 
      break; 
    } 
  } 

The Animation here is all customized animation effects. You can find the corresponding XML file in res/anim. Here, use push_up_in.xml to explain the approximate usage of the definition.

Because this animation is composed of several animation composites, the outer periphery is enclosed with a set tag to form an AnimationSet.

The main definition of the change of position in the translate tag, fromYDelta="100%p" refers to the distance from the height of a ViewFlipper that appears just below the ViewFlipper. 100%p is a relative value, greater than 0 is below, and less than 0 is above. toYDelta="0", means that the original position of the layout file stops just reached. android:duration="300" means that the entire action time takes 300 milliseconds, and the system will automatically adjust the speed according to this time.

The alpha tag defines transparency, 0 is fully transparent, 1.0 is opaque, the process is 300 milliseconds, let the View be a gradually emerging process

<set xmlns:andro> 
  <translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="300"/> 
  <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" /> 
</set> 

push_up_out.xml and push_left are almost the same, and should be easy to understand.

hyperspace_in.xml is simpler, with only one alpha, so there is no set tag on the outer layer. startOffset is to set the delay.

hyperspace_out.xml is relatively complicated. Set also includes set, but it is still composed of several small actions. It can be understood bit by bit.

The outermost layer is a set, which nests a scale and a set.

The first scale tag can be understood as using the center position of the current View as the axis point, and in 700 milliseconds, the horizontal length of the View is changed to 1.4 times and the height is 0.6 times in accelerating and amplifying manner. As for the fillAfter tag, I have never understood this function. According to the explanation in the SDK, it is to keep the View in the last frame of the animation in the continuous animation, but it seems that there is no effect in my experiment. I would like to give advice from experts. (Seeing some information on the Internet means that it must be set in the code. Is this a bug belonging to Android?) An animationSet can be used as a subset of another animationSet, which is easy to understand. The literal meaning of the photo in the rotate tag should be easy to understand, so I won’t go into details.

<set xmlns:andro android:shareInterpolator="false"> 
  <scale  
    android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
    android:fromXScale="1.0"  
    android:toXScale="1.4"  
    android:fromYScale="1.0"  
    android:toYScale="0.6"  
    android:pivotX="50%" 
    android:pivotY="50%" 
    android:fillAfter="false" 
    android:duration="700" /> 
  <set  
    android:interpolator="@android:anim/accelerate_interpolator" 
        android:startOffset="700"> 
     
    <scale 
      android:fromXScale="1.4"  
      android:toXScale="0.0" 
        android:fromYScale="0.6" 
      android:toYScale="0.0"  
      android:pivotX="50%"  
      android:pivotY="50%"  
      android:duration="400" /> 
     
    <rotate  
      android:fromDegrees="0"  
      android:toDegrees="-45" 
      android:toYScale="0.0"  
      android:pivotX="50%"  
      android:pivotY="50%" 
      android:duration="400" /> 
  </set> 
</set> 

Many animations are actually composed of basic actions such as alpha, scale, rotate, and translate. These belong to Tween Animation. There is also a Frame Animation, which is similar to the effect of playing movies, playing animations one by one, and I will talk about it later.

All the properties set in XML can be found in JAVA for corresponding API functions, and can be found in the Android SDK document.

Actually, I think I'm a bit too long to write this way. The name definition of Android's API is very standardized, and the function of this function can be judged from the name.

The main definition of 3D Transition is in the animation package, with only two Java files inside.

3D flip is actually not very complicated. The most important thing is a function (new DisplayNextView(position)); in line 99 of Transition3d. The main function of this function is to set events to be triggered before, after, and when repeating the action through a Listener.

The 3D flip effect is mainly composed of two rotato actions. The second action is activated by Listener after the first action is completed. These two Animations are connected together, and when viewed, they look like the effect of 3D rotation.

At the same time, in which an Animation is redefined, overriding the initialize and applyTransformation methods. initialize is to initialize the action, applyTransformation defines the animation effect. This is the most important part. What is passed in is the percentage and action of the current time as the total time. Here the transformation matrix is ​​used. I found that I forgot T_T in my linear algebra and I will watch it again in the future. The main reason is that Camara doesn't understand this class very well, and the comments don't write it in the comments is what it is to guess from the code that saves the current interface.

This is simple, but it is harder to do. .