美文网首页iOS开发知识小集ios实用开发技巧iOS开发技术分享
ios 电商demo(实现各种常见动画效果和页面布局)

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

作者: cfxiaoxixi | 来源:发表于2018-07-27 16:41 被阅读384次

    简介

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

    实现功能

    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{
    
    }
    }];
    

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

    购物车动画演示.gif

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

    详情布局演示.gif

    4. 仿京东详情布局
    主视图是一个scrollview,能左右滑动,也可以由顶部segmentedControl点击来控制。 详情可以上下拖拽,上面是列表,下面放了个网页。参考源码地址点击进入

    SemiModal动画演示.gif

    5. 半模态动画
    使用的一个三方库LPSemiModalView,需要对CATransform3D以及矩阵有所了解,然后才能比较容易理解源码。github地址

    分类

    分类演示.gif

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

    购物车

    collectionCell左滑动画演示.gif

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

    我的

    header拉伸动画演示.gif

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

    总结

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

    项目地址点击进入

    相关文章

      网友评论

      • 溜溜leesin:self.baseWindowNav = [[UINavigationController alloc] init];
        self.baseWindowNav.delegate = self;
        self.baseWindowNav.navigationBar.hidden = YES;
        self.window.rootViewController = self.baseWindowNav;

        设置这个delegate有什么作用呢?:pensive:
        溜溜leesin:@cfxiaoxixi 感谢回复 在跟着写哈哈
        cfxiaoxixi:@溜溜leesin appdelegate中的可以屏蔽掉
        cfxiaoxixi:@溜溜leesin 刚看了下代码,我这个代理有些地方写重了,我是用这个nav代理控制tabbarbar动画用的
      • PGOne爱吃饺子:上传的项目都打不开啊
        PGOne爱吃饺子:有可能是我的Xcode版本太低了
        cfxiaoxixi:@PGOne爱吃饺子 还是和楼下一样的报错吗
      • 6b8eb971715a:The file couldn’t be opened. 打开不了
        cfxiaoxixi:@有原则有底限 因为我这边下载过,没有出现这个问题,你那边解决了吗
        6b8eb971715a:@cfxiaoxixi 不是这个问题 是noScheme 这个
        cfxiaoxixi:可能日志文件冲起突,你去这个网址看看解决方法,http://baijiahao.baidu.com/s?id=1604211774355804468&;wfr=spider&for=pc
      • 辣白菜丶:The file couldn’t be opened.
        CFOnlineShop 里面没东西 pod 也是 应该是xcode 不兼容 你的xcode 版本是多少?
        cfxiaoxixi:@辣白菜丶 没事,有啥问题直接提出来就行
        辣白菜丶:好的谢谢我重新创建然后把你的类拉进来应该就可以看了,有使用自己动手^ v ^ 谢谢@cfxiaoxixi
        cfxiaoxixi:@辣白菜丶 我的是9.3.1的,还没升级最新的
      • 5b3fe8cd7833:git 下载下来 工程打不开。提示 The file couldn’t be opened.
        cfxiaoxixi:@fanfan88 不会吧,我这download下来,运行没问题啊
        cfxiaoxixi:@fanfan88 稍等,我看看

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

      本文链接:https://www.haomeiwen.com/subject/cnowmftx.html