iOS|iOS 仿支付宝个人主页下拉动效
发现很多App的个人详情页有下拉放大顶部背景图这种动效,本文选择实现类似支付宝个人主页的这种效果,如图:
文章图片
1.gif 原理:
原理也很简单,就是设置tableView的contentInset属性,让向下偏移一定高度开始布局,backHeight就是顶部背景视图的高度:
_tableView.contentInset = UIEdgeInsetsMake(backHeight, 0, 0, 0);
然后在scrollView滑动代理里面动态改变顶部背景视图的高度:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGPoint point = scrollView.contentOffset;
if (point.y < -backHeight) {
CGRect rect = _backImageView.frame;
rect.origin.y = point.y;
rect.size.height = -point.y;
_backImageView.frame = rect;
}
}
注意: 顶部背景视图的imageView需要设置backImageView.clipsToBounds = YES以及backImageView.contentMode = UIViewContentModeScaleAspectFill属性,本案例中下拉的过程中先是逐渐显示图片其余部分,然后再放大显示的,这是因为一开始imageView的宽高比和图片实际宽高比不一致导致的,如果设置成一致,那么一开始下拉的时候就会有放大的效果。
【iOS|iOS 仿支付宝个人主页下拉动效】代码地址:github
推荐阅读
- 2020-04-07vue中Axios的封装和API接口的管理
- iOS中的Block
- 记录iOS生成分享图片的一些问题,根据UIView生成固定尺寸的分享图片
- 2019-08-29|2019-08-29 iOS13适配那点事
- Hacking|Hacking with iOS: SwiftUI Edition - SnowSeeker 项目(一)
- iOS面试题--基础
- 接口|axios接口报错-参数类型错误解决
- iOS|iOS 笔记之_时间戳 + DES 加密
- iOS,打Framework静态库
- 常用git命令总结