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

简介

做过好些电商项目，整理了一些常见的动画效果和页面布局贡献出来，希望对各位有帮助。（图片素材都来自于千库网）

该开源项目有object-c和swift两种版本。

实现功能

refreshHeader的重写，购物车动画，仿京东详情简单布局，分类页面，collectionView列表形布局及其cell左滑动画，header头拉伸动画等。

首页

headerRefresh演示.gif

1. 广告轮播和广告翻滚
使用的两个三方库SDCycleScrollView和RollingNotice，源码很优秀，建议去阅读。SDCycleScrollView，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{

}
}];

注：由于代码比较多，下面不会再贴上代码，可以去我项目里面看
项目地址点击进入

3. 添加购物车动画

购物车动画演示.gif

主要使用UIBezierPath和CABasicAnimation，实现的功能。由path画出路径，再由CABasicAnimation操作图层的移动，旋转和缩放。参考源码地址点击进入

4. 仿京东详情布局

详情布局演示.gif

主视图是一个scrollview，能左右滑动，也可以由顶部segmentedControl点击来控制。 详情可以上下拖拽，上面是列表，下面是网页。

5. 半模态动画

SemiModal动画演示.gif

使用的一个三方库LPSemiModalView，需要对CATransform3D以及矩阵有所了解，然后才能比较容易理解源码。LPSemiModalView

6. 仿京东详情轮播

仿京东详情轮播效果.gif

相关逻辑并不复杂，通过scrollView嵌套实现，左右滑时，需要操作的减速对象不一样，要实时切换。代码注释详细，进行了封装，自定义程度高。

分类

分类演示.gif

很简单的一个布局，左边tableview，右边collectionView，主要是在点击左边tableView时，做了个偏移判断，点击靠下（或者靠上）时，如果下面（或者上面）还有内容没显示，则会偏移一定距离。

购物车

collectionCell左滑动画演示.gif

用collectionview实现的上面列表显示，下面方块显示。UICollectionViewLayout这是个很强大的布局容器，感兴趣的可以去研究研究。
然后我在这里自定义了一个左滑cell，定义得很简单，扩展性也比较强。中途遇到各了种坑，主要是cell内部滑动手势和collectionview的滑动手势冲突，还有cell之间互斥的问题（只能划出一个cell）。这些问题都已解决。

我的

header拉伸动画演示.gif

一个简单的header拉伸动画，当时实现的时候我是对tableviewheader表头进行拉伸，但是经过多次实践发现坑比较多，效果倒是能实现。然后又去网上搜索，发现还有另一种方式，通过调整tableview的上边距，嵌入一个imageview来实现，感觉比较友好，我就换成了这种方式来实现。

总结

做过几款电商项目，感觉都大同小异，积累多了，功能实现起来也比较快速，要是有更好的想法我会在添加进去。

项目地址点击进入