900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 类微信朋友圈图片放大效果 点击图片放大动画

类微信朋友圈图片放大效果 点击图片放大动画

时间:2022-01-09 16:26:01

相关推荐

类微信朋友圈图片放大效果 点击图片放大动画

要用到的 就是坐标转换方法

-(CGRect)convertRect:(CGRect)recttoView:(UIView*)view;

1:我这里演示的是 tableviewHeader上子view 里的一张图片,将其添加到新的view上,并且 由此图片相对于 手机坐标系的点开始放大(类似于微信朋友圈图片的点击放大)。

因为是在项目中使用的, 所以只贴出部分代码, 如有需要可联系,Android的 随后更新

(1):获取所需要放大的 图片frame 在 目标视图 _headerView中的 react

CGRect rectInCell = [_headerViewconvertRect:_headerView.headerBgView.frametoView:_headerView];

(2):获取上一步得到的 react 在 tableview 中的 react

CGRect rectInTableView = [_headerViewconvertRect:rectInCell toView:self.tv];

(3):同上,这样就一步一步的将 所需放大的 图片的 frame 转换到了 相对于屏幕的 位置

CGRect original = [self.tvconvertRect:rectInTableViewtoView:self.view];

上边三行代码可以用一行来解决

将_headerView.headerBgView.frame从_headerView 转换到当前self.view中,并返回self.view中的位置

CGRect re2 = [self.viewconvertRect:_headerView.headerBgView.framefromView:_headerView];

放大过程的思路,用一个容器来承载你所需放大的图片( [.. addsubview] ),然后 [uiview animate…]动画,将图片移动到你所需的位置即可,具体情况根据你的需求来定,此时tableview 上的图片就被你 add到了新的view上边,然后就是点击缩小。

缩小过程思路

将第三步计算出的 react 保留下, 因为缩小图片要按照原轨迹返回,点击事件触发 [uiview animate…]动画,将图片缩小到目标大小 (第三步计算结果original),然后动画结束的时候, tableview 的headerview 重新 addsubview 放大的图片。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。