知識星球作者：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
