第一次写博客,好激动啊
最近公司项目里需要实现一个仿微信图片查看大图效果,纠结了很久到底用什么去写,后来考虑还是用动画来实现。
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