仿新浪微薄图片点击放大效果

本文从91top同步而来。

这个动画很常见,网上有很多现成的,比如可以在很火的code4app上搜索。这里,自己实现了一遍,主要谈一下思路。

动画的核心就是确定好初始和最终的frame,这样使用UIView的animaition方法即可。为了代码重用和结构分离,可以设置一个viewController来管理放大动画结束后大图的获取,以及大图的保存等其他操作。

以下是实现过程中的要点:

  1. 设置viewController的modalTransitionStyle方式为UIModalTransitionStyleCrossDissolve,viewController里设置UIImageView的属性smallImgView来保存小图
  2. 使用[UIView animateWithDuration: animations: completion:]实现动画
  3. 放大动画,要确定大图的最终位置,通常iPhone的屏幕320x480,把小图尺寸同比例放大。如果放大后的尺寸没有超出屏幕,则要居中放置。
  4. 放大动画完成后,在completion的block里使用SDWebImage中UIImageView+WebCache方法下载图片。你也可以自行添加进度或者activity的动画。
  5. 点击开始缩小动画,现将viewController dismiss,然后在viewWillDisappear中实现缩小动画。
  6. 缩小动画实现前,现将大图添加到UIWindow,然后通过保存的UIImagView来计算最终的frame。这里使用[self.smallImgView.superview convertRect:self.smallImgView.frame toView:mainWindow]来计算最终的frame
  7. 动画结束后,在comletion的block里将大图从windown上移出

经过测试,图片的动画效果和新浪微薄的效果差不了多少了。家里网络不好,github上不去,有需要的发消息我吧。

posted on 2013-09-06 22:07  scorpiozj  阅读(799)  评论(0编辑  收藏