Recent projects are not urgent, so I have time to summarize what I have learned recently and make a comprehensive summary of my knowledge, which will help me to have a deeper understanding of the knowledge in my work. Today I will make a simple implementation of a simple landing animation effect I have learned, and make it into a GIF chart form.There are size limitations on gif maps, so you can only see such blurred pictures...

                                                            

1. Here I will make a simple description of this landing interface animation. This is to move a small ball from the top to the bottom with the change of the size of the ball, so it will be accompanied by two animations: pan and zoom during the descent.

//First part animation effect display

//translating animation
        ObjectAnimator animator = ObjectAnimator.ofFloat(ivBall, "translationY", 0, 1200);
//Set animation time
        animator.setDuration(2500);
        animator.setInterpolator(new AnticipateOvershootInterpolator());
        //Enlarge Animation
        ObjectAnimator scale = ObjectAnimator.ofFloat(ivBall, "scaleX", 0.5f, 1.5f);
        scale.setDuration(2500);
//Enlarge the size of the y-axis
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(ivBall, "scaleY", 0.5f, 1.5f);
        scaleY.setDuration(2500);

Attention section: Here I am using the effect of property animation, by the way, the difference between property animation and view animation is: simply understand that property animation changes the property value of the control, that is, if you move the control, the position of the control also changes; view animation is visualThe offset of the position does not change the property, which can be interpreted as the movement of the visual effect of the control.

2. The next step is to show an up-and-down animation effect. Here is to set up an animation that is executed three times in a cycle, and with the animation going on, the balls need to become the icons you need. This is mainly to monitor the execution of the animation and replace the picture resources in the middle of the execution.

//Animation Effects Show Part Two

//Animation that bounces up and down three times
ObjectAnimator txAnimation = ObjectAnimator.ofFloat(ivBall, "translationY", 1200, 1000);
//Settings are often 1 second
        txAnimation.setDuration(1000);
//Set to play back once
        txAnimation.setRepeatMode(ValueAnimator.REVERSE);
//Set Repeat Three Times
        txAnimation.setRepeatCount(3);


//Set the ball to icon during animation execution
//Response to Ball Loop Animation
        txAnimation.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                //Animation Starts Executing Calls
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                //The icon gets bigger, and the input box is displayed, and the animation ends
                openWrite();
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                //Animation Cancel Call
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
                count++;
                if (count == 2) {   //The second time you turn a ball into an icon
                    ivBall.setImageResource(R.drawable.daheng);
                }
            }
        });

Note: Here we call a method to listen to the animation execution. When the second time we go to set the image content of the balls, the function of the specific method is already marked in the code.

3. Then there is an upward animation effect with larger icons. This upward animation is the same way as 1, but it just executes in reverse. The next step is the display of the landing layout. During the process of the icon rising, the animation of the landing interface is delayed loading to achieve a difference display.

//Part III Code Display

 //Enlarge icon to 1.5 times
        ObjectAnimator scaleDh = ObjectAnimator.ofFloat(ivBall, "scaleY", 1.5f, 3f);
        scaleDh.setDuration(2000);
        ObjectAnimator scaled = ObjectAnimator.ofFloat(ivBall, "scaleX", 1.5f, 3f);
        scaled.setDuration(2000);
//Set the distance to move
        ObjectAnimator animatorBall = ObjectAnimator.ofFloat(ivBall, "translationY", 1200, 0);
        animatorBall.setDuration(2000);

        //Set the order in which the dialog box opens
        ObjectAnimator llAnimation = ObjectAnimator.ofFloat(llUserInfo, "scaleX", 0, 1);
        llAnimation.setStartDelay(1500);
        //Delay loading logon box information by 0.5s
        llAnimation.setDuration(500);

        //y-axis moving distance
        ObjectAnimator llAnimationY = ObjectAnimator.ofFloat(llUserInfo, "scaleY", 0, 1);
        llAnimationY.setStartDelay(1500);
        //Delay loading logon box information by 0.5s
        llAnimationY.setDuration(500);
//Set Logon Box Display
llAnimation.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                if (llUserInfo.getVisibility() == View.GONE) {
                    llUserInfo.setVisibility(View.VISIBLE);
                }
            }

            @Override
            public void onAnimationEnd(Animator animation) {

            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

//IMPORTANT: The steps here are similar to 1, but we made adjustments when displaying the login box. After the icon moved 0.5s, we displayed the login box and made a zoom-in animation (0.5->1) to create a sense of difference, while listening for the animation at the beginning of the login box to display the login box.

4. When the icon is up and done, we need to move the icon to the left and display the landing Title information.

//Move the icon to the left and display the content
        ObjectAnimator leftAnimator = ObjectAnimator.ofFloat(ivBall, "translationX", 0, -300);
//Delay by two seconds for the above animation to complete
        leftAnimator.setStartDelay(2000);
        leftAnimator.setDuration(500);

//The last step is easy, just move the icon to the left and display the title content before the animation.

Summary: Here I mainly use time attribute animation to do the same effect, of course view animation can also do the same effect.The last thing I want to say is how to combine these individual animations:

//Set Down Animation
        AnimatorSet set = new AnimatorSet();
        AnimatorSet.Builder builder = set.play(animator);
        builder.with(A).with(B).before(C).after(D);
        set.start();

Here I've made a simple set, which runs from D to AB (simultaneous execution) to C in the above code. When the previous animation is not executed, or when it is not finished, the next animation cannot be executed. With builder and setup, we can bind the animation and finish the animation we want to achieve.Yes.

I will not show the specific code, after all, I am still learning, just make a simple note, if you want the code can contact me: WeChat: a18756901908, welcome to progress together.