ios 电商demo（实现各种常见动画效果和页面布局）

Linux编程 点击右侧关注，免费入门到精通！

作者丨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

 推荐↓↓↓ 

长

按

关

注

?【16个技术公众号】都在这里！

涵盖：程序员大咖、源码共读、程序员共读、数据结构与算法、黑客技术和网络安全、大数据科技、编程前端、Java、Python、Web编程开发、Android、iOS开发、Linux、数据库研发、幽默程序员等。

万水千山总是情，点个 “ 好看” 行不行