Android实现图片点击预览效果(zoom动画)

2024-02-27 04:26:04 57

参考：https://developer.android.google.cn/training/animation/zoom.html

1.创建Views

下面的布局包括了你想要zoom的大版本和小版本的view。

1.ImageButton是小版本的，能点击的，点击后显示大版本的ImageView。

2.ImageView是大版本的，可以显示ImageButton点击后的样式。

3.ImageView一开始是不可见的（invisible），当ImageButton点击后，它会实现zoom动画，就像从ImageButton上扩大显示出来。

2.设置zoom动画

在ImageButton上设置点击事件，执行zoom动画

publicclassZoomActivityextendsFragmentActivity{
//保存下当前动画类，以便可以随时结束动画
privateAnimatormCurrentAnimator;
//系统的短时长动画持续时间（单位ms）
//对于不易察觉的动画或者频繁发生的动画
//这个动画持续时间是最理想的
privateintmShortAnimationDuration;
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_zoom);
//给ImageButton设置点击事件
finalViewthumb1View=findViewById(R.id.thumb_button_1);
thumb1View.setOnClickListener(newView.OnClickListener(){
@Override
publicvoidonClick(Viewview){
//执行zoom动画方法
zoomImageFromThumb(thumb1View,R.drawable.image1);
}
});
//取回系统默认的短时长动画持续时间
mShortAnimationDuration=getResources().getInteger(
android.R.integer.config_shortAnimTime);
}
...
}

3.实现zoom动画

你需要把从正常大小的view到扩大以后的view这个过程作成动画。

1.指定想要zoom的图片给ImageView。（理想情况下，这个bitmap的大小不应该比屏幕大）

2.计算这个ImageView的开始和结束位置

3.把四个点和缩放大小的属性同时作成动画，从开始的状态到结束的状态。这四个动画被添加到AnimatorSet中，方便他们同时执行。

4.当用户再次点击屏幕时，动画要执行回去。一样道理，给ImageView一个View.OnClickListener,然后隐藏ImageView。

