Android开发：带动画的分享效果

2023-01-06 20:28:26

这几天做了个带动画的分享页面。如今把它分享出来，假设你认为实用，请直接使用，避免反复造*

先看下效果图

Android开发：带动画的分享效果

认为仅仅是看效果图不明显。那么用手机扫描以下的二维码下载安装包：

aaarticlea/png;base64,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" alt="这里写图片描写叙述" title="">

这个效果本身没有什么特别的难度，都是用Animator实现的，仅仅是动画效果的代码量有点多。由于分享模块一般都会做，把这个分享出来，想要用的话，就不要反复写这么多行代码了

对于熟悉Animator的人。以下的代码能够略过了

我来看下基本的实现代码，完整的代码看底部的项目Github地址

1. 我用了一个方法。实现进入的效果，加上判定，是否须要隐藏二维码页面

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();

    }

在Animator中实现x轴跟Y轴，还有缩放的效果。有心人可能会发现，为什么我移动的參数都是0f呢，那么起始的值跑到哪里去了，请接着看第二点。

2. 初始化位置

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;

            }

        });

初始化位置的方法，要放在addOnPreDrawListener中，这就是为什么在上一点中，仅仅要把值设成0f就能够的原因

3. 移动出去的动画

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();

    }

跟移动进来的动画大同小异，我就不复述了

4. 刚開始打开页面的时候，启动动画的方法：

tvFriend.post(new Runnable() {

            @Override

            public void run() {

                moveInAnim(false);

            }

        });

用post的方法，能够非常好的实现一開始的动画，假设直接在onResume中调用，或者其它的地方调用。就会出现卡顿，至于为什么这种方法能够。或者说有没有更好的的方法，希望有熟悉handle之类的人来解释下，感谢了

5. 注意的地方

有些手机会有默认的页面切换动画，比方我的M2手机就是向左滑动。退出就是向右滑动，为了避免有些手机的默认动画，能够在启动页面和退出页面的代码后面，加上例如以下的代码，避免出现默认的切换效果

overridePendingTransition(0, 0);

项目的源码我放到了Github。欢迎查看！

有不论什么疑问或者探讨了，欢迎留言或者联系我

上一篇：码云平台IDEA系列的插件使用


下一篇：WebSocket介绍，与Socket的区别