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

96
cfxiaoxixi
4.3 2018.07.27 16:41* 字数 860

简介

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

实现功能

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

首页

headerRefresh演示.gif

1. 广告轮播和广告翻滚
使用的两个三方库SDCycleScrollView和RollingNotice,源码很优秀,建议去阅读。SDCycleScrollViewRollingNotice

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来实现,感觉比较友好,我就换成了这种方式来实现。

总结

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

项目地址点击进入

日记本
Web note ad 1