Android development: Share effects with animations and android animations

Android development: Share effects with animations and android animations

I have made an animation sharing page over the past few days. Now I will share it with you. If you find it useful, please use it directly to avoid repeating the wheel.

Let's take a look at it first.

If it is not obvious, scan the following QR code to download the installation package:

This effect is not particularly difficult. It is implemented using Animator, but the amount of code for the animation effect is a bit large, because the sharing module usually does this. If you want to use it, do not repeat so many lines of code.

For people familiar with Animator, the following code can be skipped

Let me take a look at the main implementation code. For the complete code, see the Github address of the project at the bottom.

1. I used a method to achieve the entry effect, and added the determination to determine whether to hide the QR code page.

private void moveInAnim(boolean isHideCode) {        ObjectAnimator friendAnimatorX = ObjectAnimator.ofFloat(tvFriend, "TranslationX", 0);        ObjectAnimator friendAnimatorY = ObjectAnimator.ofFloat(tvFriend, "TranslationY", 0);        ObjectAnimator timelineAnimatorX = ObjectAnimator.ofFloat(tvTimeline, "TranslationX", 0);        ObjectAnimator timelineAnimatorY = ObjectAnimator.ofFloat(tvTimeline, "TranslationY", 0);        ObjectAnimator qrcodeAnimatorX = ObjectAnimator.ofFloat(tvQrcode, "TranslationX", 0);        ObjectAnimator qrcodeAnimatorY = ObjectAnimator.ofFloat(tvQrcode, "TranslationY", 0);        ObjectAnimator copyAnimatorX = ObjectAnimator.ofFloat(tvCopylink, "TranslationX", 0);        ObjectAnimator copyAnimatorY = ObjectAnimator.ofFloat(tvCopylink, "TranslationY", 0);        AnimatorSet set = new AnimatorSet();        set.setDuration(ANIM_TIME);        if (isHideCode) {            ObjectAnimator animatorX = ObjectAnimator.ofFloat(tvCode, "ScaleX", 0.1f);            ObjectAnimator animatorY = ObjectAnimator.ofFloat(tvCode, "ScaleY", 0.1f);            set.addListener(new AnimatorListenerAdapter() {                @Override                public void onAnimationEnd(Animator animation) {                    tvCode.setVisibility(View.INVISIBLE);                }            });            set.playTogether(friendAnimatorX, friendAnimatorY, timelineAnimatorX, timelineAnimatorY                    , qrcodeAnimatorX, qrcodeAnimatorY, copyAnimatorX, copyAnimatorY, animatorX, animatorY);        } else {            set.setInterpolator(new FastOutSlowInInterpolator());            set.playTogether(friendAnimatorX, friendAnimatorY, timelineAnimatorX, timelineAnimatorY                    , qrcodeAnimatorX, qrcodeAnimatorY, copyAnimatorX, copyAnimatorY);        }        set.start();    }

The implementation of the X and Y axes in Animator also has the scaling effect. Some people may find out why all the parameters I moved are 0f, so where does the starting value go, next, let's look at the second point.

2. Initialization location

tvFriend.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {            @Override            public boolean onPreDraw() {                tvFriend.getViewTreeObserver().removeOnPreDrawListener(this);                tvFriend.setTranslationX(-screenWidth / 2);                tvFriend.setTranslationY(-tvFriend.getHeight() * 2);                return false;            }        });        tvTimeline.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {            @Override            public boolean onPreDraw() {                tvTimeline.getViewTreeObserver().removeOnPreDrawListener(this);                tvTimeline.setTranslationX(screenWidth / 2);                tvTimeline.setTranslationY(-tvFriend.getHeight() * 2);                return false;            }        });        tvQrcode.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {            @Override            public boolean onPreDraw() {                tvQrcode.getViewTreeObserver().removeOnPreDrawListener(this);                tvQrcode.setTranslationX(-screenWidth / 2);                tvQrcode.setTranslationY(tvFriend.getHeight() * 2);                return false;            }        });        tvCopylink.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {            @Override            public boolean onPreDraw() {                tvCopylink.getViewTreeObserver().removeOnPreDrawListener(this);                tvCopylink.setTranslationX(screenWidth / 2);                tvCopylink.setTranslationY(tvFriend.getHeight() * 2);                return false;            }        });

The initialization method should be placed in addOnPreDrawListener, which is why in the previous step, you only need to set the value to 0f.

3. Move the animation

private void moveOutAnim(boolean isFinishActivity, boolean isShowCode) {        ObjectAnimator friendAnimatorX = ObjectAnimator.ofFloat(tvFriend, "TranslationX", -screenWidth / 2);        ObjectAnimator friendAnimatorY = ObjectAnimator.ofFloat(tvFriend, "TranslationY", -tvFriend.getHeight() * 2);        ObjectAnimator timelineAnimatorX = ObjectAnimator.ofFloat(tvTimeline, "TranslationX", screenWidth / 2);        ObjectAnimator timelineAnimatorY = ObjectAnimator.ofFloat(tvTimeline, "TranslationY", -tvFriend.getHeight() * 2);        ObjectAnimator qrcodeAnimatorX = ObjectAnimator.ofFloat(tvQrcode, "TranslationX", -screenWidth / 2);        ObjectAnimator qrcodeAnimatorY = ObjectAnimator.ofFloat(tvQrcode, "TranslationY", tvFriend.getHeight() * 2);        ObjectAnimator copyAnimatorX = ObjectAnimator.ofFloat(tvCopylink, "TranslationX", screenWidth / 2);        ObjectAnimator copyAnimatorY = ObjectAnimator.ofFloat(tvCopylink, "TranslationY", tvFriend.getHeight() * 2);        AnimatorSet set = new AnimatorSet();        set.setDuration(ANIM_TIME);        if (isShowCode) {            addQrcode();            ObjectAnimator animatorScaleX = ObjectAnimator.ofFloat(tvCode, "ScaleX", 1f);            ObjectAnimator animatorScaleY = ObjectAnimator.ofFloat(tvCode, "ScaleY", 1f);            animatorScaleX.setInterpolator(overshootInterpolator);            animatorScaleY.setInterpolator(overshootInterpolator);            set.playTogether(friendAnimatorX, friendAnimatorY, timelineAnimatorX, timelineAnimatorY                    , qrcodeAnimatorX, qrcodeAnimatorY, copyAnimatorX, copyAnimatorY, animatorScaleX, animatorScaleY);        } else {            set.playTogether(friendAnimatorX, friendAnimatorY, timelineAnimatorX, timelineAnimatorY                    , qrcodeAnimatorX, qrcodeAnimatorY, copyAnimatorX, copyAnimatorY);        }        if (isFinishActivity) {            set.addListener(new AnimatorListenerAdapter() {                @Override                public void onAnimationEnd(Animator animation) {                    finish();                    overridePendingTransition(0, 0);                }            });        }        set.start();    }

Similar to moving animations, I will not repeat them.

4. Start the animation at the beginning:

tvFriend.post(new Runnable() {            @Override            public void run() {                moveInAnim(false);            }        });

The post method can be used to implement the animation at the very beginning. If it is called directly in onResume or in other places, it will get stuck. As for why this method works, or is there any better way? I hope someone familiar with handle can explain it. Thank you.

5. Notes
Some mobile phones have default page switching animations. For example, my M2 mobile phone slides to the left and to the right. To avoid some Mobile Phone Default animations, you can add the following code after the code on the startup and exit pages to avoid the default switching effect.

overridePendingTransition(0, 0);

ProjectSource codeI put it on Github. Please check it out!

If you have any questions or discussions, please leave a message or contact me.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.