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

原创 2015年07月10日 16:19:15

这几天做了个带动画的分享页面,现在把它分享出来,如果你觉得有用,请直接使用,避免重复造轮子

先看下效果图
这里写图片描述

觉得只是看效果图不明显,那么用手机扫描下面的二维码下载安装包:

这里写图片描述

这个效果本身没有什么特别的难度,都是用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,欢迎查看!

有任何疑问或者探讨了,欢迎留言或者联系我

Android 5.X Activity过渡动画,以及漂亮的共享元素效果

曾经的Android在Activity进行跳转的时候,只是非常生硬的进行切换,即使使用overPendingtransition(int inId,int outId)这个方法来给Activity增加...
  • qq_19560943
  • qq_19560943
  • 2017年01月25日 16:38
  • 1553

Android过渡动画之共享元素实现以及遇到的一些问题

android:transitionName="transitionImg"
  • Picasso_L
  • Picasso_L
  • 2015年11月18日 17:30
  • 5869

Android中Activity切换时共享视图元素的切换动画(5.0以上)

说来这个的背景非常简单,经常在使用图片列表的时候就会想,如果“列表中的图片放大到整个屏幕”作为 Activity 的补间动画,就非常完美了。就像这样:Android 5.0 Lollipop 的 SD...
  • cnzx219
  • cnzx219
  • 2015年07月30日 07:22
  • 6489

Android 动画-共享元素动画

Android 转场 共享元素动画 ShareElement Animation
  • A_LiuHaiYang
  • A_LiuHaiYang
  • 2017年05月07日 13:41
  • 859

共享动画的实现(AndroidL及以上)

共享动画的实现(AndroidL及以上)效果图:实现步骤:1.主题设置Activity的主题下添加如下元素,开启支持动画,并且Activity必须继承AppCompatActivitytrue2 .前...
  • qq_26971803
  • qq_26971803
  • 2017年01月11日 20:16
  • 337

Android 5.0学习之Activity共享元素过渡动画

前言 Activity Transition: 提供了三种Transition类型: 进入:一个进入的过渡(动画)决定activity中的所有的视图怎么进入屏幕。 退出:一个退出的过...
  • nbalichaoq
  • nbalichaoq
  • 2016年12月26日 17:09
  • 887

android转场动画&共享元素&另外一种动画Transition

动画发展史:  从API 1就存在的Drawable Animation和View Animation,以及API 11(Android 3.0)以后加入的Property Animation。而过渡...
  • musk6
  • musk6
  • 2017年01月18日 10:41
  • 726

Android 5.0学习之Activity过渡动画

前言 Activity Transition: 提供了三种Transition类型: 进入:一个进入的过渡(动画)决定activity中的所有的视图怎么进入屏幕。 退出...
  • ljx19900116
  • ljx19900116
  • 2014年12月08日 18:47
  • 39911

Android中Activity切换时共享视图元素的切换动画(4.x兼容方案)

https://github.com/takahirom/PreLollipopTransition http://www.bubuko.com/infodetail-1007071.html ...
  • daditao
  • daditao
  • 2015年09月14日 11:40
  • 2888

你不知道的Android 5.0转场共享动画实现炫酷效果

前两天,用圆形动画在Android L以上实现了一个炫酷的动画效果,今天就来用Android的共享动画来实现一个炫酷的转场动画。 共享动画的前提是最低版本Android5.0,这是Android5.0...
  • tangmanong
  • tangmanong
  • 2016年12月08日 22:44
  • 1836
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android开发:带动画的分享效果
举报原因:
原因补充:

(最多只允许输入30个字)