Android Animation Learning (8) - Advancement of Intermediate Animation

Keywords: Android xml Attribute encoding

Android Animation Learning-Advancement of Intermediate Animation

  • This article is about animation display for layout. In other words, the pages we usually see are displayed directly. It seems that we haven't seen how every control in layout is added to the whole page, nor when it was added. Let's take a look at this article.
  • Let's look at the official documents of ViewGroup and see that he has one.
android:layoutAnimation  //Define layout animation toViewGroupUsed in the first layout. 
  • We can set the first loading animation for our ViewGroup through this property
  • I tried it in the xml file and found that he could only refer to the xml file of the interpolation animation.
  • Okay, let's go and see the stuff in the studio animation.
  • We found two seemingly useful classes
Layout Animation Controller Layout Animation Controller Layout Animation Controller is used to set animations for layout or view group subitems. Every child uses the same animation
 GridLayout Animation Controller Layout Animation Controller is used to generate animations for sub-nodes of grid layout. 
  • The latter is inherited from the former. Let's study the first one.

LayoutAnimationController

Take a look at his xml properties

android:animation for animation of each subitem. 
Android: The starting sequence of animation order. 
android:delay is used to delay the start of each subitem animation. 
android:interpolator is used to interpolate the delay between the start of each animation. 
  • Among them, the first one is the reference to a complementary animation.
  • The second represents the order in which subitems enter. There are three constants that can be set
int ORDER_NORMAL allocates animation delays in the order in which views are added to view groups.
int ORDER_RANDOM Random Distribution Animation Delay.
int ORDER_REVERSE assigns animation delays in the reverse order in which views are added to view groups.
  • That is to say, subitems appear from the top to the bottom, from the bottom to the top, or randomly.
  • The third is the delay before each animation starts.
  • The fourth is the interpolator.

Look at the construction method.

LayoutAnimationController(Context context, AttributeSet attrs)
Create a new layout animation controller from external resources.

LayoutAnimationController(Animation animation)
Create a new layout animation controller with 50% delay and specified animation.

LayoutAnimationController(Animation animation, float delay)
Create a new layout animation controller with the specified delay and animation.
  • The first one is not clear to me, the second and the third are easy to understand.
  • Once built, we can use our ViewGroup-derived control set to go in and do ok.

Let's see the specific usage below.

  • First map
  • Code
  • Main layout
<LinearLayout
        android:layoutAnimation="@anim/my_linear_animation"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="match_parent">

        <Button
            android:background="@color/colorAccent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:background="@color/colorPrimaryDark"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:background="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>
  • The four buttons in the GIF diagram are the four buttons. I animated the Linear Layout and looked at the animated xml file.
<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/my_linear_anim"
    android:delay="1"
    android:animationOrder="normal"
    />
  • Let's look at the xml file of our special makeup animation
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    >
    <translate
        android:fromXDelta="-50%p"
        android:toYDelta="0"
        />
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"/>
</set>
  • The code is simple, and there's nothing to say. Notice the delay attribute here.
  • Officially, subanimation delay = subitem index delays animation duration
  • Take another look at the code implementation
Animation animation = AnimationUtils.loadAnimation(this,R.anim.my_linear_anim);

        LayoutAnimationController controller = new LayoutAnimationController(animation,1);
        controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
        
        LinearLayout linearLayout = findViewById(R.id.main_Layout);
        linearLayout.setLayoutAnimation(controller);
  • No explanation
  • But let's say that this is only useful for the first time. For example, if you apply this to ListView, there is no animation when you add Item manually, as mentioned in the official document of VIewGroup.
-android:layoutAnimation        Defines the layout animation to use the first time the ViewGroup is laid out. Layout animations can also be started manually after the first layout.
  • Maybe it means that animation only works at layout time, but we can start animation manually.
  • Let's first look at some of the basic common methods of this class.
Animation	getAnimation()      //Returns the animation applied to each subitem of the view group that sets this controller.
final Animation	getAnimationForView(View view)      //Returns the animation to be applied to the specified view.
boolean	isDone()    //Indicates whether the layout animation has ended.
void	setAnimation(Animation animation)      //Set the animation to run on each child node of the view group where the layout animation controller is located.
void	setAnimation(Context context, int resourceID) //Set the animation to run on each child node of the view group where the layout animation controller is located.
void	setDelay(float delay)//    Set the delay as part of the animation duration to compensate for children's animation.
void	start()     //Start animation.

Take a look at his subclass GridLayout Animation while the iron is hot

xml attribute

  • In addition to inheriting all the attributes of the parent LayoutAnimationController, he has his own attributes
Android: Column Delay: Delay at the beginning of each column of animation. The value type and meaning are the same as rowDelay. 
android:direction gridview animation direction.
                    There are four values: left_to_right: column, animation from left to right
                    right_to_left: Column, animation from right to left
                    top_to_bottom: Line, animation from top to bottom
                    bottom_to_top: Line, animate from bottom to top
                    These four values can be connected by |, so that multiple values can be taken. Clearly left_to_right and right_to_left are mutually exclusive, while top_to_bottom and bottom_to_top are mutually exclusive. If the direction field is not specified, the default value is left_to_right | top_to_bottom; that is, top-down, left-to-right. 
Android: Direction Priority Direction Priority. The values of row, collumn and none are row-first, column-first, and non-priority (simultaneous); the specific meaning will be discussed later. 
android:rowDelay: Delay at the beginning of each action picture. Like Layout Animation, you can take percentages or floating-point numbers. The value means that the current android:animation refers to a multiple of the animation time. 
  • Actually, it's basically the same as Layout Animation Controller.
  • Look at the code
<gridLayoutAnimation
    xmlns:android="http://schemas.android.com/apk/res/android"

    android:rowDelay="75%"
    android:columnDelay="60%"
    android:directionPriority="none"
    android:animation="@anim/my_linear_anim"

    />
  • Then change the main layout to GridLayout
<GridLayout
        android:id="@+id/main_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="3"
        android:layoutAnimation="@anim/my_gridlayoutanimation"
        android:verticalSpacing="10dp">
        
          ----
          
   </GridLayout>       
  • Well, the rest are the same, so it's no longer explained. Let's talk about it according to the specific situation.

Posted by sushiX on Thu, 16 May 2019 20:11:03 -0700