Android仿微信图片放大动画

作者: Eric__li | 来源:发表于2016-07-06 18:01 被阅读3553次
    真相.gif
    #今年三月份直接上手做的android,代码写的不规范,有问题希望指出,谢谢(app数英)
    类似于微信 图片浏览的效果,我的做法是在两个activity A\B之间传递图片的位置信息
    思路:在activity A的list view上有一张图片,通过方法获取到此image view相对于 window 的坐标(也就是 距离手机屏幕上侧和左侧的距离),然后将这些参数传递给 activity B,此时activity B创建一个 image view,image view的宽高是 activity A 里点击的图片的宽高,然后设置 margin left  margin top,此时就造成一种假象(activity a 的图片直接传递到了 activity B),下面就是 缩放代码
    
    注意:根据你的代码 可能 activity a 里边计算出来的 上侧距离可能要减去 活着加上  状态条的高度,具体根据个人代码判断。
    
    上边的 gif  只是粗略的演示,如有疑问,可以留言 一同解决
    
    下边是部分主要代码:
    
    #activity A
    //获取上边距,左边距,以及图片宽高
    //可能几个人计算出的margintop要减去 状态栏高度
    int[] position = new int[2];
    headerImageV.getLocationInWindow(position);
    int margin_top = position[1];
    int margin_left = position[0];
    int width = headerImageV.getWidth();
    int height = headerImageV.getHeight();
    Intent intent = new Intent(getActivity(), EnlargeimagevActivity.class);
    intent.putExtra(EnlargeimagevActivity.IMG_URL, personModel.getAvatar_320());startActivity(intent);
    //由于是在已发布的项目上更改的代码,我这只是简单的演示, 所以没有做参数传递, 直接在b页面写死的 
    
    #activity B
    //由于我使用的第三方库 PhotoView(处理图片放大缩小),实际上我的图片并不是正方形(我这边放大的图片和手机的比例一样),所以下边高度及 缩放比例的计算会出现不同
    
    final int width = 495;
    final int height = (int)((float)Constant.getScreenHeight(this)/Constant.getScreenWidth(this) * width);
    final int mar_left = 45;
    final int mar_top = 1030;
    RelativeLayout.LayoutParams para = new RelativeLayout.LayoutParams(width, height);
    para.leftMargin = mar_left;
    para.topMargin = mar_top - (height/2 - width/2);
    layout.addView(bigImage, para);
    
    //水平 和 竖直方向上的 偏转量,一定要设置
    bigImage.setPivotX(0f);
    bigImage.setPivotY(0f);
    final float startScale = (float)width / Constant.getScreenWidth(this);
    final float startHeightScale = ((float)height / Constant.getScreenHeight(this));
    
    //AnimationSet提供了一个把多个动画组合成一个组合的机制,并可设置组中动画的时序关系,如同时播放,顺序播放等
    //解释,2秒内 bigimage 的x由 mar_left 到0;
    //bigimage的y由mar_top到0;
    //然后缩放比例
    //起初我写的是//with(ObjectAnimator.ofFloat(bigImage,View.SCALE_X,startScale,1f)).
    //发现并没有效果, 我一直以为 最大只能1f,后来实验下才知道
    //如有错误,请指出
    AnimatorSet set = new AnimatorSet();
    set.play(ObjectAnimator.ofFloat(bigImage,View.X,mar_left,0)).        
                with(ObjectAnimator.ofFloat(bigImage, View.Y, mar_top - (height / 2 - width / 2), 0)).        
                with(ObjectAnimator.ofFloat(bigImage,View.SCALE_X,startScale*(1/startScale),1f*(1/startScale))).        
                with(ObjectAnimator.ofFloat(bigImage, View.SCALE_Y, startHeightScale * (1 / startHeightScale), 1f * (1 / startHeightScale)));
    set.setDuration(2000);
    set.setInterpolator(new DecelerateInterpolator());
    set.start();
    
    
    //点击缩小,返回 activity A
    Constant.bindImage(bigImage, imgurl, false);
    bigImage.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {    
          @Override   
          public void onPhotoTap(View view, float x, float y) {        
                AnimatorSet set = new AnimatorSet();        
                set.play(ObjectAnimator.ofFloat(bigImage,View.X,0,mar_left)).
                with(ObjectAnimator.ofFloat(bigImage,View.Y, 0,mar_top - (height/2 - width/2))).                
                with(ObjectAnimator.ofFloat(bigImage,View.SCALE_X,1f*(1/startScale),startScale*(1/startScale))).                
                with(ObjectAnimator.ofFloat(bigImage,View.SCALE_Y,1f*(1/startHeightScale),startHeightScale*(1/startHeightScale)));        
                set.setDuration(2000);        
                set.setInterpolator(new DecelerateInterpolator());        
                set.addListener(new AnimatorListenerAdapter() {            
                      @Override            
                      public void onAnimationEnd(Animator animation) {                
                            super.onAnimationEnd(animation);                
                            finish();                
                            overridePendingTransition(R.anim.slide_other, R.anim.slide_other);            
                      }            
                      @Override            
                      public void onAnimationCancel(Animator animation) {                
                            super.onAnimationCancel(animation);            
                      }        
          });        
          set.start();    
    }});
    

    相关文章

      网友评论

      • hfk:三月份到现在,很不错的说
        Eric__li:@hfk 嗯,都得学,我是把整个项目全给重写啦,网上用的布局拉伸,越到后来越不好用
        hfk:@Eric__li 你写的这个,在github上有相应的框架,好像是官方写的,很不错的说,可以借鉴下
        Eric__li:@hfk 代码重写了两次,实用的第三方有些写着写着就感觉不好啦
      • 2e33fd6a4e62:Android明明有共享元素,比这个体验好多了
        Eric__li:@r17171709 谢啦
        皮球二二:@Eric__li ActivityOptions,github有兼容低版本的,官方是5.0以上
        Eric__li:@NeoPi 嗯,谢谢指出,我去看看,iOS 可以把控件直接传递,安卓的我没找到方法
      • tttony3:谢谢分享 之前想过,想到的是执行完缩放动画再跳转,效果太差 原来是先跳转
        Eric__li:@tttony3 这个只要把 activity设置透明就可以啦,能做的和ios一个样

      本文标题:Android仿微信图片放大动画

      本文链接:https://www.haomeiwen.com/subject/homkjttx.html