privatevoidzoomImageFromThumb(finalViewthumbView,intimageResId){
//如果有动画在执行，立即取消，然后执行现在这个动画
if(mCurrentAnimator!=null){
mCurrentAnimator.cancel();
}
//加载高分辨率的图片
finalImageViewexpandedImageView=(ImageView)findViewById(
R.id.expanded_image);
expandedImageView.setImageResource(imageResId);
//计算开始和结束位置的图片范围
finalRectstartBounds=newRect();
finalRectfinalBounds=newRect();
finalPointglobalOffset=newPoint();
//开始的范围就是ImageButton的范围，
//结束的范围是容器（FrameLayout）的范围
//getGlobalVisibleRect(Rect)得到的是view相对于整个硬件屏幕的Rect
//即绝对坐标，减去偏移，获得动画需要的坐标，即相对坐标
//getGlobalVisibleRect(Rect,Point)中，Point获得的是view在它在
//父控件上的坐标与在屏幕上坐标的偏移
thumbView.getGlobalVisibleRect(startBounds);
findViewById(R.id.container)
.getGlobalVisibleRect(finalBounds,globalOffset);
startBounds.offset(-globalOffset.x,-globalOffset.y);
finalBounds.offset(-globalOffset.x,-globalOffset.y);
//Adjustthestartboundstobethesameaspectratioasthefinal
//boundsusingthe"centercrop"technique.Thispreventsundesirable
//stretchingduringtheanimation.Alsocalculatethestartscaling
//factor(theendscalingfactorisalways1.0).
//下面这段逻辑其实就是保持纵横比
floatstartScale;
//如果结束图片的宽高比比开始图片的宽高比大
//就是结束时“视觉上”拉宽了（压扁了）图片
if((float)finalBounds.width()/finalBounds.height()
>(float)startBounds.width()/startBounds.height()){
//Extendstartboundshorizontally
startScale=(float)startBounds.height()/finalBounds.height();
floatstartWidth=startScale*finalBounds.width();
floatdeltaWidth=(startWidth-startBounds.width())/2;
startBounds.left-=deltaWidth;
startBounds.right+=deltaWidth;
}else{
//Extendstartboundsvertically
startScale=(float)startBounds.width()/finalBounds.width();
floatstartHeight=startScale*finalBounds.height();
floatdeltaHeight=(startHeight-startBounds.height())/2;
startBounds.top-=deltaHeight;
startBounds.bottom+=deltaHeight;
}
//Hidethethumbnailandshowthezoomed-inview.Whentheanimation
//begins,itwillpositionthezoomed-inviewintheplaceofthe
//thumbnail.
//隐藏小的图片，展示大的图片。当动画开始的时候，
//要把大的图片发在小的图片的位置上
//小的设置透明
thumbView.setAlpha(0f);
//大的可见
expandedImageView.setVisibility(View.VISIBLE);
//SetthepivotpointforSCALE_XandSCALE_Ytransformations
//tothetop-leftcornerofthezoomed-inview(thedefault
//isthecenteroftheview).
expandedImageView.setPivotX(0f);
expandedImageView.setPivotY(0f);
//Constructandruntheparallelanimationofthefourtranslationand
//scaleproperties(X,Y,SCALE_X,andSCALE_Y).
AnimatorSetset=newAnimatorSet();
set
.play(ObjectAnimator.ofFloat(expandedImageView,View.X,
startBounds.left,finalBounds.left))
.with(ObjectAnimator.ofFloat(expandedImageView,View.Y,
startBounds.top,finalBounds.top))
.with(ObjectAnimator.ofFloat(expandedImageView,View.SCALE_X,
startScale,1f)).with(ObjectAnimator.ofFloat(expandedImageView,
View.SCALE_Y,startScale,1f));
set.setDuration(mShortAnimationDuration);
set.setInterpolator(newDecelerateInterpolator());
set.addListener(newAnimatorListenerAdapter(){
@Override
publicvoidonAnimationEnd(Animatoranimation){
mCurrentAnimator=null;
}
@Override
publicvoidonAnimationCancel(Animatoranimation){
mCurrentAnimator=null;
}
});
set.start();
mCurrentAnimator=set;
//Uponclickingthezoomed-inimage,itshouldzoombackdown
//totheoriginalboundsandshowthethumbnailinsteadof
//theexpandedimage.
//再次点击返回小的图片，就是上面扩大的反向动画。即预览完成
finalfloatstartScaleFinal=startScale;
expandedImageView.setOnClickListener(newView.OnClickListener(){
@Override
publicvoidonClick(Viewview){
if(mCurrentAnimator!=null){
mCurrentAnimator.cancel();
}
//Animatethefourpositioning/sizingpropertiesinparallel,
//backtotheiroriginalvalues.
AnimatorSetset=newAnimatorSet();
set.play(ObjectAnimator
.ofFloat(expandedImageView,View.X,startBounds.left))
.with(ObjectAnimator
.ofFloat(expandedImageView,
View.Y,startBounds.top))
.with(ObjectAnimator
.ofFloat(expandedImageView,
View.SCALE_X,startScaleFinal))
.with(ObjectAnimator
.ofFloat(expandedImageView,
View.SCALE_Y,startScaleFinal));
set.setDuration(mShortAnimationDuration);
set.setInterpolator(newDecelerateInterpolator());
set.addListener(newAnimatorListenerAdapter(){
@Override
publicvoidonAnimationEnd(Animatoranimation){
thumbView.setAlpha(1f);
expandedImageView.setVisibility(View.GONE);
mCurrentAnimator=null;
}
@Override
publicvoidonAnimationCancel(Animatoranimation){
thumbView.setAlpha(1f);
expandedImageView.setVisibility(View.GONE);
mCurrentAnimator=null;
}
});
set.start();
mCurrentAnimator=set;
}
});
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！

Android实现图片点击预览效果(zoom动画)

热门推荐

随机推荐