![1081255447.jpg 640?wx_fmt=jpeg](https://i-blog.csdnimg.cn/blog_migrate/021a8d0db4d9d79066f9da0c4e0e3818.jpeg)
作者丨cfxiaoxixi
https://www.jianshu.com/p/5b2815b60288
简介
做过好些电商项目,整理了一些常见的动画效果和页面布局贡献出来,希望对各位有帮助。(图片素材都来自于千库网)
实现功能
refreshHeader的重写,购物车动画,仿京东详情简单布局,分类页面,collectionView列表形布局及其cell左滑动画,header头拉伸动画。
首页
headerRefresh演示.gif
1. 广告轮播和广告上滑翻转
使用的两个三方库SDCycleScrollView和RollingNotice,源码很优秀,建议去阅读。
SDCycleScrollView,RollingNotice
https://github.com/gsdios/SDCycleScrollView
https://github.com/maltsugar/RollingNotice
2. MJRefreshHeader的简单重写
继承MJRefreshNormalHeader,去父类(MJRefreshComponent)里面查看会发现里面有重写布局和监听头部位移的方法,我主要就是重写了下面几个方法:
- (void)prepare
{
[super prepare];
}
- (void)placeSubviews
{
[super placeSubviews];
}
- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change
{
[super scrollViewContentOffsetDidChange:change];
然后在refreshBlock回调里面完成两种偏移量的不同处理:
WeakSelf(self);
_collectionView.mj_header = [CFRefreshHeader headerWithRefreshingBlock:^{
if (weakself.headerOffsetY < pass150Offset) {
}
else{
}
}];
注:由于代码比较多,下面不会再贴上代码,可以去我项目里面看
项目地址
https://github.com/chenfengxiaoxixi/OnlineShopDemo
购物车动画演示.gif
3. 添加购物车动画
主要使用UIBezierPath和CABasicAnimation,实现的功能。由path画出路径,再由CABasicAnimation操作图层的移动,旋转和缩放。
参考源码地址
https://www.jianshu.com/p/bd650158d44c
详情布局演示.gif
4. 仿京东详情布局
主视图是一个scrollview,能左右滑动,也可以由顶部segmentedControl点击来控制。 详情可以上下拖拽,上面是列表,下面放了个网页。
参考源码地址
https://www.jianshu.com/p/569fa40bb193?from=jiantop.com
SemiModal动画演示.gif
5. 半模态动画
使用的一个三方库LPSemiModalView,需要对CATransform3D以及矩阵有所了解,然后才能比较容易理解源码。
github地址
https://github.com/litt1e-p/LPSemiModalView
分类
分类演示.gif
很简单的一个布局,左边tableview,右边collectionView,主要是在点击左边tableView时,做了个偏移判断,点击靠下(或者靠上)时,如果下面(或者上面)还有内容没显示,则会偏移一定距离。
购物车
collectionCell左滑动画演示.gif
用collectionview实现的上面列表显示,下面方块显示。UICollectionViewLayout这是个很强大的布局容器,感兴趣的可以去研究研究。
然后我在这里自定义了一个左滑cell,定义得很简单,扩展性也比较强。中途遇到各了种坑,主要是cell内部滑动手势和collectionview的滑动手势冲突,还有cell之间互斥的问题(只能划出一个cell)。这些问题都已解决。
参考博客
https://www.jianshu.com/p/ecd8ad830098
我的
header拉伸动画演示.gif
一个简单的header拉伸动画,当时实现的时候我是对tableviewheader表头进行拉伸,但是经过多次实践发现坑比较多,效果倒是能实现。然后又去网上搜索,发现还有另一种方式,通过调整tableview的上边距,嵌入一个imageview来实现,感觉比较友好,我就换成了这种方式来实现。
总结
做过几款电商项目,感觉都大同小异,积累多了,功能实现起来也比较快速,要是有更好的想法我会在添加进去。
项目地址
https://github.com/chenfengxiaoxixi/OnlineShopDemo
推荐↓↓↓
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/43ad5a9db68807cba1574dedf3368bcf.jpeg)
长
按
关
注
?【16个技术公众号】都在这里!
涵盖:程序员大咖、源码共读、程序员共读、数据结构与算法、黑客技术和网络安全、大数据科技、编程前端、Java、Python、Web编程开发、Android、iOS开发、Linux、数据库研发、幽默程序员等。
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/9e223bfeb465f56725f67d506684b799.png)