簡(jiǎn)介
做過(guò)好些電商項(xiàng)目，整理了一些常見(jiàn)的動(dòng)畫(huà)效果和頁(yè)面布局貢獻(xiàn)出來(lái)，希望對(duì)各位有幫助。（圖片素材都來(lái)自于千庫(kù)網(wǎng)）
該開(kāi)源項(xiàng)目有object-c和swift兩種版本。
實(shí)現(xiàn)功能
refreshHeader的重寫(xiě)，購(gòu)物車(chē)動(dòng)畫(huà)，仿京東詳情簡(jiǎn)單布局，分類(lèi)頁(yè)面，collectionView列表形布局及其cell左滑動(dòng)畫(huà)，header頭拉伸動(dòng)畫(huà)等。
首頁(yè)
1. 廣告輪播和廣告翻滾
使用的兩個(gè)三方庫(kù)SDCycleScrollView和RollingNotice，源碼很優(yōu)秀，建議去閱讀。SDCycleScrollView，RollingNotice
2. MJRefreshHeader的簡(jiǎn)單重寫(xiě)
繼承MJRefreshNormalHeader，去父類(lèi)（MJRefreshComponent）里面查看會(huì)發(fā)現(xiàn)里面有重寫(xiě)布局和監(jiān)聽(tīng)頭部位移的方法，我主要就是重寫(xiě)了下面幾個(gè)方法：
- (void)prepare
{
[super prepare];
}
- (void)placeSubviews
{
[super placeSubviews];
}
- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change
{
[super scrollViewContentOffsetDidChange:change];
}
然后在refreshBlock回調(diào)里面完成兩種偏移量的不同處理：
WeakSelf(self);
_collectionView.mj_header = [CFRefreshHeader headerWithRefreshingBlock:^{
if (weakself.headerOffsetY < pass150Offset) {
}
else{
}
}];
注：由于代碼比較多，下面不會(huì)再貼上代碼，可以去我項(xiàng)目里面看
項(xiàng)目地址點(diǎn)擊進(jìn)入
3. 添加購(gòu)物車(chē)動(dòng)畫(huà)
主要使用UIBezierPath和CABasicAnimation，實(shí)現(xiàn)的功能。由path畫(huà)出路徑，再由CABasicAnimation操作圖層的移動(dòng)，旋轉(zhuǎn)和縮放。參考源碼地址點(diǎn)擊進(jìn)入
4. 仿京東詳情布局
主視圖是一個(gè)scrollview，能左右滑動(dòng)，也可以由頂部segmentedControl點(diǎn)擊來(lái)控制。 詳情可以上下拖拽，上面是列表，下面是網(wǎng)頁(yè)。
5. 半模態(tài)動(dòng)畫(huà)
使用的一個(gè)三方庫(kù)LPSemiModalView，需要對(duì)CATransform3D以及矩陣有所了解，然后才能比較容易理解源碼。LPSemiModalView
6. 仿京東詳情輪播
相關(guān)邏輯并不復(fù)雜，通過(guò)scrollView嵌套實(shí)現(xiàn)，左右滑時(shí)，需要操作的減速對(duì)象不一樣，要實(shí)時(shí)切換。代碼注釋詳細(xì)，進(jìn)行了封裝，自定義程度高。
分類(lèi)
很簡(jiǎn)單的一個(gè)布局，左邊tableview，右邊collectionView，主要是在點(diǎn)擊左邊tableView時(shí)，做了個(gè)偏移判斷，點(diǎn)擊靠下（或者靠上）時(shí)，如果下面（或者上面）還有內(nèi)容沒(méi)顯示，則會(huì)偏移一定距離。
購(gòu)物車(chē)
用collectionview實(shí)現(xiàn)的上面列表顯示，下面方塊顯示。UICollectionViewLayout這是個(gè)很強(qiáng)大的布局容器，感興趣的可以去研究研究。
然后我在這里自定義了一個(gè)左滑cell，定義得很簡(jiǎn)單，擴(kuò)展性也比較強(qiáng)。中途遇到各了種坑，主要是cell內(nèi)部滑動(dòng)手勢(shì)和collectionview的滑動(dòng)手勢(shì)沖突，還有cell之間互斥的問(wèn)題（只能劃出一個(gè)cell）。這些問(wèn)題都已解決。
我的
一個(gè)簡(jiǎn)單的header拉伸動(dòng)畫(huà)，當(dāng)時(shí)實(shí)現(xiàn)的時(shí)候我是對(duì)tableviewheader表頭進(jìn)行拉伸，但是經(jīng)過(guò)多次實(shí)踐發(fā)現(xiàn)坑比較多，效果倒是能實(shí)現(xiàn)。然后又去網(wǎng)上搜索，發(fā)現(xiàn)還有另一種方式，通過(guò)調(diào)整tableview的上邊距，嵌入一個(gè)imageview來(lái)實(shí)現(xiàn)，感覺(jué)比較友好，我就換成了這種方式來(lái)實(shí)現(xiàn)。
總結(jié)
做過(guò)幾款電商項(xiàng)目，感覺(jué)都大同小異，積累多了，功能實(shí)現(xiàn)起來(lái)也比較快速，要是有更好的想法我會(huì)在添加進(jìn)去。
項(xiàng)目地址點(diǎn)擊進(jìn)入
