Activity 切换动画(小米图库列表进入详情页,图片从固定位置放大进入,缩小退出)
2015-03-21 13:44
645 查看
直接上效果图
ok,来分析下如何实现的吧
item 在屏幕中的坐标,可以通过
来获取,记得把 Activity 的切换动画去掉
2、进入动画参数的 获取
获取列表页传入的值
计算动画执行的参数
因为是在 OnCreate方法中执行的,不能直接获取的 View 的大小,因为这时 View 尚未测量完成,需要功过监听 View 的绘制来获取,这里计算当前 显示的 View 距离列表 View 的距离及放缩比例;
3、设置动画开始执行的位置
4、开始执行进入动画
这个时候已经启动了 详情页面,所以执行动画以后不需要做任何操作了
来看看这时候的效果图
5、退出动画
这里在动画结束的时候传入了一个 Runnable 对象,这个 Runnable 的作用就是结束详情页面
当你正在动手做的时候你可能会发现这样一个现象,来看看
为什么会这样?我前面写了一遍 blog 手势滑动结束 Activity(一)基本功能的实现,看完你就明白了。
1、属性动画的运用,
2、View 在屏幕上位置的获取,可以通过
int location[] = new int[2] ;
View.getLocationOnScreen(location);
3、在 onCreate 中测量 View 的大小,不能直接获取,需要监听 View 的绘制,或者其他测量完成之后的回掉接口。
点击 下载源码
ok,来分析下如何实现的吧
分析原理
首先确定,这是两个不同的 Activity,从图片列表页跳入到图片详情页;先来看进入详情页时的动画,从列表中所在 item 的位置一直放大到详情页的显示位置,这里我可以先告诉大家,当我们点击了这个 item 的时候,就已经启动了详情页,然后在详情页做相应的动画效果。既然是在详情页做动画效果,就需要在列表页把相应的值传过去,列表页 item 在屏幕上的位置,item 的大小,当然还有图片的资源,然后在详情页计算动画执行的参数。分析了进入动画,那么退出 Activity 的动画就好实现了,跟进入动画相反,但是也是要确定什么时候执行退出动画,这里退出动画也是放在详情页面实现的,当按下返回按钮时,开始执行退出动画,在动画执行完之后,把详情页的 Activity 结束掉;大家会问了,可以把动画放在列表页执行吗?大家仔细想一下就知道,如果是进入动画,肯定是不能的,因为详情页没有启动,有些参数无法知道,比如放大到多大,放大以后的位置是哪里等,但是退出动画是可以的,但比较麻烦,需要把详情页的参数返回给列表页,如果有兴趣可以试着做一下。效果实现
1、传入详情页的参数获取@Override public void onItemClick(View view) { int location[] = new int[2] ; view.getLocationOnScreen(location); int resId = (int) view.getTag(); Bundle bundle = new Bundle() ; bundle.putInt("locationX",location[0]); bundle.putInt("locationY",location[1]); bundle.putInt("width",view.getWidth()); bundle.putInt("height",view.getHeight()); bundle.putInt("resId",resId); Intent intent = new Intent() ; intent.putExtras(bundle); intent.setClass(getActivity(),PicDetailActivity.class) ; getActivity().startActivity(intent); getActivity().overridePendingTransition(0, 0); Log.v("zgy","========view========"+view.getWidth()) ; }
item 在屏幕中的坐标,可以通过
int location[] = new int[2] ; view.getLocationOnScreen(location);
来获取,记得把 Activity 的切换动画去掉
getActivity().overridePendingTransition(0, 0);
2、进入动画参数的 获取
获取列表页传入的值
final int left = getIntent().getIntExtra("locationX", 0); final int top = getIntent().getIntExtra("locationY", 0); final int width = getIntent().getIntExtra("width", 0); final int height = getIntent().getIntExtra("height", 0); int resId = getIntent().getIntExtra("resId", 0);
计算动画执行的参数
mImageView.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { mImageView.getViewTreeObserver().removeOnPreDrawListener(this); int location[] = new int[2]; mImageView.getLocationOnScreen(location); mLeft = left - location[0]; mTop = top - location[1]; mScaleX = width*1.0f / mImageView.getWidth(); mScaleY = height*1.0f / mImageView.getHeight(); Log.v("zgy", "========resId========" + mImageView.getWidth()) ; Log.v("zgy", "========resId========" + mScaleY) ; activityEnterAnim(); return true; } });
因为是在 OnCreate方法中执行的,不能直接获取的 View 的大小,因为这时 View 尚未测量完成,需要功过监听 View 的绘制来获取,这里计算当前 显示的 View 距离列表 View 的距离及放缩比例;
3、设置动画开始执行的位置
mImageView.setPivotX(0); mImageView.setPivotY(0); mImageView.setScaleX(mScaleX); mImageView.setScaleY(mScaleY); mImageView.setTranslationX(mLeft); mImageView.setTranslationY(mTop);
4、开始执行进入动画
这个时候已经启动了 详情页面,所以执行动画以后不需要做任何操作了
mImageView.animate().scaleX(1).scaleY(1).translationX(0).translationY(0). setDuration(1000).setInterpolator(new DecelerateInterpolator()).start(); ObjectAnimator objectAnimator = ObjectAnimator.ofInt(mBackground,"alpha",0,255); objectAnimator.setInterpolator(new DecelerateInterpolator()); objectAnimator.setDuration(1000); objectAnimator.start();
来看看这时候的效果图
5、退出动画
mImageView.setPivotX(0); mImageView.setPivotY(0); mImageView.animate().scaleX(mScaleX).scaleY(mScaleY).translationX(mLeft).translationY(mTop). withEndAction(runnable). setDuration(1000).setInterpolator(new DecelerateInterpolator()).start(); ObjectAnimator objectAnimator = ObjectAnimator.ofInt(mBackground,"alpha",255,0); objectAnimator.setInterpolator(new DecelerateInterpolator()); objectAnimator.setDuration(1000); objectAnimator.start();
这里在动画结束的时候传入了一个 Runnable 对象,这个 Runnable 的作用就是结束详情页面
activityExitAnim(new Runnable() { @Override public void run() { finish(); overridePendingTransition(0, 0); } });
当你正在动手做的时候你可能会发现这样一个现象,来看看
为什么会这样?我前面写了一遍 blog 手势滑动结束 Activity(一)基本功能的实现,看完你就明白了。
总结
这篇 blog 的内容也不多,实现起来页不难,只是看大家能不能想到。当然还是涉及到部分知识点:1、属性动画的运用,
2、View 在屏幕上位置的获取,可以通过
int location[] = new int[2] ;
View.getLocationOnScreen(location);
3、在 onCreate 中测量 View 的大小,不能直接获取,需要监听 View 的绘制,或者其他测量完成之后的回掉接口。
点击 下载源码
相关文章推荐
- (六十三)Activity切换动画,包括渐变、flip、某个位置进入等等
- Android动画共享元素(例列表图片放大到详情图片动画)
- 两张图片的交换,以及放大缩小的动画
- Android动画效果 translate、scale、alpha、rotate 切换Activity动画 控件位置调整
- Android动画效果 translate、scale、alpha、rotate 切换Activity动画 控件位置调整
- UIScrollView 放大缩小及同时切换图片
- Android动画效果 translate、scale、alpha、rotate 切换Activity动画 控件位置调整
- 利用Theme自定义Activity进入退出动画
- android设置dialog显示和activity进入退出的动画效果
- Android通过动画实现图片重复放大和缩小
- Android动画效果 translate、scale、alpha、rotate 切换Activity动画 控件位置调整
- Android动画效果 translate、scale、alpha、rotate 切换Activity动画 控件位置调整
- Activity进入与退出的动画
- Activity、PopupWindow 进入,退出动画
- Android切换Activity时的淡入动画和缩小动画
- 图片放大缩小并且文字与图片相对位置不变
- 【andriod】activity 进入退出动画
- Android的Activity屏幕切换动画(ExitAnim)-左右滑动切换(直播退出效果)
- [jQuery]地图浏览:如何实现图片的放大缩小和点击之后的位置居中
- 利用Theme自定义Activity进入退出动画