歡迎光臨
每天分享高質量文章

iOS 電商demo(實現各種常見動畫效果和頁面佈局)

作者:cfxiaoxixi

連結:https://www.jianshu.com/p/5b2815b60288

簡介

做過好些電商專案,整理了一些常見的動畫效果和頁面佈局貢獻出來,希望對各位有幫助。(圖片素材都來自於千庫網)

實現功能

refreshHeader的重寫,購物車動畫,仿京東詳情簡單佈局,分類頁面,collectionView串列形佈局及其cell左滑動畫,essay-header頭拉伸動畫。

首頁

essay-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_essay-header = [CFRefreshHeader essay-headerWithRefreshingBlock:^{
if (weakself.essay-headerOffsetY 
}
else{

}
}];

註:由於程式碼比較多,下麵不會再貼上程式碼,可以去我專案裡面看

專案地址點選進入https://github.com/chenfengxiaoxixi/OnlineShopDemo

購物車動畫演示.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)。這些問題都已解決。參考部落格點選進入

我的

essay-header拉伸動畫演示.gif

一個簡單的essay-header拉伸動畫,當時實現的時候我是對tableviewessay-header表頭進行拉伸,但是經過多次實踐發現坑比較多,效果倒是能實現。然後又去網上搜索,發現還有另一種方式,透過調整tableview的上邊距,嵌入一個imageview來實現,感覺比較友好,我就換成了這種方式來實現。

總結

做過幾款電商專案,感覺都大同小異,積累多了,功能實現起來也比較快速,要是有更好的想法我會在新增進去。

 

專案地址點選進入https://github.com/chenfengxiaoxixi/OnlineShopDemo

贊(0)

分享創造快樂