今天看了下别人写的抽屉效果源码,恩...简单来说非常繁杂,手势+计算写了很长代码,大概像下面这样,总共写了两百多行...
别人的开源代码.png
然后我就尴尬了...难道抽屉效果真的有这么复杂吗?
所谓抽屉效果,一般都是左滑或右滑出现新视图,然后对原有视图做点位移或者缩放动画.个人感觉Scrollerview很契合这个属性,那么就让我们动手试试看吧
实现思路
1.首先, Scrollerkview自带滚动这样就解决了滑动手势的问题.
2.其次,我们知道Scrollerview有个contentOffset的属性可以用来设置当前显示的x和y的位置,可以利用这个属性来做点文章
3.利用子view的transform属性,轻松实现缩放效果
总体布局大致如下:
界面架构.png
具体实现
1.按照界面架构图添加对应的View并设置offset
2.在scrollViewDidScroll代理方法中设置渐变大小
比如:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGFloat xy = scrollView.contentOffset.x/_leftView.frame.size.width; _rightView.transform = CGAffineTransformMakeScale(0.75+0.25*xy,0.75+0.25*xy); }
0.75表示最终缩放比例(也就是完全滑动结束后的缩放比例)
0.25表示受滑动影响的比例(和最终比例之和为1.0)
两行代码解决!
很给力有木有!
最后,我们加上一个复位点,如果滑动进行到一半时松开,利用动画进行还原
if (scrollView.contentOffset.x < leftViewWidth*0.5) { [UIView animateWithDuration:0.3 animations:^{ scrollView.contentOffset = CGPointMake(0, 0); }]; } else { [UIView animateWithDuration:0.3 animations:^{ scrollView.contentOffset = CGPointMake(leftViewWidth, 0); }]; }
写作不易,如果这篇文章帮助到了你,不妨点个喜欢吧~
最后附上Demo地址:
https://github.com/WeiTChen/DrawerAnimation
网友评论