仿微信查看大图

第一次写博客,好激动啊
最近公司项目里需要实现一个仿微信图片查看大图效果,纠结了很久到底用什么去写,后来考虑还是用动画来实现。
ok,开始正题,先说说需求,在聊天记录里会有图片消息,点击图片显示大图,解决思路是用两个ImageView,一个显示小图,一个全屏显示大图,当然小图是在RecyclerView里面,大图在FrameLayout的最上层,
首先获取小图片的部分信息,包括相对Activity的坐标,小图宽高,然后计算出大图初始时的位置,缩放比例,注意此处我将这些属性定义为全局变量,因为后面隐藏大图时还需要用到这些值,看代码

img_big.setVisibility(View.VISIBLE);
        if(activityW == 0 || activityH == 0) {
            activityW = findViewById(android.R.id.content).getWidth();
            activityH = findViewById(android.R.id.content).getHeight();
        }
        //缩放比例e
        scaleX = (smallW*1f)/activityW;
        scaleY = (smallH*1f)/activityH;
        //将大图缩放到指定大小
        img_big.setScaleX(scaleX);
        img_big.setScaleY(scaleY);
        //将大图移动到指定位置
        translateX = (activityW - smallW)/2 - smallX;
        translateY = (activityH - smallH)/2 - smallY;
        img_big.setTranslationX(-translateX);
        img_big.setTranslationY(-translateY);
        //开始缩放动画
        ObjectAnimator oa1 = ObjectAnimator.ofFloat(img_big,"scaleX",scaleX,1f);
        ObjectAnimator oa2 = ObjectAnimator.ofFloat(img_big,"scaleY",scaleY,1f);
        ObjectAnimator oa3 = ObjectAnimator.ofFloat(img_big,"translationX",-translateX,0);
        ObjectAnimator oa4 = ObjectAnimator.ofFloat(img_big,"translationY",-translateY,0);
        AnimatorSet set = new AnimatorSet();
        set.playTogether(oa1,oa2,oa3,oa4);
        set.setDuration(Constant.ANIMATION_TIME_DEFAULT);
        set.start();

在最开始我们需要得到小图片的位置信息,因为小图是在RecyclerView里面,而里面又有很多不同的其他类型的ViewHolder,我也就懒得写什么interface,直接在小图的点击事件里面用广播将我们需要的信息发了出来,然后在需要的地方拦截这个广播,在这里为了避免加载大图初期可能出现的未加载出图片的情况,我把小图的drawable转为bitmap也通过广播的形式发了出来,然后用Glide将这个bitmap用作placeholder,代码就不贴了。
完成了大图的查看,在缩放回去就简单了,只需要将上一步操作的动画属性修改一下就ok,然后给Animation加一个监听(为了隐藏大图面板)


        ObjectAnimator oa1 = ObjectAnimator.ofFloat(img_big,"scaleX",1f,scaleX);
            ObjectAnimator oa2 = ObjectAnimator.ofFloat(img_big,"scaleY",1f,scaleY);
            ObjectAnimator oa3 = ObjectAnimator.ofFloat(img_big,"translationX",0,-translateX);
            ObjectAnimator oa4 = ObjectAnimator.ofFloat(img_big,"translationY",0,-translateY);
            AnimatorSet set = new AnimatorSet();
            set.playTogether(oa1,oa2,oa3,oa4);
            set.setDuration(Constant.ANIMATION_TIME_DEFAULT);
            set.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {

                }

                @Override
                public void onAnimationEnd(Animator animation) {
                    img_big.setVisibility(View.GONE);
                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

            }
        });
        set.start();

至此,整个效果也就差不多完成了
另外求大神指导怎么从手机上录制gif

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值